小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在微信小程序中弄了一个轮播图,现在想制作3个按钮,点击一个按钮轮播图的图片就会换一种类型,该怎么实现呢
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
swiper current属性 当点击按钮的时候改变current的值就可以改变对应的轮播图 不知道你要问的是不是这个意思?
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
swiperCurrent: e.currentTarget.id
})
},
// saveButtonClick: function (e) {
// var arr = this.data.arr; //声明的数组
// var index = e.currentTarget.dataset.index; //当前数组的索引下标
// if (arr[index].status == 1) { //如果当前数组下标的状态为true
// arr[index].status = 2; //将false赋给当前数组的下标
// } else { //反之
// arr[index].status = 1;
// }
// this.setData({
// arr: arr
// })
// },
<view class="banner-swiper">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"current='{{swiperCurrent}}'
indicator-color="{{beforeColor}}"indicator-active-color="{{afterColor}}"circular='{{circular}}'
previous-margin="{{previousmargin}}"next-margin="{{nextmargin}}"bindchange="swiperChange">
<block wx:for="{{arr}}" wx:key="*">
<swiper-item>
<image src="{{item.images}}" class="slide-image{{index == swiperCurrent ? ' active' : ''}}"
bindchange="chuangEvent" id="{{index}}"></image>
<!-- <image src="{{item.images}}" wx:if="{{item.status==1}}" data-index="{{index}}" bindtap="saveButtonClick"></image>
<image src="{{item.images}}" wx:if="{{item.status==2}}" data-index="{{index}}" bindtap="shareButtonClick"></image> -->
</swiper-item>
</block>
</swiper>
<view class="bottom-items-compress">
<button bindtap='saveButtonClick' class='history-button'>样式一</button>
<button bindtap='shareButtonClick'
class='photo-button'>样式二</button>
</view>
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
点击按钮的时候改变数组就行了啊
swiperCurrent: e.currentTarget.id
})
},
// saveButtonClick: function (e) {
// var arr = this.data.arr; //声明的数组
// var index = e.currentTarget.dataset.index; //当前数组的索引下标
// if (arr[index].status == 1) { //如果当前数组下标的状态为true
// arr[index].status = 2; //将false赋给当前数组的下标
// } else { //反之
// arr[index].status = 1;
// }
// this.setData({
// arr: arr
// })
// },
})
<view class="banner-swiper">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"current='{{swiperCurrent}}'
indicator-color="{{beforeColor}}"indicator-active-color="{{afterColor}}"circular='{{circular}}'
previous-margin="{{previousmargin}}"next-margin="{{nextmargin}}"bindchange="swiperChange">
<block wx:for="{{arr}}" wx:key="*">
<swiper-item>
<image src="{{item.images}}" class="slide-image{{index == swiperCurrent ? ' active' : ''}}"
bindchange="chuangEvent" id="{{index}}"></image>
<!-- <image src="{{item.images}}" wx:if="{{item.status==1}}" data-index="{{index}}" bindtap="saveButtonClick"></image>
<image src="{{item.images}}" wx:if="{{item.status==2}}" data-index="{{index}}" bindtap="shareButtonClick"></image> -->
</swiper-item>
</block>
</swiper>
<view class="bottom-items-compress">
<button bindtap='saveButtonClick' class='history-button'>样式一</button>
<button bindtap='shareButtonClick'
class='photo-button'>样式二</button>
</view>
</view>