wxml:
<view class="item">
<block wx:for="{{ tab }}">
<view class='{{ item.style }}' bindtap="click" data-index="{{ index }}">
{{ item.title }}
</view>
</block>
</view>
<swiper bindchange="tab" current="{{ current }}">
<swiper-item>
<view>商品介绍</view>
</swiper-item>
<swiper-item>
<view>商品详情</view>
</swiper-item>
<swiper-item>
<view>商品售后</view>
</swiper-item>
</swiper>
Wxss:
.item{
display: flex;
justify-content:space-around;
}
.color{
color:red;
}
JS:
data: {
tab:[
{
title:"商品详情",
style:"color"
},
{
title:"商品相册",
style:""
},
{
title:"商品简介",
style:""
}
],
current:0,
image:[],
articleHtml : "<img src='/img/8482661.jpg'></img>",
desc :"<view>111</view>"
},
click(evt) {
let i = evt.currentTarget.dataset.index;
let tab = this.data.tab;
tab.map((item,index)=>{
if (index == i) {
item.style = "color"
} else {
item.style = ""
}
})
this.setData({
tab,
current:i
})
},
tab(evt) {
let i = evt.detail.current;
let tab = this.data.tab;
tab.map((item,index)=>{
if (index == i) {
item.style = "color"
} else {
item.style = ""
}
})
this.setData({
tab,
})
}
时间选择器picker
https://blog.csdn.net/lm1022/article/details/80109706
