选项卡，标题可滑动，点击自动滚动

先上代码：
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>
<!--内容 -->

<block wx:for="{{curTexts}}">

<view class="list_tabBox">
<view class="list_tabBox_con">
<view class="img">
<image src='{{item.img}}'></image>
</view>
<view class-="text">
<view><text>{{item.tab}}</text></view>
<view><text>{{item.text}}</text></view>
</view>
</view>
</view>
</block>
wxss:
/选选项卡 /
.tab-scoller {background-color:#ccc;height:70rpx;white-space: nowrap;display: flex;}
/取消移动条/
::-webkit-scrollbar { width: 0; height: 0; color: transparent;}
.tab-view {height:70rpx;text-align: center;display: inline-block;line-height:70rpx;box-sizing: border-box;}
.tab-text {display: block;height:70rpx;padding:0 20rpx;font-size: 25rpx;color: #000;box-sizing: border-box;}
.active {color: #fff;border-bottom:1rpx solid #000;}
.list_tabBox{width:100%;min-height:100rpx;box-sizing:border-box;}
.list_tabBox_con{display: flex;flex-direction:row;padding:20rpx;background-color:#ccc;margin-top:20rpx;}
.list_tabBox_con .img{width:200rpx;height:300rpx;}
.list_tabBox_con .img image{width:100%;height:100%;}
.list_tabBox_con .text{width:460rpx;padding-left:40rpx;}
.list_tabBox_con .text text{font-size:35rpx;}

js:
Page({
data:{
// 选项卡
listTab: [
{
code: “01”,
text: “选项卡1”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab:”标题名”,
text:”这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名”,
text: “这是一段简单的介绍”
},
]
},
{
code: “02”,
text: “选项卡2”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “标题名2”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名2”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名2”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名2”,
text: “这是一段简单的介绍”
},
]
},
{
code: “03”,
text: “选项卡3”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “标题名3”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名3”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名3”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名3”,
text: “这是一段简单的介绍”
},
]
},
{
code: “04”,
text: “选项卡4”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “标题名4”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名4”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名4”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名4”,
text: “这是一段简单的介绍”
},
]
},
{
code: “05”,
text: “选项卡5”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “标题名5”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名5”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名5”,
text: “这是一段简单的介绍”
},
]
},
{
code: “06”,
text: “选项卡6”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “标题名5”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名5”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名5”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名5”,
text: “这是一段简单的介绍”
},
]
},
{
code: “07”,
text: “选项卡7”,
case_list:[
{
img: ‘../../img/1.jpg’,
tab: “标题名”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名”,
text: “这是一段简单的介绍”
},
{
img: ‘../../img/1.jpg’,
tab: “标题名”,
text: “这是一段简单的介绍”
},
]
}
]
,
curIndex: 0,
curTexts:[],
scrollLength: 0,
},
onLoad: function (options) {
this.initData(0);
},
//初始化数据
initData: function (index) {
var that = this;
console.log(index);
that.setData({
curIndex: index,
curTexts: that.data.listTab[index].case_list
})
console.log(that.data.curTexts)
},
//tab点击事件，刷新数据
reflashData: function (event) {
var that = this
var index = event.currentTarget.dataset.index
//移动滚动条
if (index > this.data.curIndex) {
if (that.data.scrollLength <100) { this.setData({ scrollLength: that.data.scrollLength + 40 * (index - that.data.curIndex) }) } } else { if (that.data.scrollLength > 0) {
this.setData({
scrollLength: that.data.scrollLength - 40 * (that.data.curIndex - index)
})
}
}
//移动view位置，改变选中颜色
this.initData(index);
that.setData({ hidden: true })
},

})
//原图

//点击标题五后

标题一自己滚到一边去了