技術標籤：javascriptcsscss3html5

效果如下：

<view class="barTitle">
      <view class="industryBar">
        <view wx:for="{{industryTypeList}}" wx:key="index" class="industryBarItem">
          <view class="barItemName {{activeIndex==index?'
 
active':''}}" bindtap="clickTabItem" data-index="{{index}}">{{item.name}}</view>
        </view>
      </view>
      <view class="industryLine" style="left:{{lineLeft}}vw">
        <view class="itemLine"></view>
 

      </view>
    </view>

//頁面初始資料
data:{
// 字數字典
    industryTypeList: [{
        id: 1,
        name: "字數隨機",
        nameSize: ''
      },
      {
        id: 2,
        name: "兩個字",
        nameSize: '2'
      },
      {
        id: 3,
        name: "三個字",
        nameSize:
 
 '3'
      },
      {
        id: 4,
        name: "四個字",
        nameSize: '4'
      }
    ],
    lineLeft:0,//滑動條外層容器左間距變數
}
// 點選tab項觸發事件
  clickTabItem(e) {
    // console.log(e)
    let index = e.currentTarget.dataset.index
    this.setData({
      activeIndex: index,//修改啟用狀態tab下標
      lineLeft:index*25,
    })
  },

.barTitle {
  width: 100%;
  height: 97rpx;
  position: sticky;
  top: 0;
  background-color: #fff;
}
.barTitle .industryBar {
  width: 100%;
  display: flex;
  position: relative;
}
.barTitle .industryBar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1rpx solid #E5E5E5;
  scale: (1, 0.5);
  bottom: 0;
  height: 1rpx;
}
.barTitle .industryBar .industryBarItem {
  height: 97rpx;
  width: 25%;
  position: relative;
  display: flex;
  justify-content: center;
}
.barTitle .industryBar .industryBarItem .barItemName {
  line-height: 97rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #333333;
  width: 140rpx;
  text-align: center;
}
.barTitle .industryBar .industryBarItem .active {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #05A4FF;
}
.barTitle .industryLine {
  position: absolute;
  bottom: 0;
  width: 25%;
  height: 5rpx;
  left: 0;
  transition: all 0.2s;
  display: flex;
  justify-content: center;
}
.barTitle .industryLine .itemLine {
  width: 140rpx;
  height: 5rpx;
  background: #05a4ff;
  border-radius: 2rpx;
}