收藏
回答

为什么轮播图手动点击没反应?

使用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]);
    }
  }



});
回答关注问题邀请回答
收藏

1 个回答

  • 今天也很好
    今天也很好
    04-28

    并没有看到你的current 有赋值在 swiper 这个组件中

    04-28
    有用
    回复
登录 后发表内容