[微信小程序] Swiper无缝轮播完美衔接(图片最后一张和第一张可以衔接滑动)

照文档上的去做实现的swiper轮播图,其效果是 每次图片轮播到最后一张时 页面会快速的倒退滚动到第一张 然后再轮播 这样效果实在太差。
解决方法:是加入circular属性即可实现无缝轮播。

<swiper class="swiper-item" circular="true">
   <swiper-item>
   <image src=""></image>
   </swiper-item>
</swiper>

只需要在swiper组件中,加上 circular=“true” 就可以啦 !



参考:

微信小程序Swiper无缝轮播完美衔接(图片最后一张和第一张可以衔接滑动)

官方文档 微信小程序—swiper

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
要实现微信小程序衔接滑动自动轮播,可以使用swiper组件和setInterval函数。 1. 在wxml文件中添加swiper组件,并设置属性: ``` <swiper autoplay="{{true}}" interval="{{3000}}" duration="{{500}}" circular="{{true}}" indicator-dots="{{true}}"> <swiper-item> <!-- 第一张轮播图 --> </swiper-item> <swiper-item> <!-- 第二张轮播图 --> </swiper-item> <swiper-item> <!-- 第三张轮播图 --> </swiper-item> ... </swiper> ``` 其中,autoplay表示是否自动播放,interval表示自动播放时间间隔,duration表示动画时长,circular表示是否采用衔接滑动方式,indicator-dots表示是否显示指示点。 2. 在js文件中添加setInterval函数,用于自动切换轮播图: ``` Page({ data: { currentSwiper: 0, swiperList: [ // 轮播图列表 ] }, onLoad: function () { // 开始轮播 this.startSwiper(); }, startSwiper: function () { var that = this; this.timer = setInterval(function () { var current = that.data.currentSwiper; var swiperList = that.data.swiperList; var len = swiperList.length; current = current < len - 1 ? current + 1 : 0; that.setData({ currentSwiper: current }); }, 3000); }, onUnload: function () { // 停止轮播 clearInterval(this.timer); } }) ``` 其中,currentSwiper表示当前轮播图的索引,swiperList表示轮播图列表。在startSwiper函数中,通过setInterval函数每隔一段时间切换轮播图,并更新currentSwiper的值。在onUnload函数中,清除setInterval函数,停止轮播。 这样,就实现了微信小程序衔接滑动自动轮播效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值