<view class='nav-scroll'>
                <scroll-view scroll-x="true"  class="navList" scroll-with-animation scroll-left="{{scrollLeft}}"  >
					<view 
                    wx:for="{{navList}}" 
                    wx:key="{{index}}" 
                    bindtap="tabSelect" 
                    wx:for-item="item"
                    data-id="{{index}}"
                    data-livesortid="{{item.livesortid}}"
                    class="make-year-col {{index==TabCur?'active':''}}">
                    <text>{{item.sort_week}}</text><text>{{item.sort_time}}</text>
                    </view>
                </scroll-view>
                </view>

样式自行修改


.navList{
  width: 100%;
  height: 90rpx;
  white-space: nowrap;
  overflow: hidden;
}
.navList view{
  position: relative;
  display: inline-block;
  height: 90rpx;
  line-height: 40rpx;
  color: #333;
  margin:0 40rpx;
  z-index: 999;
  font-size: 26rpx;
}
.navList .active{
  font-size: 28rpx;
  color: #00af66;
}
.navList .active:after{
  display: block;
  width: 100%;
  height: 3rpx;
  background-color: #00af66;
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
}

js部分

navList: [
      {
        id: "1",
        sort_week: "周五",
        sort_time: "01-28"
      }, {
        id: "2",
        sort_week: "周六",
        sort_time: "01-28"
      }, {
        id: "3",
        sort_week: "周日",
        sort_time: "01-28"
      }, {
        id: "1",
        sort_week: "周一",
        sort_time: "01-28"
      }, {
        id: "2",
        sort_week: "周二",
        sort_time: "01-28"
      }, {
        id: "3",
        sort_week: "周三",
        sort_time: "01-28"
      }, {
        id: "1",
        sort_week: "周四",
        sort_time: "01-28"
      }, {
        id: "2",
        sort_week: "周五",
        sort_time: "01-28"
      }, {
        id: "3",
        sort_week: "周六",
        sort_time: "01-28"
      }
    ],
    scrollLeft: 0,
    TabCur: 0,

tabSelect(e) {
    // console.log(e)
    //TabCur 第几个tab 给添加样式
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id - 1) * 60,
    })
  }, 

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注