menu布局.png
- 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%;
}
- 页面跳转
- 通过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>
- 跳转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>
