微信小程序下拉刷新和上拉加載

1.上拉加載和下拉刷新

 

Wxml文件

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
    <block wx:for="{{goodsList}}" wx:key="item" >
            <view>
                <image src="{{item.goods_img}}" alt=""></image>
            </view>
            <view>{{item.name}}</view>
            <view><text>￥<text>{{item.price}}</text></text><text>￥{{item.oldprice}}</text></view>
   </block>
</scroll-view>

 

根據官方文檔得知，scroll-view就是裏面內容有各類滑動觸發事件的DIV容器，好比滾動條滾動、觸底、觸頂着三個事件。

其中的三個屬性  scroll-top：設置滾動條的位置

，scroll-y：是否容許豎向滑動，height:是組件的高度

Bindscrolltolower是綁定觸底觸發的事件

Bindscroll  是滾動觸發的時間

Bindscrolltoupper  觸頂觸發的事件,因爲是觸頂觸發事件，因此不合適用來當作下拉刷新

通常來講  對於組件的屬性，都是經過JS來動態控制的。

js

//獲取應用實例
var app = getApp()
//首頁上拉加載功能函數
var page = 0;
var url = 'https:www.shop.com/home/index/index

';
var GetList = function(that){
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });
}
Page({
    data: {
        goodsList:[],
        scrollTop : 0,
        scrollHeight:0,
    },
    //下拉刷新
    onPullDownRefresh:function(){
        this.onLoad()
    },
    onLoad: function () {
         var that = this;
            wx.getSystemInfo({
                success:function(res){
                    that.setData({
                        scrollHeight:res.windowHeight
                    });
                }
            });
        //首頁商品
        wx.request({
          url: 'https:www.shop.com/home/product/search',
          data: {},
          method: 'GET',
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })

},

    //   該方法綁定了頁面滑動到底部的事件
    bindDownLoad:function(){
        var that = this;
        GetList(that);
    },
    //   該方法綁定了頁面滾動時的事件
    scroll:function(event){
        this.setData({
            scrollTop : event.detail.scrollTop
        });
    },
})

 

當初次加載頁面的時候，執行onLoad函數，

onLoad: function () {
    var that = this;
    wx.getSystemInfo({
        success:function(res){
            that.setData({
                scrollHeight:res.windowHeight
            });
        }
    });

    //首頁商品
        wx.request({
          url: 'https:www.shop.com/home/product/search',
          data: {},
          method: 'GET',
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })
}

這裏的onLoad有兩個功能

1、獲取設備接口用戶手機屏幕高度  

2、向服務器發送請求，獲取數據

其中，wx.getSystemInfo接口能夠獲取到手機型號、設備像素比、窗口寬度和高度、設備語言、操做系統版本號和客戶端平臺，最經常使用的就是獲取設備窗口的寬度和高度。

Wx.request()是發送請求，爲了保持良好習慣，須要把請求的數據（GET、POST）都要放在data{}中

小程序封裝了一個下拉刷新的API，onPullDownRefresh監聽下拉事件，因此

onPullDownRefresh:function(){
    this.onLoad()
},

當下拉事件觸發的時候，從新執行onLoad（）就能夠實現刷新效果了

上拉加載

var page = 0;
var url = app.globalData.domain+'/index.php';
var GetList = function(that){
  that.setData({
      hidden : false
  });
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });  
}
//   該方法綁定了頁面滑動到底部的事件
bindDownLoad:function(){
    var that = this;
    GetList(that);
},
//   該方法綁定了頁面滾動時的事件
scroll:function(event){
    this.setData({
        scrollTop : event.detail.scrollTop
    });
},

bindDownLoad:每次觸底都會觸發GetList，去獲取數據

Scroll:每次滾動的時候，都從新設置滾動條的位置

重點是看這個函數，我也是第一次用到調用函數來處理

var page = 0; 設置當前所請求的頁數，這裏我請求的方式相似於分別請求

url 請求的url

var GetList = function(){}; 是JS中設置函數的一種方式，先設置一個匿名函數，而後將這個匿名函數賦值給GetList這個變量，至關於這個變量表明瞭這個函數

wx.request() 發送請求

success 請求成功之後，對數據進行操做

var goodsList = that.data.goodsList; that是調用函數的時候，傳遞過來的，是this，表明當前頁面Page()的實例化對象

that.data.goodsList 就是獲取當前goodsList的值

每次執行這個函數的時候，都會page++，而後根據這個page的值去服務器獲取數據，將新獲得的數據，經過循環push，添加到這個goodsList，而後再經過that.setData覆蓋掉原來的goodsList,這樣Page中的goodsList就是最新的數據，能夠展示在前端頁面了。

下拉刷新:1.觸底，觸發時間   2.調用函數，獲取數據    3.將數據添加到所在頁面js中

後端PHP代碼：

public function index(){
    $page = I('get.page')?I('get.page'):0;
    $goods_list = D('Goods')->where(array('status'=>1))->limit($page*10,'10')->order('id desc')->select();
    $this->success($goods_list,'',true);
}

須要更多小程序源代碼的請聯繫做者，微信號：18217688158