微信小程序左側(cè)菜單欄切換

最近再做一個(gè)商城類型的小程序,先來(lái)捋一捋需求:


分類一級(jí)頁(yè)面

首先進(jìn)入分類頁(yè)面顯示的是這個(gè)一級(jí)頁(yè)面,然后點(diǎn)擊任意的分類,會(huì)跳轉(zhuǎn)到二級(jí)頁(yè)面,并顯示當(dāng)前選擇分類的商品,例如我們這里選擇的休閑零食這個(gè)分類,顯示效果應(yīng)該如下:


分類頁(yè)面的二級(jí)頁(yè)面

先上代碼:
wxml:
<view class="container">
  <!-- 使用wx:if控制一級(jí)二級(jí)頁(yè)面的顯示隱藏 -->
  <view class='menu_one' wx:if="{{oneIsShow}}">
    <!-- 導(dǎo)航欄 -->
    <view class='search'>
      <view class='search_box'>
        <image class='icon_search' src='../../images/search.png'></image>
        <input class='ipt_search' placeholder='搜索'></input>
      </view>
    </view>
    <!-- 分類菜單一級(jí)頁(yè)面布局 -->
    <view class='menu_box'>
      <view class='title'>
        <text class='menu_box_title'>所有分類</text>
      </view>
      <view class='menu_box_list'>
        <block wx:key="key{{item_index}}" wx:for="{{sorting_menus}}">
          <!-- 使用三元運(yùn)算符設(shè)置每行第一個(gè)元素的位置 -->
          <!-- 定義data-id接受每個(gè)菜單欄的id,此id與二級(jí)頁(yè)面中的下標(biāo)和id保持一致,data-name獲取菜單名稱用做二級(jí)頁(yè)面右側(cè)區(qū)域標(biāo)題使用 -->
          <view class="menu_box_item {{index%3==0?'item_right':''}}" bindtap="showRight" data-id="{{item.id}}" data-name="{{item.sorting_menu_txts}}">
            <image class='menu_box_img' src='{{item.sorting_menu_imgs}}'></image>
            <text class='menu_box_name'>{{item.sorting_menu_txts}}</text>
          </view>
        </block>
      </view>
    </view>
  </view>
  <view class='menu_two' wx:else>
    <!-- 導(dǎo)航欄 -->
    <view class='search_two'>
      <view class='search_box_two'>
        <input class='ipt_search_two' placeholder='搜索' placeholder-class="text_center"></input>
        <image class='icon_search_two' src='../../images/search_red.png'></image>
      </view>
    </view>
    <!-- 下面選擇部分 -->
    <view class='main_menu_box'>
      <!-- 左側(cè)部分 -->
      <view class='menu_box_left'>
        <view class='sbl'>
          <block wx:key="key{{menu_index}}" wx:for="{{left_menus}}">
            <!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id,那個(gè)就是當(dāng)前狀態(tài)-->
            <!--用data-index記錄這個(gè)數(shù)據(jù)在數(shù)組的下標(biāo)位置,使用data-id設(shè)置每個(gè)item的id值,供打開右側(cè)頁(yè)面使用-->
            <view class='box_left_item {{curNav == item.id ? "active":""}}' bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}" data-name="{{item.menu_name}}">
              {{item.menu_name}}
            </view>
          </block>
        </view>
      </view>
      <!-- 右側(cè)部分 -->
      <view class='menu_box_right'>
        <!-- 接受左側(cè)或者一級(jí)頁(yè)面?zhèn)鬟^來(lái)的菜單名稱 -->
        <!-- 這里我沒有做有無(wú)數(shù)據(jù)的判斷,有需求的話大家可以加一下 -->
        <text class='menu_right_title'>{{menuRightTitle}}</text>
        <block wx:key="key{{menu_right_index}}" wx:for="{{menuRightGoods}}">
          <view class='menu_right_item'>
            <image class='shop_img' src='{{item.shopImg}}'></image>
            <image class='icon_vip' src='{{item.iconImg}}'></image>
            <view class='menu_right_txt'>
              <text class='menu_right_name'>{{item.name}}</text>
              <view class='menu_right_lable'>{{item.discount}}</view>
              <view class='menu_right_down'>
                <text class='menu_right_nprice'>¥{{item.newPrice}}</text>
                <text class='menu_right_oprice'>{{item.oldPrice}}</text>
                <image class='menu_right_shopcar' src='../../images/02fenlei_gouwuche.png'></image>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</view>

