小程序scroll-view滑动标签

  <scroll-view scroll-x="true" class="tag_scroll">
    <view class="label_nav" style="width:{{tagWidth}}">
      <view wx:for="{{tabitem}}" wx:key="index" class="item-text {{tabIndex===index?'activity':''}}" bindtap="setTab" data-index="{{index}}" data-id="{{item.id}}">{{item.title}}</view>
    </view>
  </scroll-view>

.tag_scroll {
  width: 750rpx;
  height: 90rpx;
  display: block;
}
.label_nav {
  width: 750rpx;
  height: 88rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #333;
}
.item-text {
  display: inline-block;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0 26rpx;
  height: 88rpx;
  font-size: 30rpx;
  line-height: 88rpx;
}

.item-text.activity {
  border-bottom: 2px solid #0fc191;
  color: #0fc191;
}

    tabitem: [{
        id: 1,
        title: "橘子"
      },
      {
        id: 2,
        title: "菠萝"
      },
      {
        id: 3,
        title: "香蕉"
      },
      {
        id: 4,
        title: "西瓜"
      },
      {
        id: 5,
        title: "火龙果"
      },
      {
        id: 6,
        title: "水蜜桃"
      },
      {
        id: 7,
        title: "水蜜桃"
      },
      {
        id: 8,
        title: "水蜜桃"
      }
    ],
    tabIndex: 0


  setTab: function(e) {
    console.log(e.currentTarget.dataset.id)
    this.setData({
      tabIndex: e.currentTarget.dataset.index,
    })
  },

来源：CSDN

作者：hql丶1024

链接：https://blog.csdn.net/hql1024/article/details/104493161