溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序 列表的上拉加載和下拉刷新的實現(xiàn)

發(fā)布時間：2020-08-31 05:40:01 來源：腳本之家 閱讀：496 作者：請叫我小東子 欄目：web開發(fā)

微信小程序可謂是9月21號之后最火的一個名詞了，一經(jīng)出現(xiàn)真是轟炸了整個開發(fā)人員，當(dāng)然很多App開發(fā)人員有了一個擔(dān)心，微信小程序的到來會不會讓移動端App顛覆，讓移動端的程序員失業(yè)，身為一個Android開發(fā)者我是不相信的，即使有，那也是需要個一兩年的過度和打磨才能實現(xiàn)的吧。

不管微信小程序是否能顛覆當(dāng)今的移動開發(fā)格局，我們都要積極向上的心態(tài)去接收，去學(xué)習(xí)。不排斥新技術(shù)，所以，心動不如行動，趕緊先搭建一個微信小程序開發(fā)工具。那么接下來就讓我們來開始學(xué)習(xí)列表的上拉加載和下拉刷新的實現(xiàn)吧（通過聚合數(shù)據(jù)平臺獲取微信新聞）。

1.介紹幾個組件

1.1 scroll-view 組件

微信小程序 列表的上拉加載和下拉刷新的實現(xiàn)

注意：使用豎向滾動時，需要給一個固定高度，通過 WXSS 設(shè)置 height。

1.2 image組件

微信小程序 列表的上拉加載和下拉刷新的實現(xiàn)

注意：mode有12種模式，其中3種是縮放模式，9種是裁剪模式。

1.3 Icon組件

微信小程序 列表的上拉加載和下拉刷新的實現(xiàn)


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

2.列表的上拉加載和下拉刷新的實現(xiàn)

2.1先來張效果圖

微信小程序 列表的上拉加載和下拉刷新的實現(xiàn)

2.2邏輯很簡單，直接上代碼

2.2.1 detail.wxml 布局文件

<loading hidden="{{hidden}}" bindchange="loadingChange">
 加載中...
 </loading> 
 <scroll-view scroll-y="true"  bindscrolltolower="loadMore" bindscrolltoupper="refesh">
 <view wx:if="{{hasRefesh}}" >
 <icon type="waiting" size="45"/><text>刷新中...</text></view>
 <view wx:else  ><text></text></view>
 <view class="lll" wx:for="{{list}}" wx:for-item="item" bindtap="bindViewTap" 
 data-title="{{item.title}}" >
 <image  src="{{item.firstImg}}" ></image>
 <view class="eee" > 
 <view > 標題:{{item.title}}</view>
 <view > 來源:{{item.source}}</view>
 </view>
</view>
<view class="tips1">
 <view wx:if="{{hasMore}}" >
 <icon type="waiting" size="45"/><text>玩命的加載中...</text></view>
 <view wx:else><text>沒有更多內(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:"這是一個頁面"
 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(){
 // 頁面關(guā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);
 })
},
})

最后的效果：

微信小程序 列表的上拉加載和下拉刷新的實現(xiàn)

關(guān)于新聞的詳情實現(xiàn)，后面在實現(xiàn)

代碼地址：http://xiazai.jb51.net/201703/yuanma/WeiXinProject-master_jb51.rar

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持億速云！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手