微信小程序——选项卡demo

1.编写布局index.wxml中：

 1 <!--index.wxml-->
 2 <view class="container">
 3     <view class="nav-left">
 4          <block wx:for="{{navLeftItems}}">
 5             <view class="nav-left-items {{curNav == item.id ? 'active' : ''}}" 
 6                   bindtap="switchRightTab" data-id="{{item.id}}" data-index="{{index}}">
 7                 {{item.tree.desc}}
 8             </view>
 9         </block> 
10     </view>
11     
12     <view class="nav-right">
13         <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}" class="wrapper">
14             <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
15                 <view class="nav-right-items">
16                     <view>
17                         <block wx:if="{{item.tree.logo}}">
18                             <image src="{{item.tree.logo}}"></image>
19                         </block>
20                         <block wx:else>
21                             <image src="http://temp.im/50x30"></image>
22                         </block>
23                     </view>
24                     <view wx:if="{{item.tree.desc}}">
25                         <text>{{item.tree.desc}}</text>
26                     </view>
27                     <view wx:else>
28                         <text>{{item.tree.desc2}}</text>
29                     </view>
30                 </view>
31             </block>
32         </view>
33         
34         <view wx:else>
35             <text>暂无数据...</text>
36         </view>
37     </view>
38 </view>

2.编写样式index.wxss

 1 page{
 2   background: #f5f5f5;
 3 }
 4 .container {
 5   display: flex;
 6   position: relative;
 7    100%;
 8   height: 100%;
 9   background-color: #fff;
10   color: #939393;
11 }
12 .nav-left{
13     flex: 0 0 25%;
14     text-align: center;
15     background: #f5f5f5;
16 }
17 .nav-left .nav-left-items{
18   height: 30px;
19   line-height: 30px;
20   padding: 6px 0;
21   border-bottom: 1px solid #dedede;
22   font-size: 14px;
23 }
24 .nav-left .nav-left-items.active{
25     background: #fff;
26 }
27 .nav-right{
28     padding: 20px 0;
29     flex: 1;
30     position: absolute;
31     top: 0;
32     left: 25%;
33     bottom: 0;
34      75%; 
35     height: 100%;
36     background: #fff;
37 }
38 .wrapper{
39     display: flex;
40     flex-wrap: wrap;    // 换行显示
41 }
42 .nav-right-items{
43     margin-bottom: 20px;
44     display: flex;
45     flex-direction: column;   // 设置y轴为主轴
46     align-items: center;      // 设置在交叉轴上的对齐方式
47      33.3333%
48 }
49 .nav-right .nav-right-items image{
50    50px;
51   height: 30px;
52 }
53 .nav-right .nav-right-items text{
54   display: block;
55   margin-top: 5px;
56   font-size: 10px;
57   overflow: hidden;
58   white-space: nowrap;     //  超出显示为...的样式组合
59   text-overflow: ellipsis;
60 }

3. 在index.js中

 1   /**
 2    * 页面的初始数据
 3    */
 4   data: {
 5       navLeftItems: [],
 6       navRightItems: [],
 7       curNav: 1,
 8       curIndex: 0
 9   },
10 
11   /**
12    * 生命周期函数--监听页面加载
13    */
14   onLoad: function (options) {
15         var _this = this;
16 
17         wx.request({
18             url: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList',
19             method: 'GET',
20             data: {},
21             header: {
22                 'Accept': 'application/json'
23             },
24             success: function(res) {
25                 _this.setData({
26                     navLeftItems: res.data,
27                     navRightItems: res.data
28                 })
29                 console.log(_this.data.navRightItems)
30             }    
31         })
32   },
33   
34   // 事件处理函数
35   switchRightTab: function(event) {
36         let id = event.target.dataset.id;
37         let index = event.target.dataset.index
38 
39         this.setData({
40             curNav: id,
41             curIndex: index
42         })
43   }

4. index.json配置

1 {
2   "navigationBarTitleText": "选项卡"
3 }