微信小程序menu布局及頁面跳轉(zhuǎn)

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%;
}
  1. 頁面跳轉(zhuǎn)
    1. 通過navigator標(biāo)簽跳轉(zhuǎn)頁面
<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>
  1. 跳轉(zhuǎn)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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容