代码如下:
wxml
<view class="tab">
<text class="image-text {{select1?'yes':'no'}}" bindtap="select1">图文详情</text>
<text class="parameter {{select2? 'yes':'no'}}" bindtap="select2">产品参数</text>
</view>
<view class="{{select1?'show':'hidden'}}">
<image src="../../assets/images/max1.jpg"></image>
<image src="../../assets/images/max3.jpg"></image>
<image src="../../assets/images/max2.jpg"></image>
</view>
<view class="{{select2? 'show':'hidden'}}">
<image src="../../assets/images/max2.jpg"></image>
<image src="../../assets/images/max1.jpg"></image>
<image src="../../assets/images/max3.jpg"></image>
</view>
js
const App = getApp()
Page({
data: {
imgUrls: [
'../../assets/images/max1.jpg',
'../../assets/images/max2.jpg',
'../../assets/images/max3.jpg'
],
indicatorDots: true,
autoplay: true,
circular:true,
interval: 5000,
duration: 1000,
select1:true,
select2:false
},
select1:function(e){
this.setData({
select1: true,
select2: false
})
},
select2: function (e) {
this.setData({
select1: false,
select2: true
})
}
})
wxss
.show{display: block;padding-bottom:42px;}
.hidden{display: none;padding-bottom:42px;}
.yes{color:#f60;}
.no{color:#666;}
友情提示:小程序中可直接在标签中实现隐藏,反之显示。这个是刚开始写的习惯用display了,没有改过来。