### [微信小程序中怎么做无缝轮播](https://www.prosaas.cn/article/16848)

**Published:** 2020-03-21T10:00:30

**Author:** 5201314

**Excerpt:** 微信小程序中怎么做无缝轮播 在index.js文件中定义topScroll数组以及swiper的各个属性值，其…

![](https://img.php.cn/upload/article/000/000/040/5e75e4ea053c0714.jpg)

**微信小程序中怎么做无缝轮播**    

> 在index.js文件中定义topScroll数组以及swiper的各个属性值，其属性代表什么含义参考开发文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1476197489605

微信小程序中可以使用swiper组件实现轮播效果，添加autoplay属性可以实现自动播放，添加**circular**属性可以实现无缝轮播。

<swiper circular="{{circular}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{topScroll}}" wx:key="item.id">
        <swiper-item>
            <image src="{{item.url}}" class="slide-image"/>
        </swiper-item>
    </block>
</swiper>

推荐学习：小程序开发

以上就是微信小程序中怎么做无缝轮播的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---