小程序开发之列表的上拉加载和下拉刷新效果实现教程

微信小程序可谓是9月21号之后最火的一个名词了，一经出现真是轰炸了整个开发人员，当然很多App开发人员有了一个担心，微信小程序的到来会不会让移动端App颠覆，让移动端的程序员失业，身为一个Android开发者我是不相信的，即使有，那也是需要个一两年的过度和打磨才能实现的吧。
不管微信小程序是否能颠覆当今的移动开发格局，我们都要积极向上的心态去接收，去学习。不排斥新技术，所以，心动不如行动，赶紧先搭建一个微信小程序开发工具。那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧（通过聚合数据平台获取微信新闻）。
1.介绍几个组件
1.1 scroll-view 组件

图片：1.jpg

图片：2.jpg

图片：3.jpg

iconType: [ ‘success #39;, ‘info #39;, ‘warn #39;, ‘waiting #39;, ‘safe_success #39;, ‘safe_warn #39;, ‘success_circle #39;, ‘success_no_circle #39;, ‘waiting_circle #39;, ‘circle #39;, ‘download #39;, 
‘info_circle #39;, ‘cancel #39;, ‘search #39;, ‘clear #39; 
]

图片：4.gif

 loading hidden= pw_hidden bindchange= loadingChange 
 加载中... /loading 
 scroll-view scroll-y= true >
2.2.1 detail.js逻辑代码文件
var network_util = require( #39;../../utils/network_util.js #39;);var json_util = require( #39;../../utils/json_util.js #39;);Page({
 data:{ // text: 这是一个页面 
 list:[],
 dd: #39; #39;,
 hidden:false,
 page: 1,
 size: 20,
 hasMore:true,
 hasRefesh:false },
 onLoad:function(options){ var that = this; var url = #39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d pno=1 ps=10 #39;;
 network_util._get(url, function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true, }); },function(res){
 console.log(res); }); },
 onReady:function(){ // 页面渲染完成 },
 onShow:function(){ // 页面显示 },
 onHide:function(){ // 页面隐藏 },
 onUnload:function(){ // 页面关闭 }, //点击事件处理
 bindViewTap: function(e) {
 console.log(e.currentTarget.dataset.title); }, //加载更多
 loadMore: function(e) { var that = this;
 that.setData({
 hasRefesh:true,}); if (!this.data.hasMore) return var url = #39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d pno= #39;+(++that.data.page)+ #39; ps=10 #39;;
 network_util._get(url, function(res){
 that.setData({
 list: that.data.list.concat(res.data.result.list),
 hidden: true,
 hasRefesh:false, }); },function(res){
 console.log(res); })},//刷新处理refesh: function(e) { var that = this;
 that.setData({
 hasRefesh:true, }); var url = #39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d pno=1 ps=10 #39;;
 network_util._get(url, function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 page:1,
 hasRefesh:false, }); },function(res){
 console.log(res); })},})

最后的效果：
图片：5.jpg


以上就是小程序开发之列表的上拉加载和下拉刷新效果实现教程 的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。