微信小程序menu布局及页面跳转

menu布局.png

1. menu布局

wxml代码

 <view class="menu_item">
    <image src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png"></image>
    <view>超市</view>
  </view>

wxss代码

.menu {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.menu_item {
  width: 21vw;
  height: 21vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.menu view image {
  width: 50%;
  height: 50%;
}

2. 页面跳转
   1. 通过navigator标签跳转页面

<view class="menu_item">
    <image src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png"></image>
    <view>
    <navigator url="../detail/index" >超市</navigator>
    </view>
  </view>

2. 跳转tabBer页面
   需要为navigator添加 open-type="switchTab"

  <view class="menu_item">
    <image src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png"></image>
    <view>
      <navigator open-type="switchTab" url="../mine/index">我的</navigator>
    </view>
  </view>