<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,
})
},