首頁 > 微信小程式 > 小程式開發 > 微信小程式中怎麼做無縫輪播

微信小程式中怎麼做無縫輪播

angryTom
發布: 2020-03-21 18:01:06
原創
3099 人瀏覽過

微信小程式中怎麼做無縫輪播

微信小程式中怎麼做無縫輪播    

在index.js檔案中定義topScroll陣列以及swiper的各個屬性值,其屬性代表什麼意義參考開發文件https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1476197489605

微信小程式中可以使用swiper元件實現輪播效果,添加autoplay屬性可以實現自動播放,添加circular屬性可以實現無縫輪播。

1

2

3

4

5

6

7

<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>

登入後複製

推薦學習:小程式開發

#

以上是微信小程式中怎麼做無縫輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板