微信小程式之上拉載入和下拉重新整理
阿新 • • 發佈:2019-01-23
微信小程式,最近自己學習微信小程式的知識,就想實現現在APP 那種列表重新整理,下拉重新整理,上拉載入等功能。
先開看一下介面
1.wx.request (獲取遠端伺服器的資料,可以理解成$.ajax)
2. scroll-view的兩個事件
2.1 bindscrolltolower(滑到頁面底部時)
2.2 bindscroll (頁面滑動時)
2.3 bindscrolltoupper (滑倒頁面頂部時)
然後我們看程式碼,詳細描述。
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:
- <viewclass="container">
- <scroll-viewscroll-top="{{scrollTop}}"scroll-y="true"style="height:{{scrollHeight}}px;"
- class="list"bindscrolltolower="bindDownLoad"bindscroll="scroll"bindscrolltoupper="refresh">
- <viewclass="item"wx:for="{{list}}">
- <imageclass="img"src="{{item.pic_url}}"></image>
- <viewclass="text">
- <textclass="title">{{item.name}}</text>
- <textclass="description">{{item.short_description}}</text>
- </view>
- </view>
- </scroll-view>
- <viewclass="body-view">
- <loadinghidden="{{hidden}}"bindchange="loadingChange">
- 載入中...
- </loading>
- </view>
- </view>