【微信小程序 三】用户界面

前端
在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 */

---