前端
在app.json中加入以下代碼，實現tabBar的導航菜單欄的功能
"tabBar": {
"backgroundColor": "#318EE2",
"color": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "images/tabbar/2/home2.png",
"selectedIconPath": "images/tabbar/2/home.png"
},
{
"pagePath": "pages/forum/forum",
"text": "借書",
"iconPath": "images/tabbar/2/scan2.png",
"selectedIconPath": "images/tabbar/2/scan.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "images/tabbar/2/user2.png",
"selectedIconPath": "images/tabbar/2/user.png"
}
]
}user.js
// user.js
var _app = getApp()
Page({
/**
* 頁面的初始數據
*/
data: {
menuitems: [
{ text: '賬號信息', url: '../userinfo/userinfo', icon: '../../images/usermenu/info.png', tips: '' },
{ text: '預訂單', url: '../borrowbook/borrowbook?status=N', icon: '../../images/usermenu/order.png', tips: '' },
{ text: '借閱歷史', url: '../borrowbook/borrowbook?status=F', icon: '../../images/usermenu/history.png', tips: '' },
{ text: '待歸還', url: '../borrowbook/borrowbook?status=Y', icon: '../../images/usermenu/huan.png', tips: '' },
{ text: '個人喜好', url: '../favorcate/favorcate', icon: '../../images/usermenu/favor.png', tips: '' },
]
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
let that = this
_app.getUserInfo(function (userinfo) {
console.log(userinfo)
console.log(getApp().globalData.userSign)
that.setData({
userinfo: userinfo,
userSign: getApp().globalData.userSign,
})
})
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
let that = this
_app.getUserInfo(function (userinfo) {
console.log(userinfo)
console.log(getApp().globalData.userSign)
that.setData({
userinfo: userinfo,
userSign: getApp().globalData.userSign,
})
})
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})user.wxml
<view class="mine-wrapper">
<view class="avatar-wrapper">
<view>
<view class="avatar">
<image style="border-radius:50%;" src="{{userinfo.avatarUrl ? userinfo.avatarUrl:'../../images/avatar/avatar_01.png'}}"></image>
</view>
<view class="text">
<text wx:if="{{userinfo.nickName}}">{{userinfo.nickName}}</text>
<text wx:else bindtap="toLogin">註冊 / 登錄</text>
</view>
<view class="text">
<text wx:if="{{userSign==2}}">{{"您還沒有填寫真實信息，暫不能借書"}}</text>
<text wx:elif="{{userSign==1}}">{{"會員用戶"}}</text>
</view>
</view>
</view>
<view class="list-wrapper">
<view class="weui-cells weui-cells_after-title">
<block wx:for="{{menuitems}}" wx:key="menu_for">
<navigator url="{{item.url}}" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="{{item.icon}}"></image>
</view>
<view class="weui-cell__bd">{{item.text}}</view>
<view class="weui-cell__ft weui-cell__ft_in-access">{{item.tips}}</view>
</navigator>
</block>
</view>
</view>
</view>user.wxss
.avatar-wrapper {
background: #1b82d1;
padding: 25px 0;
}
.avatar-wrapper .avatar {
margin: 0 auto;
text-align: center;
}
.avatar-wrapper .avatar image {
width: 100px;
height: 100px;
}
.avatar-wrapper .text {
text-align: center;
color: #fff;
}
.weui-cell__hd image {
margin-right: 5px;
vertical-align: middle;
width: 20px;
height: 20px;
}
.weui-cells::after{
content: none;
border-bottom: none;
}
.weui-cells::before{
border-top: none;
}
/* user.wxss */
