微信小程序实现选项卡
<!---wxml--->
<!-- 选项卡 --> <view class="box"> <view wx:for="{{ info }}" wx:key="index" data-index="{{ index }}" bindtap="click" class="list {{ activeIndex ==index ? 'active' : '' }}" > {{ item }} </view> </view> <view> <!-- 显示内容 --> {{ info[activeIndex] }} </view>
/* wxss*/ .box{ display: flex; } .box .list{ border: 1px solid #ccc; width: 25%; padding: 5px 0px; text-align: center; } .active{ color: red; }
//.....js....
Page({ data: { info: ["首页", '已付款', "代付款", '订单完成'], activeIndex: 0, }, click(e) { // console.log(e) let activeIndex = e.target.dataset.index; // this.data.activeIndex = activeIndex; // 1.activeIndex值可以发生变化,但是页面wxml没有重新渲染 // 2.修改data中的数据,同时渲染更新页面 this.setData({ activeIndex: activeIndex }) // console.log(this.data.activeIndex) } })
实现效果。