先上代碼：
wxml：
<!--選項(xiàng)卡 -->
<!--頭部 -->

<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>
<!--內(nèi)容 -->

<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:
/選選項(xiàng)卡 /
.tab-scoller {background-color:#ccc;height:70rpx;white-space: nowrap;display: flex;}
/取消移動(dòng)條/
::-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:{
// 選項(xiàng)卡
listTab: [
{
code: “01”,
text: “選項(xiàng)卡1”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab:”標(biāo)題名”,
text:”這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名”,
text: “這是一段簡(jiǎn)單的介紹”
},
]
},
{
code: “02”,
text: “選項(xiàng)卡2”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名2”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名2”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名2”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名2”,
text: “這是一段簡(jiǎn)單的介紹”
},
]
},
{
code: “03”,
text: “選項(xiàng)卡3”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名3”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名3”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名3”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名3”,
text: “這是一段簡(jiǎn)單的介紹”
},
]
},
{
code: “04”,
text: “選項(xiàng)卡4”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名4”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名4”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名4”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名4”,
text: “這是一段簡(jiǎn)單的介紹”
},
]
},
{
code: “05”,
text: “選項(xiàng)卡5”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名5”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名5”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名5”,
text: “這是一段簡(jiǎn)單的介紹”
},
]
},
{
code: “06”,
text: “選項(xiàng)卡6”,
case_list: [
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名5”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名5”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名5”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名5”,
text: “這是一段簡(jiǎn)單的介紹”
},
]
},
{
code: “07”,
text: “選項(xiàng)卡7”,
case_list:[
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名”,
text: “這是一段簡(jiǎn)單的介紹”
},
{
img: ‘../../img/1.jpg’,
tab: “標(biāo)題名”,
text: “這是一段簡(jiǎn)單的介紹”
},
]
}
]
,
curIndex: 0,
curTexts:[],
scrollLength: 0,
},
onLoad: function (options) {
this.initData(0);
},
//初始化數(shù)據(jù)
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點(diǎn)擊事件，刷新數(shù)據(jù)
reflashData: function (event) {
var that = this
var index = event.currentTarget.dataset.index
//移動(dòng)滾動(dòng)條
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)
})
}
}
//移動(dòng)view位置，改變選中顏色
this.initData(index);
that.setData({ hidden: true })
},

})
//原圖

//點(diǎn)擊標(biāo)題五后

標(biāo)題一自己滾到一邊去了