微信小程序新手教程之怎么實現下拉刷新

微信小程序新手教程之怎么實現下拉刷新，本篇默認已經成功安裝微信小程序工具，來和小編一起看看吧

如何在微信小程序里面實現下拉刷新，上拉加載更多

先看一下界面

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

1.wx.request （獲取遠程服務器的數據，可以理解成$.ajax）

2. scroll-view的兩個事件

2.1 bindscrolltolower（滑到頁面底部時）

2.2 bindscroll (頁面滑動時)

2.3 bindscrolltoupper (滑倒頁面頂部時)

然后我們看代碼，詳細描述。

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;// 獲取數據的方法，具體怎么獲取列表數據大家自行發揮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必須要設置高度才能監聽滾動事件，所以，需要在頁面的onLoad事件中給scroll-view的高度賦值 var that = this; wx.getSystemInfo({ success:function(res){ console.info(res.windowHeight); that.setData({ scrollHeight:res.windowHeight }); } }); }, onShow:function(){ // 在頁面展示之后先獲取一次數據 var that = this; GetList(that); }, bindDownLoad:function(){ // 該方法綁定了頁面滑動到底部的事件 var that = this; GetList(that); }, scroll:function(event){ // 該方法綁定了頁面滾動時的事件，我這里記錄了當前的position.y的值,為了請求數據之后把頁面定位到這里來。 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>

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

嗨圖功能

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

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

3、立即制作——可以用自己的圖來DIY。

4、告訴我——告訴產品的改進，內容的增加。

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