|
微信小程序新手教程之怎么实现下拉刷新，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧 如何在微信小程序里面实现下拉刷新，上拉加载更多 先看一下界面
大致如此的界面吧。 这个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、告诉我——告诉产品的改进，内容的增加。
想要体验怎么制作属于自己个性朋友圈照片的用户，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!