WeChat ミニ プログラム開発ガイド: カルーセルについて

このアプリケーションで最も一般的なのはおそらくカルーセルです。この記事はカルーセルの実装について説明しており、内容の一部は公式ドキュメントから引用しており、実際の運用におけるいくつかの問題や経験を追加しています。
この記事は、WeChat ミニ プログラムのパブリック ベータ版、IDE: WeChat Developer Tools 0.10.102800 に基づいています

コンポーネント スワイパー

vertical 属性が設定されていない場合、またはvertical="false" の場合、インジケーターポイントはコンポーネントの下部にあり、画像カルーセルです。左から右に、効果は次のようになります:

vertical="true" が設定されている場合、インジケーターポイントはコンポーネントの右側にあります。画像カルーセルは下から上にあり、効果は次のとおりです:

注: スワイパーはコンテナーのクラスビューですが、そこに配置できるのはコンポーネントのみです。他のノードが配置されている場合、それらは自動的に削除されます。 。

swiper-item

コードは次のとおりです:

<!--main.wxml-->
<view>
    <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
        <block wx:for="{{images}}">
            <swiper-item>
                <image src="{{item.picurl}}" class="slide-image"/>
            </swiper-item>
        </block>
    </swiper>
</view>

//main.js
//获取应用实例
var app = getApp()
Page({
    data: {
        indicatorDots: true,
        vertical: true,
        autoplay: true,
        interval: 3000,
        duration: 1000,
        loadingHidden: false  // loading
    },

    //事件处理函数
    swiperchange: function(e) {
        // 此处写 轮播 改变时会触发的 change 事件
    },

    onLoad: function() {
        console.log('onLoad')
        var that = this

        //sliderList
        wx.request({
            url: 'http://huanqiuxiaozhen.com/wemall/slider/list',
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                that.setData({
                    images: res.data
                })
            }
        })
    }
})

item click events

swiper-item でイベントをバインドし、データ カスタム タグを介してデータをバインドします。次に、関数内のイベントを通じてそれを取得します。

<!--main.wxml-->
<view>
    <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
        <block wx:for="{{images}}">
            <swiper-item bindtap="itemclick" data-id="{{item.id}}" data-name="{{item.name}}">
                <image src="{{item.picurl}}" class="slide-image"/>
            </swiper-item>
        </block>
    </swiper>
</view>

// 轮播item点击事件
itemclick: function(e) {
    wx.showToast({
        title: e.currentTarget.dataset.id + "",
        icon: 'success',
        duration: 2000
    })
},

対応するデータはバインドされた関数のイベントを通じて取得できることに注意してください。例: e.currentTarget.dataset.id は、wxml の data-id に対応します

もちろん、別の方法もあります。各スワイパー項目を a タグで囲み、ハイパーリンクとしてページにジャンプすることで、イベントをバインドする必要はありません。

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