WeChat 미니 프로그램 개발: 아래로 당겨 새로고침, 위로 당겨 더 로드

이 글은 WeChat 미니 프로그램에서 풀다운 새로고침과 풀업을 구현하여 더 많은 것을 로드하는 방법을 기록한 것입니다

먼저 인터페이스를 열어보겠습니다

인터페이스는 대충 이렇습니다. 이 데모에서는 WeChat의 여러 API와 이벤트를 먼저 나열하겠습니다.

1.wx.request(원격 서버에서 데이터 가져오기, $.ajax로 이해 가능)

2. 스크롤 뷰의 두 가지 이벤트

2.1 바인딩scrolltolower(슬라이드 페이지 하단에 도달했을 때)

2.2 바인딩스크롤(페이지가 슬라이드될 때)

2.3 바인드스크롤투퍼(페이지 상단으로 슬라이드될 때)

그럼 살펴볼까요? 코드에 대해 자세히 설명하세요.

index.js

var url = "http://www.imooc.com/course/ajaxlist";var page =0;var page_size = 20;var sort = "last";var is_easy = 0;var lange_id = 0;var pos_id = 0;var unlearn = 0;// 获取数据的方法，具体怎么获取列表数据大家自行发挥var GetList = function(that){
    that.setData({
        hidden:false
    });
    wx.request({
        url:url,
        data:{
            page : page,
            page_size : page_size,
            sort : sort,
            is_easy : is_easy,
            lange_id : lange_id,
            pos_id : pos_id,
            unlearn : unlearn
        },
        success:function(res){            //console.info(that.data.list);
            var list = that.data.list;            for(var i = 0; i <p></p><p><strong><span style="color: #ff0000;">index.wxml</span></strong></p><p> </p><p class="cnblogs_code"></p><pre class="brush:php;toolbar:false"><view>
    <scroll-view>
        <view>
            <image></image>
            <view>
                <text>{{item.name}}</text>
                <text>{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view>
        <loading>
            加载中...        </loading>
    </view></view>

더 많은 WeChat 미니 프로그램 개발을 원하시면 아래로 당겨서 새로고침하고, 위로 당겨서 로드하세요. PHP 중국어 웹사이트!