1.先附上我的主页的效果图
2.userMsg.js文件
// pages/userMsg/userMsg.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs1: [
{
text: '首页',
},
{
text: '发布',
},
{
text: '查询',
},
{
text: '我的',
},
],
},
handleChange(e) {
const index = e.detail.value;
console.log(e);
console.log("value: " + e.detail.value);
switch (index) {
case 0:
wx.redirectTo({
url: '/pages/lostandfound/lostandfound',
})
break;
case 1:
wx.redirectTo({
url: '/pages/send/send',
})
break;
case 2:
wx.redirectTo({
url: '/pages/find/find',
})
break;
case 3:
// wx.navigateTo({
// url: '/pages/userMsg/userMsg',
// })
break;
}
},
handleSelected() {
this.setData({
index: 2,
});
},
handleClick(e) {
const { index, title } = e.detail;
console.log('点击了tab:' + index, title);
},
/**
* 跳转到我的发布页面
*/
toMySend(event){
wx.navigateTo({
url: 'mySend/mySend',
})
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
3.userMsg.json文件
{
"navigationBarTitleText": "我的",
"usingComponents": {
"w-button": "/dist/w-button/index",
"w-tabs": "/dist/w-tabs/index",
"w-avatar": "/dist/w-avatar/index"
}
}4.userMsg.wxml文件
<!--pages/userMsg/userMsg.wxml-->
<!-- 头像及用户名部分 -->
<view class='avatar-backgrond'>
<!-- <view class="avatar">
<w-avatar src="{{item.avatar}}" size="large" >W</w-avatar> <!--头像 -->
<!--> </view> -->
<view class='userInfo'>
<image src="/images/photo_1.jpg" class='userinfo-avatar'> </image>
</view>
<view class='username'>
<text >yxc</text>
</view>
</view>
<view class='function' catchtap='toMySend'>
<text>我的发布</text>
</view>
<!--分割线 -->
<view class='divLine'></view>
<!-- 导航栏-->
<view class='tabs'>
<w-tabs bind:onChange="handleChange" currentIndex="3" options="{{ tabs1 }}" />
</view>
5.userMsg.wxss文件
/* pages/userMsg/userMsg.wxss */
.tabs{
position: fixed;
width: 100%;
bottom: 0;
}
.avatar-backgrond{
width: 100%;
height: 350rpx;
background-color: rgb(14, 161, 14);
}
.avatar{
/* 居中 */
margin-top: 100rpx;
display: flex;
justify-content: center;
overflow: hidden;
width: 161rpx;
height: 161rpx;
border-radius: 50%;
}
.userinfo-avatar{
margin-top: 50rpx;
width: 200rpx;
height:200rpx;
border-radius: 50%;
display: flex;
overflow: hidden;
text-align: center;
}
.userInfo{
display: flex;
flex-direction: row;
justify-content:center;
}
.username{
text-align: center;
color: white;
}
/*分割线样式*/
.divLine{
background: #E0E3DA;
width: 100%;
height: 5rpx;
}
.function{
width: 100%;
height: 90rpx;
margin-top: 30rpx;
margin-left: 30rpx;
}
6.其中点击我的发布跳转到的页面同首页一样
获取源码：https://github.com/yangxuechen/LostAndFound/tree/master/wx_app
标签：function,index,主页,--,微信,text,userMsg,失物招领,页面 From： https://blog.51cto.com/u_15912510/5937849