【小程序选项卡】

最新推荐文章于 2024-08-09 21:30:00 发布

TWenYuan

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量109

点赞数

分类专栏：微信小程序文章标签：前端

本文链接：https://blog.csdn.net/TWenYuan/article/details/127843685

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

/.wxml

<view class="wrap">
  <block wx:for="{{tit}}">
  //activeIndex  动态判断下标
    <view class="list {{index == activeIndex ? 'active' : ''}}" bindtap="_changeIndex" data-index="{{index}}">
      {{item}}
    </view>
  </block>
</view>

<view class="con">
    {{con[activeIndex]}}
</view>

/.js

data:{
  tit:['1','2','3'],
        con:['我的待支付','我的待评价','我的售后'],
        activeIndex:0,
},
//点击事件
  _changeIndex(e){
        let index = e.currentTarget.dataset.index;
        this.setData({
            activeIndex: index
        })
    },

/.wxss

.wrap{
    display: flex;
}
.list{
    width: 33%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    border: solid 1rpx;
}
.active{
    color: orange;
    border-bottom-color: orange;
}