微信小程序 列表刷新：
微信小程序，最近自己學(xué)習(xí)微信小程序的知識，就想實(shí)現(xiàn)現(xiàn)在APP 那種列表刷新，下拉刷新，上拉加載等功能。
先開看一下界面
1.wx.request （獲取遠(yuǎn)程服務(wù)器的數(shù)據(jù)，可以理解成$.ajax）
2. scroll-view的兩個事件
2.1 bindscrolltolower（滑到頁面底部時）
2.2 bindscroll (頁面滑動時)
2.3 bindscrolltoupper (滑倒頁面頂部時)
然后我們看代碼，詳細(xì)描述。
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;// 獲取數(shù)據(jù)的方法，具體怎么獲取列表數(shù)據(jù)大家自行發(fā)揮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必須要設(shè)置高度才能監(jiān)聽滾動事件，所以，需要在頁面的onLoad事件中給scroll-view的高度賦值 var that = this; wx.getSystemInfo({ success:function(res){ console.info(res.windowHeight); that.setData({ scrollHeight:res.windowHeight }); } }); }, onShow:function(){ // 在頁面展示之后先獲取一次數(shù)據(jù) var that = this; GetList(that); }, bindDownLoad:function(){ // 該方法綁定了頁面滑動到底部的事件 var that = this; GetList(that); }, scroll:function(event){ // 該方法綁定了頁面滾動時的事件，我這里記錄了當(dāng)前的position.y的值,為了請求數(shù)據(jù)之后把頁面定位到這里來。 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>感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
