微信小程式開發之 下拉重新整理，上拉載入更多

先開看一下介面

1.wx.request （獲取遠端伺服器的資料，可以理解成$.ajax）

2. scroll-view的兩個事件

2.1 bindscrolltolower（滑到頁面底部時）

2.2 bindscroll (頁面滑動時)

2.3 bindscrolltoupper (滑倒頁面頂部時)

然後我們看**，詳細描述。

index.js

var url = "";

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));
wx.request(,
success:
function
(res)
that.setdata();
page ++;
that.setdata();
}});
}page(,
onload:
function
());
}});
},onshow:
function
(), binddownload:
function
(), scroll:
function
(event));
},refresh:
function
(event));
getlist(
this
) }
})

<

view 
class
="container"
>
<
scroll-view 
scroll-top
="}"
scroll-y
="true"
style
="height:}px;"
class
="list"
bindscrolltolower
="binddownload"
bindscroll
="scroll"
bindscrolltoupper
="refresh"
>
<
view 
class
="item"
wx:for
="}"
>
<
image 
class
="img"
src="}"
>
image
>
<
view 
class
="text"
>
<
text 
class
="title"
>}
text
>
<
text 
class
="description"
>}
text
>
view
>
view
>
scroll-view
>
<
view 
class
="body-view"
>
<
loading 
hidden
="}"
bindchange
="loadingchange"
>
載入中...
loading
>
view
>
view
>

微信小程式開發之 下拉重新整理，上拉載入更多

先開看一下介面 1.wx.request 獲取遠端伺服器的資料，可以理解成 ajax 2.scroll view的兩個事件 2.1 bindscrolltolower 滑到頁面底部時 2.2 bindscroll 頁面滑動時 2.3 bindscrolltoupper 滑倒頁面頂部時 然後我們看 詳...

詳解微信小程式開發之下拉重新整理 上拉載入

微信小程式中的下拉重新整理,上拉載入的功能很常見,目前我知道的有兩種可行的方法,一是scroll view,二是整個頁面重新整理.今天說說第一種,自己造輪子,難免有些瑕疵,日後慢慢完善.上gif 原理 scroll view中有監聽滑動的方法,這個跟android類似.其中用到了滑動到頂部,滑動到底...

微信小程式 下拉重新整理 上拉載入

1.下拉重新整理 小程式頁面整合了下拉功能，並提供了介面，我們只需要一些配置就可以拿到事件的 具體頁面的.json檔案 1 1 window 2.在js檔案中新增 函式 下拉重新整理 介面 onpulldownrefresh function 3.新增資料 通常情況下的下拉重新整理操作，就是把查詢條...