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 < res.data.list.length; i++){
                list.push(res.data.list[i]);
            }
            that.setData({
                list : list
            });
            page ++;
            that.setData({
                hidden:true
            });
        }
    });
}
Page({
  data:{
    hidden:true,
    list:[],
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(){    //   这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
      var that = this;
      wx.getSystemInfo({
          success:function(res){
              console.info(res.windowHeight);
              that.setData({
                  scrollHeight:res.windowHeight
              });
          }
      });
  },
  onShow:function(){    //   在页面展示之后先获取一次数据
    var that = this;
    GetList(that);
  },
  bindDownLoad:function(){    //   该方法绑定了页面滑动到底部的事件
      var that = this;
      GetList(that);
  },
  scroll:function(event){    //   该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
     this.setData({
         scrollTop : event.detail.scrollTop
     });
  },
  refresh:function(event){    //   该方法绑定了页面滑动到顶部的事件，然后做上拉刷新
      page = 0;      this.setData({
          list : [],
          scrollTop : 0
      });
      GetList(this)
  }
})

index.wxml

<view class="container">
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
        <view class="item" wx:for="{{list}}">
            <image class="img" src="{{item.pic_url}}"></image>
            <view class="text">
                <text class="title">{{item.name}}</text>
                <text class="description">{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...        </loading>
    </view></view>

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