WeChat Mini 프로그램 개발 가이드: Carousel 소개

애플리케이션에서 가장 흔한 것은 아마도 캐러셀일 것입니다. 이 글은 캐러셀의 구현에 대해 이야기하고 있으며, 내용 중 일부는 공식 문서에서 가져온 것이며 실제 작동 시 작성자의 몇 가지 문제와 경험을 추가합니다.
이 글은 WeChat 미니 프로그램 공개 베타 버전인 IDE: WeChat Developer Tools 0.10.102800을 기준으로 작성되었습니다.

컴포넌트 스와이프

언제 수직 속성이 설정되지 않았거나 수직="false"가 설정된 경우 표시 지점이 구성 요소 하단에 있고 이미지 회전은 왼쪽에서 오른쪽으로 이루어집니다.

vertical="true"가 설정되면 구성 요소 오른쪽에 있는 표시기가 다음 효과와 함께 이미지 캐러셀이 아래에서 위로 이동합니다.

참고: swiper는 컨테이너 클래스 뷰이지만 다른 노드와 같은 구성 요소만 배치할 수 있으며 자동으로 삭제됩니다.

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>

rrree

아이템 클릭 이벤트

swiper-item에 이벤트를 바인딩하고 데이터를 통해 바인딩합니다. 사용자 정의 태그 고정 데이터. 그런 다음 함수의 이벤트를 통해 가져옵니다.

//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
                })
            }
        })
    }
})

rrree

바인딩된 함수의 이벤트를 통해 해당 데이터를 얻을 수 있으니 참고하세요. 예를 들어 e.currentTarget.dataset.id는 wxml의 data-id

에 해당합니다. 물론 다른 방법도 있습니다. 하이퍼링크로 페이지로 이동하기 위해 각 스와이프 항목 주위에 태그를 래핑하면 이벤트를 바인딩할 필요가 없습니다.

더 많은 WeChat 미니 프로그램 개발 가이드: 캐러셀 관련 기사는 PHP 중국어 웹사이트를 주목하세요!