微信小程序——选项卡demo

1.编写布局index.wxml中：

<!--index.wxml-->
<view class="container">
    <view class="nav-left">
         <block wx:for="{{navLeftItems}}">
            <view class="nav-left-items {{curNav == item.id ? 'active' : ''}}" 
                  bindtap="switchRightTab" data-id="{{item.id}}" data-index="{{index}}">
                {{item.tree.desc}}
            </view>
        </block> 
    </view>
    
    <view class="nav-right">
        <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}" class="wrapper">
            <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
                <view class="nav-right-items">
                    <view>
                        <block wx:if="{{item.tree.logo}}">
                            <image src="{{item.tree.logo}}"></image>
                        </block>
                        <block wx:else>
                            <image src="http://temp.im/50x30"></image>
                        </block>
                    </view>
                    <view wx:if="{{item.tree.desc}}">
                        <text>{{item.tree.desc}}</text>
                    </view>
                    <view wx:else>
                        <text>{{item.tree.desc2}}</text>
                    </view>
                </view>
            </block>
        </view>
        
        <view wx:else>
            <text>暂无数据...</text>
        </view>
    </view>
</view>

2.编写样式index.wxss

page{
  background: #f5f5f5;
}
.container {
  display: flex;
  position: relative;
   100%;
  height: 100%;
  background-color: #fff;
  color: #939393;
}
.nav-left{
    flex: 0 0 25%;
    text-align: center;
    background: #f5f5f5;
}
.nav-left .nav-left-items{
  height: 30px;
  line-height: 30px;
  padding: 6px 0;
  border-bottom: 1px solid #dedede;
  font-size: 14px;
}
.nav-left .nav-left-items.active{
    background: #fff;
}
.nav-right{
    padding: 20px 0;
    flex: 1;
    position: absolute;
    top: 0;
    left: 25%;
    bottom: 0;
     75%; 
    height: 100%;
    background: #fff;
}
.wrapper{
    display: flex;
    flex-wrap: wrap;    // 换行显示
}
.nav-right-items{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;   // 设置y轴为主轴
    align-items: center;      // 设置在交叉轴上的对齐方式
     33.3333%
}
.nav-right .nav-right-items image{
   50px;
  height: 30px;
}
.nav-right .nav-right-items text{
  display: block;
  margin-top: 5px;
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;     //  超出显示为...的样式组合
  text-overflow: ellipsis;
}

3. 在index.js中

  /**
   * 页面的初始数据
   */
  data: {
      navLeftItems: [],
      navRightItems: [],
      curNav: 1,
      curIndex: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
        var _this = this;

        wx.request({
            url: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList',
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                _this.setData({
                    navLeftItems: res.data,
                    navRightItems: res.data
                })
                console.log(_this.data.navRightItems)
            }    
        })
  },
  
  // 事件处理函数
  switchRightTab: function(event) {
        let id = event.target.dataset.id;
        let index = event.target.dataset.index

        this.setData({
            curNav: id,
            curIndex: index
        })
  }

4. index.json配置

{
  "navigationBarTitleText": "选项卡"
}