wxss:

.search {
  position: fixed;
  width: 750rpx;
  height: 100rpx;
  background: rgba(214, 70, 60, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.search_box {
  width: 670rpx;
  height: 60rpx;
  background: #fff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
}

.icon_search {
  width: 32rpx;
  height: 32rpx;
  padding-left: 27rpx;
}

.ipt_search {
  font-size: 30rpx;
  padding-left: 38rpx;
  width: 500rpx;
}
/* 一級(jí)頁(yè)面下方菜單顯示主view */
.menu_box {
  margin-top: 100rpx;
  width: 750rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  width: 750rpx;
  margin-top: 50rpx;
}

.menu_box_title {
  margin-left: 67rpx;
  color: #999;
  font-size: 28rpx;
}

.menu_box_list {
  margin-top: 30rpx;
  width: 616rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.menu_box_item {
  width: 125rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50rpx;
  margin-left: 120rpx;
}

.menu_box_img {
  width: 125rpx;
  height: 125rpx;
  padding-bottom: 20rpx;
}

.menu_box_name {
  color: #333;
  font-size: 24rpx;
}

.item_right {
  margin-left: 0rpx;
}

.menu_two{
  width: 100%;
  min-height: 100%;
}
.search_two {
  position: fixed;
  width: 750rpx;
  height: 100rpx;
  background: rgba(214, 70, 60, 1);
  display: flex;
  align-items: center;
  z-index: 9999;
}

.search_box_two {
  width: 560rpx;
  height: 60rpx;
  background: #fff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  margin-left: 40rpx;
}

.icon_search_two {
  width: 32rpx;
  height: 32rpx;
  padding-right: 33rpx;
}

.text_center{
  text-align: center;
  color: #D6463C;
}

.ipt_search_two {
  font-size: 30rpx;
  padding-left: 38rpx;
  width: 500rpx;
}

.main_menu_box{
  display: flex;
  height: 100%;
  overflow: hidden;
  margin-top: 100rpx;
}
/* 二級(jí)頁(yè)面左側(cè)菜單欄 */
.menu_box_left{
  /* 設(shè)置fixed定位,固定左邊,不會(huì)隨著頁(yè)面滾動(dòng)而滾動(dòng) */
  position: fixed;
  width: 180rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  background:rgba(249,249,249,1);
}
.sbl{
  /* 左側(cè)主view設(shè)置fixed后,當(dāng)左側(cè)欄超出屏幕高度后無(wú)法滑動(dòng),所以設(shè)置一個(gè)子view來(lái)解決,給子view設(shè)置相對(duì)定位 */
  position: absolute;
  height: 100%;
  overflow: auto;
}
.box_left_item{
  width: 180rpx;
  height: 80rpx;
  font-size: 28rpx;
  text-align: center;
  line-height: 84rpx;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  display: block;
}
.active{
  width: 180rpx;
  height: 80rpx;
  background:rgba(255,255,255,1); 
  font-weight:900;
  color:rgba(51,51,51,1);
}
.active:before{
  width:r5px;
  height:50rpx;
  content: "|";
  font-weight: 900;
  color: rgba(214,70,60,1);
  float: left;
  font-size: 50rpx;
  margin-left: 0;
  padding-left: 0;
}
.menu_box_right{
  position: absolute;
  width: 100%;
  left: 180rpx;
}
.menu_right_title{
  margin-left: 15rpx;
  margin-top: 15rpx;
  padding-bottom: 12rpx;
  font-size:24rpx;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(51,51,51,1);
}
.menu_right_item{
  margin-left: 15rpx;
  width: 100%;
  height: 225rpx;
  border-bottom: 1rpx solid #D8D8D8;
  display: flex;
}
.shop_img{
  width: 200rpx;
  height: 200rpx;
  padding: 15rpx;
}
.icon_vip{
  position: absolute;
  width: 38rpx;
  height: 30rpx;
  margin: 15rpx 0 0 15rpx;
}
.menu_right_txt{
  width: 310rpx;
  height: 200rpx;
  padding-top: 15rpx;  
  line-height:30rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu_right_name{
  font-size:28rpx;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(51,51,51,1);
}
.menu_right_lable{
  width: 50rpx;
  height: 50rpx;
  background:rgba(214,70,60,1);
  border-radius: 25rpx;
  font-size:20rpx;
  color:rgba(255,255,255,1);
  text-align: center;
  line-height: 50rpx;
}
.menu_right_down{
  display: flex;
  align-items: center;
  justify-content: space-between;  
  line-height:42rpx;
}
.menu_right_nprice{
  font-size:30rpx;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(214,70,60,1);
}
.menu_right_oprice{
  font-size:20rpx;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(185,189,185,1);
  text-decoration:line-through;
}
.menu_right_shopcar{
  width: 38rpx;
  height: 38rpx;
  float: right;
}

js:

// pages/menu/menu.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    menuRightGoods: [{
        shopImg: "../../images/02fenlei_pic1.jpg",
        iconImg: "../../images/vip.png",
        name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
        discount: "8.0折",
        newPrice: "23.9",
        oldPrice: "29.8",
      },
      {
        shopImg: "../../images/01home_pic3.jpg",
        iconImg: "../../images/vip.png",
        name: "車?yán)遄映?jí)無(wú)敵特別好吃 車?yán)遄?250g/盒",
        discount: "7折",
        newPrice: "19.9",
        oldPrice: "29.9",
      },
      {
        shopImg: "../../images/01home_pic4.jpg",
        iconImg: "../../images/vip.png",
        name: "海南香蕉1kg 新鮮水果 海南 水果 熱帶水果",
        discount: "6.7折",
        newPrice: "14.9",
        oldPrice: "20.8",
      },
      {
        shopImg: "../../images/01home_pic5.jpg",
        iconImg: "../../images/vip.png",
        name: "光明莫斯利安常溫酸奶 200g*6盒*4組",
        discount: "8.9折",
        newPrice: "61.9",
        oldPrice: "69.9",
      },
      {
        shopImg: "../../images/02fenlei_pic1.jpg",
        iconImg: "../../images/vip.png",
        name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
        discount: "8.0折",
        newPrice: "23.9",
        oldPrice: "29.8",
      }
    ],
    menuRightTitle: "所有商品",
    index: 1,
    curNav: 0,
    left_menus: [{
        menu_name: "所有商品",
        id: 0
      },
      {
        menu_name: "限時(shí)搶購(gòu)",
        id: 1
      },
      {
        menu_name: "時(shí)令果蔬",
        id: 2
      },
      {
        menu_name: "火鍋食材",
        id: 3
      },
      {
        menu_name: "肉禽蛋品",
        id: 4
      },
      {
        menu_name: "海鮮水產(chǎn)",
        id: 5
      },
      {
        menu_name: "水乳飲品",
        id: 6
      },
      {
        menu_name: "面點(diǎn)凍品",
        id: 7
      },
      {
        menu_name: "休閑零食",
        id: 8
      },
      {
        menu_name: "糧油干貨",
        id: 9
      },
      {
        menu_name: "日用百貨",
        id: 10
      },
      {
        menu_name: "清潔用品",
        id: 11
      }
    ],
    oneIsShow: true,
    sorting_menus: [{
        sorting_menu_imgs: "../../images/02fenlei_01.png",
        sorting_menu_txts: "所有商品",
        id:0
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_02.png",
        sorting_menu_txts: "限時(shí)搶購(gòu)",
        id: 1
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_03.png",
        sorting_menu_txts: "時(shí)令果蔬",
        id: 2
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_04.png",
        sorting_menu_txts: "火鍋食材",
        id: 3
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_05.png",
        sorting_menu_txts: "肉禽蛋品",
        id: 4
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_06.png",
        sorting_menu_txts: "海鮮水產(chǎn)",
        id: 5
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_07.png",
        sorting_menu_txts: "水乳飲品",
        id: 6
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_08.png",
        sorting_menu_txts: "面點(diǎn)凍品",
        id: 7
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_09.png",
        sorting_menu_txts: "休閑零食",
        id: 8
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_10.png",
        sorting_menu_txts: "糧油干貨",
        id: 9
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_11.png",
        sorting_menu_txts: "日用百貨",
        id: 10
      },
      {
        sorting_menu_imgs: "../../images/02fenlei_12.png",
        sorting_menu_txts: "清潔用品",
        id: 11
      }
    ],
  },
  //點(diǎn)擊出現(xiàn)右邊欄  
  switchRightTab: function(e) {
    // 獲取item項(xiàng)的id,和數(shù)組的下標(biāo)值  
    let id = e.target.dataset.id,
      index = parseInt(e.target.dataset.index),
      shopname = e.target.dataset.name;
      // 我這里數(shù)據(jù)寫的是靜態(tài)的,所以聲明一個(gè)數(shù)組然后用switch重新賦值
    var newGoods = [];
    console.log(shopname);
    console.log(index);
    switch (index) {
      case 0:
        newGoods = [{
            shopImg: "../../images/02fenlei_pic1.jpg",
            iconImg: "../../images/vip.png",
            name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
            discount: "8.0折",
            newPrice: "23.9",
            oldPrice: "29.8",
          },
          {
            shopImg: "../../images/01home_pic3.jpg",
            iconImg: "../../images/vip.png",
            name: "車?yán)遄映?jí)無(wú)敵特別好吃 車?yán)遄?250g/盒",
            discount: "7折",
            newPrice: "19.9",
            oldPrice: "29.9",
          },
          {
            shopImg: "../../images/01home_pic4.jpg",
            iconImg: "../../images/vip.png",
            name: "海南香蕉1kg 新鮮水果 海南 水果 熱帶水果",
            discount: "6.7折",
            newPrice: "14.9",
            oldPrice: "20.8",
          },
          {
            shopImg: "../../images/01home_pic5.jpg",
            iconImg: "../../images/vip.png",
            name: "光明莫斯利安常溫酸奶 200g*6盒*4組",
            discount: "8.9折",
            newPrice: "61.9",
            oldPrice: "69.9",
          },
          {
            shopImg: "../../images/02fenlei_pic1.jpg",
            iconImg: "../../images/vip.png",
            name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
            discount: "8.0折",
            newPrice: "23.9",
            oldPrice: "29.8",
          }
        ]
        break;
      case 1:
        newGoods = [{
          shopImg: "../../images/02fenlei_pic1.jpg",
          iconImg: "../../images/vip.png",
          name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
          discount: "8.0折",
          newPrice: "23.9",
          oldPrice: "29.8",
        }]
        break;
      case 2:
        newGoods = [{
          shopImg: "../../images/01home_pic3.jpg",
          iconImg: "../../images/vip.png",
          name: "車?yán)遄映?jí)無(wú)敵特別好吃 車?yán)遄?250g/盒",
          discount: "7折",
          newPrice: "19.9",
          oldPrice: "29.9",
        }]
        break;
      case 3:
        newGoods = [{
          shopImg: "../../images/01home_pic4.jpg",
          iconImg: "../../images/vip.png",
          name: "海南香蕉1kg 新鮮水果 海南 水果 熱帶水果",
          discount: "6.7折",
          newPrice: "14.9",
          oldPrice: "20.8",
        }]
        break;
      case 4:
        newGoods = [{
          shopImg: "../../images/01home_pic5.jpg",
          iconImg: "../../images/vip.png",
          name: "光明莫斯利安常溫酸奶 200g*6盒*4組",
          discount: "8.9折",
          newPrice: "61.9",
          oldPrice: "69.9",
        }]
        break;
      case 5:
        newGoods = [{
          shopImg: "../../images/02fenlei_pic1.jpg",
          iconImg: "../../images/vip.png",
          name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
          discount: "8.0折",
          newPrice: "23.9",
          oldPrice: "29.8",
        }]
        break;
      case 6:
        newGoods = [{
          shopImg: "../../images/01home_pic4.jpg",
          iconImg: "../../images/vip.png",
          name: "海南香蕉1kg 新鮮水果 海南 水果 熱帶水果",
          discount: "6.7折",
          newPrice: "14.9",
          oldPrice: "20.8",
        }]
        break;
      case 7:
        newGoods = [{
          shopImg: "../../images/01home_pic3.jpg",
          iconImg: "../../images/vip.png",
          name: "車?yán)遄映?jí)無(wú)敵特別好吃 車?yán)遄?250g/盒",
          discount: "7折",
          newPrice: "19.9",
          oldPrice: "29.9",
        }]
        break;
      case 8:
        newGoods = [{
          shopImg: "../../images/01home_pic5.jpg",
          iconImg: "../../images/vip.png",
          name: "光明莫斯利安常溫酸奶 200g*6盒*4組",
          discount: "8.9折",
          newPrice: "61.9",
          oldPrice: "69.9",
        }]
        break;
      case 9:
        newGoods = [{
          shopImg: "../../images/02fenlei_pic1.jpg",
          iconImg: "../../images/vip.png",
          name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
          discount: "8.0折",
          newPrice: "23.9",
          oldPrice: "29.8",
        }]
        break;
      case 10:
        newGoods = [{
          shopImg: "../../images/01home_pic3.jpg",
          iconImg: "../../images/vip.png",
          name: "車?yán)遄映?jí)無(wú)敵特別好吃 車?yán)遄?250g/盒",
          discount: "7折",
          newPrice: "19.9",
          oldPrice: "29.9",
        }]
        break;
      case 11:
        newGoods = [{
          shopImg: "../../images/01home_pic4.jpg",
          iconImg: "../../images/vip.png",
          name: "海南香蕉1kg 新鮮水果 海南 水果 熱帶水果",
          discount: "6.7折",
          newPrice: "14.9",
          oldPrice: "20.8",
        }]
        break;
    }
    // 把點(diǎn)擊到的某一項(xiàng),設(shè)為當(dāng)前index  
    this.setData({
      curNav: id,//設(shè)置當(dāng)前點(diǎn)擊項(xiàng)
      curIndex: index,//更改當(dāng)前點(diǎn)擊項(xiàng)下標(biāo)為當(dāng)前數(shù)組下標(biāo)
      menuRightTitle: shopname,//設(shè)置右側(cè)顯示欄標(biāo)題
      menuRightGoods: newGoods//設(shè)置需要展示的商品
    })
  },
  // 分類首頁(yè)跳轉(zhuǎn)二級(jí)頁(yè)面
  showRight:function(e){
    let chooseId = e.currentTarget.dataset.id,
      shopname = e.currentTarget.dataset.name;;
    console.log(shopname);
    let newGoods = [];
    switch (chooseId) {
      case 0:
        newGoods = [{
          shopImg: "../../images/02fenlei_pic1.jpg",
          iconImg: "../../images/vip.png",
          name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
          discount: "8.0折",
          newPrice: "23.9",
          oldPrice: "29.8",
        },
        {
          shopImg: "../../images/01home_pic3.jpg",
          iconImg: "../../images/vip.png",
          name: "車?yán)遄映?jí)無(wú)敵特別好吃 車?yán)遄?250g/盒",
          discount: "7折",
          newPrice: "19.9",
          oldPrice: "29.9",
        },
        {
          shopImg: "../../images/01home_pic4.jpg",
          iconImg: "../../images/vip.png",
          name: "海南香蕉1kg 新鮮水果 海南 水果 熱帶水果",
          discount: "6.7折",
          newPrice: "14.9",
          oldPrice: "20.8",
        },
        {
          shopImg: "../../images/01home_pic5.jpg",
          iconImg: "../../images/vip.png",
          name: "光明莫斯利安常溫酸奶 200g*6盒*4組",
          discount: "8.9折",
          newPrice: "61.9",
          oldPrice: "69.9",
        },
        {
          shopImg: "../../images/02fenlei_pic1.jpg",
          iconImg: "../../images/vip.png",
          name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
          discount: "8.0折",
          newPrice: "23.9",
          oldPrice: "29.8",
        }
        ]
        break;
      case 1:
        newGoods = [{
          shopImg: "../../images/02fenlei_pic1.jpg",
          iconImg: "../../images/vip.png",
          name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
          discount: "8.0折",
          newPrice: "23.9",
          oldPrice: "29.8",
        }]
        break;
      case 2:
        newGoods = [{
          shopImg: "../../images/01home_pic3.jpg",
          iconImg: "../../images/vip.png",
          name: "車?yán)遄映?jí)無(wú)敵特別好吃 車?yán)遄?250g/盒",
          discount: "7折",
          newPrice: "19.9",
          oldPrice: "29.9",
        }]
        break;
      case 3:
        newGoods = [{
          shopImg: "../../images/01home_pic4.jpg",
          iconImg: "../../images/vip.png",
          name: "海南香蕉1kg 新鮮水果 海南 水果 熱帶水果",
          discount: "6.7折",
          newPrice: "14.9",
          oldPrice: "20.8",
        }]
        break;
      case 4:
        newGoods = [{
          shopImg: "../../images/01home_pic5.jpg",
          iconImg: "../../images/vip.png",
          name: "光明莫斯利安常溫酸奶 200g*6盒*4組",
          discount: "8.9折",
          newPrice: "61.9",
          oldPrice: "69.9",
        }]
        break;
      case 5:
        newGoods = [{
          shopImg: "../../images/02fenlei_pic1.jpg",
          iconImg: "../../images/vip.png",
          name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
          discount: "8.0折",
          newPrice: "23.9",
          oldPrice: "29.8",
        }]
        break;
      case 6:
        newGoods = [{
          shopImg: "../../images/01home_pic4.jpg",
          iconImg: "../../images/vip.png",
          name: "海南香蕉1kg 新鮮水果 海南 水果 熱帶水果",
          discount: "6.7折",
          newPrice: "14.9",
          oldPrice: "20.8",
        }]
        break;
      case 7:
        newGoods = [{
          shopImg: "../../images/01home_pic3.jpg",
          iconImg: "../../images/vip.png",
          name: "車?yán)遄映?jí)無(wú)敵特別好吃 車?yán)遄?250g/盒",
          discount: "7折",
          newPrice: "19.9",
          oldPrice: "29.9",
        }]
        break;
      case 8:
        newGoods = [{
          shopImg: "../../images/01home_pic5.jpg",
          iconImg: "../../images/vip.png",
          name: "光明莫斯利安常溫酸奶 200g*6盒*4組",
          discount: "8.9折",
          newPrice: "61.9",
          oldPrice: "69.9",
        }]
        break;
      case 9:
        newGoods = [{
          shopImg: "../../images/02fenlei_pic1.jpg",
          iconImg: "../../images/vip.png",
          name: "新鮮圣女果小番茄包郵批 發(fā)時(shí)令應(yīng)季摘果小西紅柿",
          discount: "8.0折",
          newPrice: "23.9",
          oldPrice: "29.8",
        }]
        break;
      case 10:
        newGoods = [{
          shopImg: "../../images/01home_pic3.jpg",
          iconImg: "../../images/vip.png",
          name: "車?yán)遄映?jí)無(wú)敵特別好吃 車?yán)遄?250g/盒",
          discount: "7折",
          newPrice: "19.9",
          oldPrice: "29.9",
        }]
        break;
      case 11:
        newGoods = [{
          shopImg: "../../images/01home_pic4.jpg",
          iconImg: "../../images/vip.png",
          name: "海南香蕉1kg 新鮮水果 海南 水果 熱帶水果",
          discount: "6.7折",
          newPrice: "14.9",
          oldPrice: "20.8",
        }]
        break;
    }
    this.setData({
      curNav : chooseId,
      oneIsShow : false,//顯示二級(jí)頁(yè)面
      menuRightGoods:newGoods,
      menuRightTitle: shopname,
    });
  }
})

