微信小程序——纵向选项卡（垂直分类）、官方扩展vtabs

纵向选项卡

强烈建议使用官方扩展vtabs组件

第一种： 以下是个人写的效果图（不支持上拉切换）：

js

const app = getApp()
Page({
  data: {
    cateItems:[
      {
        cate_id:1,
        cate_name:'洗护',
        children: [
          { 
            child_id: 1, 
            name: '洁面皂', 
            image: "http://img11.360buyimg.com/n0/jfs/t304/257/1326356931/91893/cf5d3987/5437d505Neb85319a.jpg" 
          }, 
          { 
            child_id: 2, 
            name: '卸妆', 
            image: "http://img2.imgtn.bdimg.com/it/u=2773684370,2662418416&fm=26&gp=0.jpg"  
          }
        ]
      },
      {
        cate_id:2,
        cate_name:'生鲜'
      },
      {
        cate_id:3,
        cate_name:'食品'
      },
      {
        cate_id: 4,
        cate_name: '女装'
      },
      {
        cate_id: 5,
        cate_name: '百货'
      },
      {
        cate_id: 6,
        cate_name: '母婴'
      },
      {
        cate_id: 7,
        cate_name: '手机'
      },
      {
        cate_id: 8,
        cate_name: '鞋靴'
      },
      {
        cate_id: 9,
        cate_name: '运动'
      },
      {
        cate_id: 10,
        cate_name: '美家'
      },
      {
        cate_id: 11,
        cate_name: '男装'
      },
      {
        cate_id: 12,
        cate_name: '水果'
      },
      {
        cate_id: 13,
        cate_name: '电子'
      }
    ],
    curNav:1,
    curIndex:0
  },
 
  switchRightTab:function(e){
    let id = e.target.dataset.id,index=e.target.dataset.index;
    this.setData({
      curNav:id,
      curIndex:index
    })
  },

})

wxml

<view class="container">
  <scroll-view class='nav_left' scroll-y='true'>
    <block wx:for="{{cateItems}}" wx:key="{{index}}">
      <view class="nav_left_items {{curNav==item.cate_id?'active':''}}" bindtap="switchRightTab" data-index='{{index}}' data-id="{{item.cate_id}}">{{item.cate_name}}</view>
    </block>
  </scroll-view>
  <scroll-view class="nav_right" scroll-y="true">
    <!--如果有数据，才遍历项-->
    <view wx:if="{{cateItems[curIndex].children.length>0}}">
      <block wx:for="{{cateItems[curIndex].children}}" wx:key="{{index}}">
        <view class="nav_right_items">
        <!--界面跳转 -->
          <navigator url="../../detail/detail">
            <image src="{{item.image}}"></image>
            <text>{{item.name}}</text>
          </navigator>
        </view>
      </block>
    </view>

    <!--如果无数据，则显示数据-->
    <view class="nocate" wx:else>
      <image src="http://pic2.cxtuku.com/00/05/79/b863e9dcc935.jpg"></image>
      <text>该分类暂无数据</text>
    </view>
    
  </scroll-view>
</view>

wxss

.container{
  position:fixed;
  width:100%;
  height:100%;
  background-color:#FFF;
}
.nav_left{
  width:25%;
  height:100%;
  background:#F2F2F2;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
}
.nav_left .nav_left_items{
  height:100rpx;
  line-height:100rpx;
  font-size:28rpx;
}
.nav_left .nav_left_items.active{
  position:relative;
  background:#FFF;
  color:#FF5000;
}
.nav_left .nav_left_items.active::before{
  display: inline-block;
  width:6rpx;
  height:60rpx;
  background:#FE5723;
  content:'';
  position:absolute;
  top:20rpx;
  left:0;
}
.nav_right{
  position:absolute;
  top:0;
  right:0;
  width:75%;
  height:100%;
}
 
.nav_right .nav_right_items{
  float: left;   
  width: 33.33%; 
  text-align: center;  
  padding:30rpx 0;
} 
.nav_right .nav_right_items image{
  width: 120rpx;  
  height: 120rpx; 
} 
.nav_right .nav_right_items text{
  display: block;  
  margin-top: 20rpx;  
  font-size: 28rpx;  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
} 
.nocate{
  padding:100rpx;
  text-align: center;  
} 
 
.nocate image{
  width:70rpx;
  height:70rpx;
}
.nocate text{
  font-size:28rpx;
  display:block;
  color:#BBB;
}
/*隐藏滚动条*/
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

第二种：官方拓展组件vtabs（支持上拉切换选项）

需要导入组件：

代码：
js

Page({
  data: {
    vtabs: [],
    activeTab: 0,
  },
  onLoad() {
    const titles = ['热搜推荐', '手机数码', '家用电器',
      '生鲜果蔬', '酒水饮料', '生活美食', 
      '美妆护肤', '个护清洁', '女装内衣', 
      '男装内衣', '鞋靴箱包', '运动户外', 
      '生活充值', '母婴童装', '玩具乐器', 
      '家居建材', '计生情趣', '医药保健', 
      '时尚钟表', '珠宝饰品', '礼品鲜花', 
      '图书音像', '房产', '电脑办公']
    const vtabs = titles.map(item => ({title: item}))
    this.setData({vtabs})
  },

  onTabCLick(e) {
    const index = e.detail.index
    console.log('tabClick', index)
  },

  onChange(e) {
    const index = e.detail.index
    console.log('change', index)
  }
})

json

{
  "usingComponents": {
    "mp-vtabs": "../components/vtabs/index",
    "mp-vtabs-content": "../components/vtabs-content/index"
  }
}

wxml

<mp-vtabs vtabs="{{vtabs}}" activeTab="{{activeTab}}" bindtabclick="onTabCLick" bindchange="onChange" class="test">
  <block wx:for="{{vtabs}}" wx:key="title">
    <mp-vtabs-content tabIndex="{{index}}">
      <view class="vtabs-content-item">我是第{{index + 1}}项： {{item.title}}</view>
    </mp-vtabs-content>
  </block>
</mp-vtabs>

wxss

page{
  background-color: #FFFFFF;
  height: 100%;
}

.vtabs-content-item {
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}

还有两个组件文件，需要的可到这里下载：https://download.csdn.net/download/wy313622821/20044383