滑动的顶部tab选项卡，简易table表格，swiper图片显示不完整，网页选项卡脚本
主要是在scroll-view设置scroll-x=“true”,然后在设置scroll-left（横向滚动条位置）为一定的数值就可以了
不废话直接进入主题
test.wxml
<scroll-view class="tab-scoller " scroll-x="true" scroll-left="{{scrollLength}}">
<block wx:for="{{listTab}}" wx:key="code">
<view class="tab-view" data-index="{{index}}" id="{{item.code}}" bindtap="reflashData">
<text class="tab-text active" wx:if="{{index == curIndex}}">{{item.text}}</text>
<text class="tab-text" wx:else>{{item.text}}</text>
</view>
</block>
</scroll-view>
<view>
<text>{{curText}}</text>
</view>
test.wxss
.tab-scoller {
background: linear-gradient(to bottom, #2262fc, rgba(57, 134, 222, 0.84));
height: 3rem;
white-space: nowrap;
display: flex;
}
/*取消移动条*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.active {
color: #000 !important;
background-color: #fff;
}
.tab-view {
text-align: center;
color: #fff;
font-size: 1rem;
height: 1.2rem;
width: 4rem;
margin-top: 1rem;
border-right: 1px solid #fff;
display: inline-block;
line-height: 1.2rem;
}
.tab-text {
display: block;
bottom: 0.4rem;
position: relative;
height: 1.5rem;
margin: 0 5%;
border-radius: 0.5rem;
padding: 0.3rem 0.2rem 0;
color: #fff;
}
test.js
// pages/more/test.js
Page({
data: {
listTab:[
{"code":"01","text":"tab1"},
{"code":"02","text":"tab2"},
{"code":"03","text":"tab3"},
{"code":"04","text":"tab4"},
{"code":"05","text":"tab5"},
{"code":"06","text":"tab6"},
{"code":"07","text":"tab7"}
],
curIndex:0,
curText:null,
scrollLength: 0
},
onLoad: function () {
console.log('onLoad')
this.initData(0)
},
//初始化数据
initData:function(index){
var that = this
this.setData({
curIndex:index,
curText:that.data.listTab[index].text,
})
},
//tab点击事件刷新数据
reflashData:function(event){
var that = this
var index = event.currentTarget.dataset.index
//移动滚动条,//200和35是我估算的
if(index > this.data.curIndex ){
if(that.data.scrollLength < 200){
this.setData({
scrollLength: that.data.scrollLength + 35 * (index - that.data.curIndex)
})
}
}else{
if(that.data.scrollLength > 0){
this.setData({
scrollLength: that.data.scrollLength - 35 * (that.data.curIndex - index)
})
}
}
//移动view位置网站移动化刷新数据
reflashData:function(event){
var that = this
var index = event.currentTarget.dataset.index
//移动滚动条,//200和35是我估算的
if(index > this.data.curIndex ){
if(that.data.scrollLength < 200){
this.setData({
scrollLength: that.data.scrollLength + 35 * (index - that.data.curIndex)
})
}
}else{
if(that.data.scrollLength > 0){
this.setData({
scrollLength: that.data.scrollLength - 35 * (that.data.curIndex - index)
})
}
}
//移动view位置改变选中颜色