为什么轮播图手动点击没反应?
使用swiper实现轮播图,但是不能手动点击滑动,模拟器跟真机都不能手动切换图片,怎么解决?没有报错,能获取到点击事件,图片路径也能改变,就是页面没反应,这是什么问题?
[图片] <swiper id="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{images}}" wx:key="*this">
<swiper-item style="width: 100%;display: flex;justify-content: center;">
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<view class="prev-button" bindtap="prevSlide">上一个</view>
<!-- 下一个按钮 -->
<view class="next-button" bindtap="nextSlide">下一个</view>
// home.js
Page({
switchTab: function (event) {
const name = event.currentTarget.dataset.name;
wx.switchTab({
url: `/pages/${name}/${name}`,
});
},
onLoad: function () {
// 在页面加载时,动态设置图片路径
this.setData({
imageUrl: '../images/未标题-1.jpg'
});
wx.showShareMenu({
withShareTicket: true,
// 其他参数根据需要设置
});
},
onShareAppMessage: function () {
return {
title: '自定义分享标题',
path: '/pages/index',
imageUrl: this.data.images[this.data.current], // 动态设置分享的图片
// 根据需要设置其他参数
};
},
data: {
indicatorDots: true, // 是否显示指示点
autoplay: true, // 是否自动播放
interval: 5000, // 自动切换的时间间隔
duration: 1000, // 滑动动画时长
circular: true, // 是否启用循环播放
current: 0,
images: [
'../images/未标题-1.jpg',
'../images/1713249908529_01.jpg',
'../images/1713249908529_04.jpg'
], // 轮播图片数组
imageUrl: '../images/1713249908529_01.jpg'
},
prevSlide: function () {
console.log("Previous slide clicked");
if (this.data.current > 0) {
this.setData({
current: this.data.current - 1
});
console.log(this.data.current);
console.log("Current image:", this.data.images[this.data.current]);
}
},
nextSlide: function () {
console.log("Next slide clicked");
if (this.data.current < this.data.images.length - 1) {
this.setData({
current: this.data.current + 1
});
console.log(this.data.current);
console.log("Current image:", this.data.images[this.data.current]);
}
}
});