您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)微信小程序列表的上拉加載和下拉刷新怎么弄的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
小程序列表的上拉加載和下拉刷新的實(shí)現(xiàn)方法:
1.介紹幾個(gè)組件
1.1 scroll-view 組件
注意:使用豎向滾動(dòng)時(shí),需要給一個(gè)固定高度,通過(guò) WXSS 設(shè)置 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.列表的上拉加載和下拉刷新的實(shí)現(xiàn)
2.1先來(lái)張效果圖
2.2邏輯很簡(jiǎn)單,直接上代碼
2.2.1 detail.wxml 布局文件
<loading hidden="{{hidden}}" bindchange="loadingChange"> 加載中... </loading> <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh"> <view wx:if="{{hasRefesh}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;"> <icon type="waiting" size="45"/><text>刷新中...</text></view> <view wx:else style="display:none" ><text></text></view> <view class="lll" wx:for="{{list}}" wx:for-item="item" bindtap="bindViewTap" data-title="{{item.title}}" > <image style=" width: 50px;height: 50px;margin: 20rpx;" src="{{item.firstImg}}" ></image> <view class="eee" > <view style="margin:5px;font-size:8px"> 標(biāo)題:{{item.title}}</view> <view style="margin:5px;color:red;font-size:6px"> 來(lái)源:{{item.source}}</view> </view> </view> <view class="tips1"> <view wx:if="{{hasMore}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;"> <icon type="waiting" size="45"/><text>玩命的加載中...</text></view> <view wx:else><text>沒(méi)有更多內(nèi)容了</text></view> </view> </scroll-view>
2.2.1 detail.js邏輯代碼文件
var network_util = require('../../utils/network_util.js'); var json_util = require('../../utils/json_util.js'); Page({ data:{ // text:"這是一個(gè)頁(yè)面" 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(){ // 頁(yè)面渲染完成 }, onShow:function(){ // 頁(yè)面顯示 }, onHide:function(){ // 頁(yè)面隱藏 }, onUnload:function(){ // 頁(yè)面關(guān)閉 }, //點(diǎn)擊事件處理 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); }) }, })
最后的效果:
關(guān)于新聞的詳情實(shí)現(xiàn),后面在實(shí)現(xiàn)
感謝各位的閱讀!關(guān)于“微信小程序列表的上拉加載和下拉刷新怎么弄”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。