WeChatミニプログラムのカルーセル機能-ミニプログラム開発-php.cn

WeChatミニプログラムのカルーセル機能

高洛峰

リリース： 2018-05-28 10:55:15

オリジナル

3243 人が閲覧しました

公式 Web サイトでカルーセルに関連する手順を確認できます。これは WeChat アプレットのカルーセル機能の実装効果を示す例です:

まずレンダリングを見てください:

WeChatミニプログラムのカルーセル機能

JS コード:

var app = getApp();
Page({
    data: {
        imgUrls: [
            &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,
            &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,
            &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
        ],
        indicatorDots: true,
        autoplay: false,
        interval: 5000,
        duration: 1000
    },
    changeIndicatorDots: function(e) {
        this.setData({
            indicatorDots: !this.data.indicatorDots
        })
    },
    changeAutoplay: function(e) {
        this.setData({
            autoplay: !this.data.autoplay
        })
    },
    intervalChange: function(e) {
        this.setData({
            interval: e.detail.value
        })
    },
    durationChange: function(e) {
        this.setData({
            duration: e.detail.value
        })
    },
}）

ログイン後にコピー

dataは設定するデータです。インジケータードットをドットで表示するかどうかを設定し、間隔で切り替えるミリ秒数を設定し、継続時間で切り替えの速度を設定します。すべての写真を繰り返し処理します。これらの値はデータを介して渡され、関数に設定されます。

WXMLコード:

<swiper indicator-dots="{{indicatorDots}}"
        autoplay="true" interval="5000" duration="1000">
    <block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" width="400" height="150"/>
        </swiper-item>
    </block>
</swiper>

ログイン後にコピー

以上がこのカルーセルの処理であり、主なアプリケーションコンポーネントであり、autoplayは自動再生するかどうかを設定し、intervalは何ミリ秒で切り替えるかを設定し、durationは切り替え速度を設定します。すべての写真を繰り返し処理します。

カルーセル効果は、実装が非常に簡単なシンプルな設定で実現できます。

WeChat ミニプログラムのカルーセル機能に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。