這篇文章給大家分享的是有關(guān)微信小程序列表的上拉加載和下拉刷新怎么弄的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、社旗網(wǎng)站維護(hù)、網(wǎng)站推廣。

小程序列表的上拉加載和下拉刷新的實(shí)現(xiàn)方法：

1.介紹幾個(gè)組件

1.1 scroll-view 組件

注意：使用豎向滾動(dòng)時(shí)，需要給一個(gè)固定高度，通過 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先來張效果圖

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

2.2.1 detail.wxml 布局文件

 加載中...
  
 
 
 刷新中...
 
 
 
  
  標(biāo)題:{{item.title}}
  來源:{{item.source}}
 


 
 玩命的加載中...
 沒有更多內(nèi)容了
 
 

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è)頁面"
 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)閉
 },
 //點(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í)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！