這樣就可以實(shí)現(xiàn)需求了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 歡迎關(guān)注我的微信公眾號(hào):禿頂?shù)臋幟?看原文哦~ 逛知乎的時(shí)候看到一個(gè)問題是“你嘗過那些一見傾心的糕點(diǎn)”,吃的問題當(dāng)...
    禿頂?shù)臋幟?/span>閱讀 1,093評(píng)論 0 3
  • 朋友說奧森有大片的向日葵,我們相約而往,還沒到我已經(jīng)想象大片金黃色向日葵下該如何擺姿勢(shì)呢。 到了才發(fā)現(xiàn),向日葵是有...
    吉祥在路上閱讀 270評(píng)論 0 2
  • 牢記事件很少是"僅僅發(fā)生了"而已。它們發(fā)生在特定影響的結(jié)果,且這些影響可能是主要或次要的,直接或間接的,在時(shí)間或空...
    張?zhí)硌?/span>閱讀 239評(píng)論 0 1
  • 通過本影片有以下幾點(diǎn)感觸: 1戰(zhàn)爭(zhēng)的殘酷是無(wú)法想象的。理性思維沒法解釋為什么打仗。 2戰(zhàn)場(chǎng)上有一種上下級(jí)之間的兄弟...
    木子老師_8a03閱讀 378評(píng)論 0 1

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