小程序商城现跳转或TAB切换展示

index.wxml

<view class="tab">
  <view class="tab-item" bindtap="switchTab" data-index="0">首页</view>
  <view class="tab-item" bindtap="switchTab" data-index="1">分类</view>
  <view class="tab-item" bindtap="switchTab" data-index="2">购物车</view>
</view>

<view wx:if="{{currentTab == 0}}">
  <!-- 首页商品列表 -->
  <block wx:for="{{homeProducts}}" wx:key="id">
    <button bindtap="goToDetail" data-id="{{item.id}}">{{item.name}}</button>
  </block>
</view>
<view wx:if="{{currentTab == 1}}">
   <block wx:for="{{category}}" wx:key="id">
    <button bindtap="goToDetail" data-id="{{item.id}}">{{item.name}}</button>
  </block>
</view>
<view wx:if="{{currentTab == 2}}">
  <block wx:for="{{shoping}}" wx:key="id">
    <button bindtap="goToDetail" data-id="{{item.id}}">{{item.name}}</button>
  </block>
</view>

index.js

Page({
   data: {
     currentTab: 0,
     homeProducts: [
       {id: '001', name: '小米'},
       {id: '002', name: '华为'}
     ],
    category: [
       {id: '001', name: '电脑'},
       {id: '002', name: '手机'}
     ],
  shoping: [
     {id: '001', name: '京东'},
     {id: '002', name: '淘宝'}
    ]
   },
   
   switchTab: function(e) {
     this.setData({
       currentTab: e.currentTarget.dataset.index
     });
    console.log(this.data.currentTab)
   },
   
   goToDetail: function(e) {
     const productId = e.currentTarget.dataset.id;
     wx.navigateTo({
       url: `/pages/detail/detail?id=${productId}`
     });
   }
 })

index.wxss

.tab-item{
  float: left;
  margin-right: 15px;
  width:100px;
  height: 30px;
  border: 1px solid red;
}

来源：https://www.youzan.com/cms/article/49264.html