应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

微信小程序内测体验教程:列表的上拉加载和下拉刷新的实现 ...

发布时间:2024-01-01 00:00 浏览次数:37

1.了解几个组件


1.1 scroll-view 组件


特别注意:采用横向翻转时,须要给一个紧固高度,通过 WXSS 设置 height。


1.2 image组件


特别注意:mode存有12种模式,其中3种就是翻转模式,9种就是剪裁模式。


1.3 Icon组件


iconType: [


‘success’, ‘info’, ‘warn’, ‘waiting’, ‘safe_success’, ‘safe_warn’,


‘success_circle’, ‘success_no_circle’, ‘waiting_circle’, ‘circle’, ‘download’,


‘info_circle’, ‘cancel’, ‘search’, ‘clear’


]


2.列表的上拉读取和下拉创下的同时实现


2.2.1 detail.wxml 布局文件



读取中...





创下中...




data-title="{{item.title}}" >




标题:{{item.title}}


来源:{{item.source}}






玩命的读取中...


没更多内容了




1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


2.2.1 detail.js逻辑代码文件


var network_util = require('../../utils/network_util.js');


var json_util = require('../../utils/json_util.js');


Page({


data:{


// text:"这就是一个页面"


list:[],


dd:'',


hidden:false,


page: 1,


size: 20,


hasMore:true,


hasRefesh:false


},


onLoad:function(options){


var that = this;


var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';


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 = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';


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 = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';


network_util._get(url,


function(res){


that.setData({


list:res.data.result.list,


hidden: true,


page:1,


hasRefesh:false,


});


},function(res){


console.log(res);


})


},


})


1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


26


27


28


29


30


31


32


33


34


35


36


37


38


39


40


41


42


43


44


45


46


47


48


49


50


51


52


53


54


55


56


57


58


59


60


61


62


63


64


65


66


67


68


69


70


71


72


73


74


75


76


77


78


79


80


81


1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


26


27


28


29


30


31


32


33


34


35


36


37


38


39


40


41


42


43


44


45


46


47


48


49


50


51


52


53


54


55


56


57


58


59


60


61


62


63


64


65


66


67


68


69


70


71


72


73


74


75


76


77


78


79


80


81


最后的效果:


代码地址:https://github.com/lidong1665/WeiXinProject

TAG标签:
阅读推荐