WXML:
<scroll-view class="scroll-view_H" scroll-x style="width: 100%">
<block wx:for="{{menu}}" wx:key="menu">
<!-- 加了data-前缀会在currentTarget的dataset中找到index属性(可以不叫index) -->
<view class="scroll-view-item_H {{currentTab==index? 'tabActive' : ''}}" ontap="changeCurrentTab" data-index="{{index}}">{{item}}</view>
</block>
</scroll-view>
<view id="tabWrap">
<view class="bg-red {{currentTab==0? 'show' : 'hidden'}}">1111111</view>
<view class="bg-yellow {{currentTab==1? 'show' : 'hidden'}}">22222</view>
<view class="bg-green {{currentTab==2? 'show' : 'hidden'}}">33333</view>
<view class="bg-pink {{currentTab==3? 'show' : 'hidden'}}">44444</view>
<view class="bg-orange {{currentTab==4? 'show' : 'hidden'}}">55555</view>
<view class="bg-blue {{currentTab==5? 'show' : 'hidden'}}">66666</view>
<view class="bg-blue {{currentTab==5? 'show' : 'hidden'}}">66666</view>
</view>
JS:
Page({
/**
* 页面的初始数据
*/
data: {
currentTab:0,
menu:[
'111',
'222',
'333',
'444',
'555',
'666'
]
},
changeCurrentTab(a){
console.log(a.currentTarget.dataset.index);
this.setData({
currentTab : a.currentTarget.dataset.index
})
}
})
setData({...},[callback])将数据从逻辑层发送到视图层(异步),同时也会改变对应的 this.data.XX 的值(同步)。
data中放的数据在页面初次渲染的时候使用, 不能直接通过this.data.xxx修改值后动态地渲染到页面,下面这样写虽然能改变currentTab的值,但是不会重新渲染到页面上!!!而且用setData()里面的变量可以先不在data中定义,我上面是为了给它赋一个初值为0,让刚进来默认第一个就是选中状态才定义的,但是用this.data必须先定义。
changeCurrentTab(a){
console.log(a.currentTarget.dataset.index);
this.data.currentTab = a.currentTarget.dataset.index;
},
WXSS:
.scroll-view_H{
white-space: nowrap;
margin-top: 30rpx;
}
.scroll-view-item_H{
width: 150rpx;
display: inline-block;
text-align: center;
}
#tabWrap{
width: 750rpx;
margin-top: 20rpx;
position: relative;
}
#tabWrap view{
width:750rpx;
height: 500rpx;
position: absolute;
top: 0;
left: 0;
}
.bg-red{
background: #ff0000;
}
.bg-green{
background: #00ff00;
}
.bg-yellow{
background: #ffff00;
}
.bg-blue{
background: #0000ff;
}
.bg-pink{
background: #ff80c2;
}
.bg-orange{
background: #fd9d21;
}
.tabActive{
color:#258c47;
}
.show{
display: block;
}
.hidden{
display: none;
}