1. 程式人生 > >微信小程式下拉重新整理和載入更多

微信小程式下拉重新整理和載入更多

呼叫系統的API,系統有提供下拉重新整理的API介面 


*.js裡面:
//獲取應用例項
const app = getApp()
var page = 1;
var isfinish = false; //載入完畢

function loadmore(that) {
  if (isfinish) return;

  wx.showLoading({
    title: '正在載入中',
  })
  wx.request({
    url: app.globalData.url.studentlist,
    header: {
      Cookie: wx.getStorageSync('session_id')
    },
    data: {
      page: page,
      condition: that.data.condition

    },
    
    success: (res) => {
      wx.hideLoading();

      if (res.data.length > 0) {
        var list = that.data.list;

        for (var i = 0; i < res.data.length; i++) {
          list.push(res.data[i]);
        }
        that.setData({ list: list });
        page++;

      } else {
        isfinish = true;
      }

      wx.stopPullDownRefresh();
    }
  })
}
//頁面相關事件處理函式--監聽使用者下拉動作
  onPullDownRefresh: function () {
    page = 1;
    isfinish = false;
    this.setData({list:[]});
    loadmore(this);
  },
   //頁面上拉觸底事件的處理函式
   
  onReachBottom: function () {
    var that = this;
    loadmore(that);
  },



相關推薦

程式重新整理載入

呼叫系統的API,系統有提供下拉重新整理的API介面 *.js裡面://獲取應用例項 const app = getApp() var page = 1; var isfinish = false; //載入完畢 function loadmore(that) { if

程式重新整理載入

example One:如果所有頁面都要開啟下拉重新整理功能: aap.json中: "window":{       "enablePullDownRefresh":true, //開啟下拉重新整理功能       "navigatio

程式重新整理載入2種方法實現

微信小程式上拉重新整理和下拉載入2種方法實現,onPullDownRefresh,scroll-view使用 一、XXX.json開啟下拉重新整理 {    "enablePullDownRefresh": true }   二、XXX.js onP

程式重新整理onPullDownRefresh程式分享轉發onShareAppMessage

       在訂單處理中,當前的訂單不一定能夠及時顯示最新的訂單資訊,所以使用者需要能夠通過下拉及時重新整理頁面達到重新整理個人訂單的工嗯呢該。為了使使用者能夠把當前小程式一鍵分享給好友時,我們需要加一個小程式頁面轉發的功能。今天將主要講解這下拉重新整理和分享轉發兩個功能

程式——重新整理(分頁)

1、先定義兩個變數:   // 分頁,載入 hasMoreData:true, globalPage:0,  2、函式處理:   3、與後臺互動:  1)、在獲取列表的方法裡面,將下面兩個引數以及其他所需

程式重新整理、上載入

下拉重新整理: (1)直接呼叫onPullDownRefresh:function()事件,首先設定app.js以及有該需求的頁面json檔案中的 “enablePullDownRefresh”: true, //允許下拉重新整理 “backgroundTextStyle”: “dar

程式重新整理

1.在要重新整理的介面的XXX.json中設定enablePullDownRefresh設為true    "enablePullDownRefresh": true 2.利用onPullDownRefresh函式定義下拉動作並結合wx.request()向後臺請求資料更新

程式重新整理時頂部tab元素不隨著移動

頂部tab元素用fixed固定,設定了top屬性。發下在微信小程式中使用onPullDownRefresh()時,頂部tab元素不隨著下拉操作移動。所以將tab元素的top屬性取消,這樣就可以實行頂部t

程式重新整理載入

1.使用scroll-view實現下拉重新整理上拉載入 <scroll-view scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="b

程式 重新整理/上載入 (上載入怎麼實現)

實現原理: 1、下拉重新整理:由於小程式資料是實時渲染的。我們把data{}內的資料清空重新載入即可實現下拉重新整理。 2、上拉載入更多(頁面上拉觸底事件):新獲取的資料追加到data{}內的原

瞭解程式重新整理功能

小程式提供了這個事件。 onPullDownRefresh() 監聽使用者下拉重新整理事件。 如果要開啟下拉重新整理功能,

高效能的給RecyclerView新增重新整理載入動畫,基於ItemDecoration(一)

專案已經上傳Github,點選這裡檢視,裡面有整個專案的效果。 先說說我為什麼要做這個。github上有一個比較火的開源專案,PullToRefreshView,估計不少人都看過,這個專案實現的動畫很漂亮,但是它有一個我無法忍受的缺點,就是當列表可以向下滾動的

自己封裝的工具類,使用原生SwipeRefreshLayout+RecycleView實現重新整理載入

實現SwipeRefreshLayout+RecycleView實現重新整理 在你的xml檔案裡寫上如下程式碼: <android.support.v4.widget.SwipeRefreshLayout

recyclerview重新整理載入

SwipeRefreshLayout是google推薦的支援下拉重新整理的佈局控制元件,但是隻支援下拉重新整理不能上劃載入更多。我觀察知乎的重新整理和載入更多操作,發現他的載入更多是不需要上拉手勢的,當recyclerview滑到最後一個item時自動載入更多資

程式載入重新整理兩種實現方法

方法一:onPullDownRefresh和onReachBottom方法實現小程式下拉載入和上拉重新整理 首先要在json檔案裡設定window屬性             屬性  

程式實戰篇-重新整理載入

下拉重新整理 實現下拉重新整理目前能想到的有兩種方式 呼叫系統的API,系統有提供下拉重新整理的API介面   下拉重新整理API.png 監聽scroll-view,自定義下拉重新整理,還記得scroll-view裡面有一個bindscrollto

程式

微信小程式元件裡沒有下拉框,正好要用到,記下來以後參考 wxml程式碼 <view class='top'> <view class='top-text'> 選擇接收班級</view> <!-- 下拉框 --> <view

程式框之二維陣列或物件

js檔案 Page({ data:{ //戶型 這是一個本地的物件,然後繫結到頁面上 pic_array: [ { id: 13, name: ‘1室1廳1衛‘ }, { id: 14, name: ‘1室2廳1衛‘ }, { id:

程式列表選單

效果圖:   1.wxml   2.wxss .list-msg {  padding: 0 10rpx; background-color: #fff; position: relative; width: 90%;

自定義程式選擇框元件

預覽效果圖:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ======================================================== 首先要新建一個元件 1.在想要的位置上新建一個目錄 2.在該目錄中 右鍵 → 新建一個Comp