这种页面的布局会经常用到，所以在此做个笔记，之后遇到可以节省很多时间
WXML：
<view class='listTitle_tab'>
<view class='scrollTitle' style='width:{ {Width}}px'>
<view class='listTitle_tab_ltem { {index==0?"on":""}}' data-index="0" bindtap='btnchoose' style='width:{ {WidthI}}px;'>标题一</view>
<view class='listTitle_tab_ltem { {index==1?"on":""}}' data-index="1" bindtap='btnchoose' style='width:{ {WidthI}}px; '>标题二</view>
<view class='listTitle_tab_ltem { {index==2?"on":""}}' data-index="2" bindtap='btnchoose' style='width:{ {WidthI}}px; '>标题三</view>
<view class='listTitle_tab_ltem { {index==3?"on":""}}' data-index="3" bindtap='btnchoose' style='width:{ {WidthI}}px;'>标题四</view>
<view class='listTitle_tab_ltem { {index==4?"on":""}}' data-index="4" bindtap='btnchoose' style='width:{ {WidthI}}px;'>标题五</view>
<view class='listTitle_tab_ltem { {index==5?"on":""}}' data-index="5" bindtap='btnchoose' style='width:{ {WidthI}}px;'>标题六</view>
<view class='listTitle_tab_ltem { {index==6?"on":""}}' data-index="6" bindtap='btnchoose' style='width:{ {WidthI}}px; '>标题七</view>
<view class='listTitle_tab_ltem { {index==7?"on":""}}' data-index="7" bindtap='btnchoose' style='width:{ {WidthI}}px;'>标题八</view>
</view>
</view>
<swiper class='swiper_content' current="{ {index}}" bindchange='swiperContent'>
<swiper-item>我是内容一</swiper-item>
<swiper-item>我是内容二</swiper-item>
<swiper-item>我是内容三</swiper-item>
<swiper-item>我是内容四</swiper-item>
<swiper-item>我是内容五</swiper-item>
<swiper-item>我是内容六</swiper-item>
<swiper-item>我是内容七</swiper-item>
<swiper-item>我是内容八</swiper-item>
</swiper>
CSS：
.listTitle_tab{height: 100rpx;line-height: 100rpx;border-bottom: 1px solid #ccc;background: #e5e5e5;overflow-x: scroll;}
::-webkit-scrollbar{display: none}
.scrollTitle{height: 100rpx;line-height: 100rpx;transition: .3s linear;}
.listTitle_tab_ltem{float: left;text-align: center;position: relative;}
.listTitle_tab_ltem:nth-of-type(2)::before{content: "";position: absolute;left: 0;top: 30rpx;width: 1px;height: 40rpx;background: #ccc}
.listTitle_tab_ltem:nth-of-type(2)::after{content: "";position: absolute;right: 0;top: 30rpx;width: 1px;height: 40rpx;background: #ccc}
.on{color: #ff0000;}
JS:
var indexNum;
var widthAll;
Page({
data: {
index: 0,
},
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
console.log(res)
that.setData({
WidthI: res.windowWidth / 3,
Width: (res.windowWidth / 3) * 8
})
widthAll = res.windowWidth / 3
},
})
},
swiperContent: function (res) {
var that = this;
that.setData({
index: res.detail.current
})
},
btnchoose: function (e) {
var that = this;
indexNum = e.currentTarget.dataset.index;
console.log(indexNum)
var currentIndex = that.data.index //获取swiper显示的模块的index
if (indexNum == currentIndex) {
return false;
} else {
that.setData({
index: indexNum
})
};
},
})