|
一：会滑动的顶部tab选项卡
主要是在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 style="width:100%;heigth:100%;">
-
<text style="position:absolute;top:50%;left:40%; font-size:1.5rem">{{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位置，改变选中颜色
-
this.initData(index)
-
},
-
})
|
