微信小程序新手教程之怎么實(shí)現(xiàn)下拉刷新，本篇默認(rèn)已經(jīng)成功安裝微信小程序工具，來(lái)和小編一起看看吧

如何在微信小程序里面實(shí)現(xiàn)下拉刷新，上拉加載更多

先看一下界面

大致如此的界面吧。 這個(gè)Demo使用了微信的幾個(gè)Api和事件，我先列出來(lái)。

1.wx.request （獲取遠(yuǎn)程服務(wù)器的數(shù)據(jù)，可以理解成$.ajax）

2. scroll-view的兩個(gè)事件

2.1 bindscrolltolower（滑到頁(yè)面底部時(shí)）

2.2 bindscroll (頁(yè)面滑動(dòng)時(shí))

2.3 bindscrolltoupper (滑倒頁(yè)面頂部時(shí))

然后我們看代碼，詳細(xì)描述。

index.js

#FormatImgID_2#

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)聽(tīng)滾動(dòng)事件，所以，需要在頁(yè)面的onLoad事件中給scroll-view的高度賦值 var that = this; wx.getSystemInfo({ success:function(res){ console.info(res.windowHeight); that.setData({ scrollHeight:res.windowHeight }); } }); }, onShow:function(){ // 在頁(yè)面展示之后先獲取一次數(shù)據(jù) var that = this; GetList(that); }, bindDownLoad:function(){ // 該方法綁定了頁(yè)面滑動(dòng)到底部的事件 var that = this; GetList(that); }, scroll:function(event){ // 該方法綁定了頁(yè)面滾動(dòng)時(shí)的事件，我這里記錄了當(dāng)前的position.y的值,為了請(qǐng)求數(shù)據(jù)之后把頁(yè)面定位到這里來(lái)。 this.setData({ scrollTop : event.detail.scrollTop }); }, refresh:function(event){ // 該方法綁定了頁(yè)面滑動(dòng)到頂部的事件，然后做上拉刷新 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>

下面小編就給大家介紹一種一個(gè)小程序吧

嗨圖功能

1、專題——DIY圖片的模板，點(diǎn)擊可以生成使用，分享到朋友圈。

2、分享墻——用戶上傳的自己DIY作品。

3、立即制作——可以用自己的圖來(lái)DIY。

4、告訴我——告訴產(chǎn)品的改進(jìn)，內(nèi)容的增加。

想要體驗(yàn)怎么制作屬于自己個(gè)性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗(yàn)，開(kāi)啟你的嗨圖之旅吧!