微信小程序：菜单栏

菜单栏的主要实现方式就是嵌套view，做好每一层的view的设计。

要注意的是在放图片的时候记得要把图片嵌套在view里面，然后把图片的wxss设置为width：100%，height：100%。

设计页面的时候可以先给每个区设置background-color和border，这样可以最直观的看到你设计的效果对不对，最后再把这两个样式删掉就可以了。

这里做的主要是中间：动漫、电影、综艺、直播的菜单栏导航。

是在js的data里面把每个菜单的图片、名字都设置成一个对象，然后存在一系列数组里面，最后循环遍历出来

效果图：

 

one.js

// pages/forview/forview.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
    
      topimg:"../images/logo.jpg",
      links:[{"text":"动漫","url":"a1","img":"../images/dm.png"},
      {"text":"电影","url":"a2","img":"../images/dy.png"},
      {"text":"综艺","url":"a3","img":"../images/zy.png"},
      {"text":"直播","url":"a4","img":"../images/zb.png"}]
  
    },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
  
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
  
    }
  })

one.json

{
  "usingComponents": {}
}

one.wxml

<!--pages/forview/forview.wxml-->
<view  class="firstview">
   <view  class="topimg">
      <image  src="{{topimg}}"  class="cimg"></image>
   </view>
   <view  class="menuview">
      <block  wx:for="{{links}}">
         <view  class="boxview">
            <view class="imgview">
              <image src="{{item.img}}"  class="cimg"></image>
            </view>
            <view  class="txtview">
              <view>{{item.text}}</view>
            </view>
         </view>
      </block>
   </view>
   <view class="buttomview">
        <view class="box">
            <image src="../images/jr1.jpg" class="cimg"></image>
        </view>
        <view class="box">
            <image src="../images/jr2.jpg" class="cimg"></image>
        </view>
        <view class="box">
            <image src="../images/jr3.jpg" class="cimg"></image>
        </view>
        <view class="box">
            <image src="../images/jr4.jpg" class="cimg"></image>
        </view>
   </view>
</view>

one.wxss

/* pages/forview/forview.wxss */
.firstview{
    width: 100%;
    height: 100vh;
    background-color: 	#F5F5F5;
  }
  .topimg{
    width: 100%;
    height: 35%;
  }
  .cimg{
    width: 100%;
    height: 100%;
  }
  .menuview{
    width: 100%;
    height: 14%;
    border-bottom: 1px solid  paleturquoise;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .boxview{
    width: 20%;
    height: 80%;
    /**border: 1px  solid  black;**/
    margin: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
  
  }
  .imgview{
    width: 50%;
    height: 45%;
    /**border: 1px  solid  black;**/
  }
  .txtview{
    width: 90%;
    height: 45%;
   /** border: 1px  solid  black;**/
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
  }
  .buttomview{
      width:100%;
      height: 50%;
      background-color: skyblue;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-items: center;
  }
  .box{
    width: 48%;
    height: 48%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px;
  }
  .cimg{
      widows: 100%;
      height: 100%;
  }