微信小程序——选项卡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 width: 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 width: 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 width: 33.3333% 48 } 49 .nav-right .nav-right-items image{ 50 width: 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 }
