微信小程序商城15天从零实战视频课程-自定义底部菜单的实现

js代码

// pages/tmp/caidan/01-dibu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    winWidth: 0,
    winHeight: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    /** 
     * 获取系统信息 
     */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    }); 
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml代码

<view class="flex-wrap header">
  <input placeholder="添加一个任务"  bindinput="updateDraft"  value="{{draft}}"   class="new-todo"/>
  <text class="add tappable" ontap="addTodo">添加</text>
</view>


<view class="graySpace"></view> 
<view class="footer">
  <view class="navs">
    <view class="nav-item" style='width:12%'>
      <image src='/images/sp01.png' class="nav-image"/><text >首页</text>
    </view>
    <view class="nav-item" style='width:13%' >
      <image src='/images/sp02.png' class="nav-image"/><text >收藏</text>
    </view>  
    <view class="nav-item" style='width:15%' >
      <image src='/images/sp03.png' class="nav-image"/><text >购物车</text>
    </view>  
    <view class="nav-item"  style='width:33%'>
      <button class='bt01'>加入购物车</button>
    </view>  
    <view class="nav-item"  style='width:27%'>
      <button class='bt02'>立即购买</button>
    </view>         
  </view>
</view>

wxss代码

page {
  background-color: #f2f2f2;
}
.flex-wrap{
  display: flex;
  flex-direction: row;
}
.tappable:hover {
  opacity: .6;
}

.header {
  height: 54px;
  align-items: center;
  background-color: #FFF;
}

.new-todo {
  flex: 1;
  font-size: 18px;
  box-sizing: border-box;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding-left: 12px;
  line-height: 100%;
  height: 100%;
}
.add {
  color: #FFF;
  background-color: #1aad19;
  font-size: 16px;
  line-height: 53px;
  padding: 0 16px;
}

.footer {
  position: fixed;
  bottom: 0;
  height: 44px;
  width: 100%;
  line-height: 44px;
  color: #666;
  border-top: 1px solid #eee;
  background: #fff;
  font-size: 16px;
  text-align: center;
}
.remove-done,
.setting {
  color: #1aad19;
}
.remove-done {
  position: absolute;
  right: 12px;
}
.setting {
  position: absolute;
  left: 12px;
}


.bt01{ 
  width: 100%; 
  background-color: darkorange;
  color:white; 
  border-radius: 0; font-size: 16px; padding: 0; margin: 0; height: 44px;
}
.bt02{ 
  width: 100%; 
  background-color: tomato;
  color:white; 
  border-radius: 0; font-size: 14px; padding: 0; margin: 0; height: 44px;
}
/*菜单样式*/
.navs {
  display: flex;
}
.nav-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0px;
}

.nav-item .nav-image {
  width: 22px;
  height: 22px;
  /*border-radius: 3px;*/
}

.nav-item text { 
  color: #666;
  font-size: 12px; margin-top: -10px; text-align: center;
}

欢迎大家收看我的****：微信小程序商城15天从零实战视频课程
https://edu.****.net/course/detail/19437