微信小程序之下拉刷新，上拉更多列表實現
阿新 • • 發佈：2018-10-05
動畫 ext 多次 pre c4c 也不能 分享圖片 a20 SHH
代碼地址如下：<br>http://www.demodashi.com/demo/11110.html
一、準備工作
首先需要下載小程序開發工具
官方下載地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
目錄結構說明
二、程序實現
1.運行開發工具
選擇「本地小程序項目」
2.新建項目
3.開啟接口域名免校驗
4.運行效果
三、功能說明
1.通過page方式實現下拉刷新，上拉更多列表
onPullDownRefresh 下拉刷新API
// 下拉 刷新列表(滾到頂部) onPullDownRefresh: function (e) { if (!refresh) { var that = this; refresh = true; // 顯示刷新動畫 that.setData({ refreshhidden: false }) wx.request({ url: ‘https://news-at.zhihu.com/api/4/news/latest‘, method: ‘get‘, data: {}, header: { "Content-Type": "application/json" }, success: function (res) { // 數據加載完成後 延遲隱藏loading setTimeout(function () { wx.clearStorageSync(); // 清空數據 // 重置列表為空 that.setData({ datalist: [] }) refresh = false; var arr = res.data; var format = util.getFormatDate(arr.date); arr["dateDay"] = format.dateDay; var list = that.data.datalist; that.setData({ datalist: list.concat(arr), dataListDateCurrent: arr.date, dataListDateCount: 1, refreshhidden: false }); }, 2000); } }); } else { console.log("正在刷新..."); } },
onReachBottom 滑動到底部API（上拉更多）
// 上拉 加載更多(滾到底部) onReachBottom: function (e) { var that = this; // 加載更多 loading that.setData({ loadmorehidden: false }) var currentDate = this.data.dataListDateCurrent; // 請求參數：日期 // 限制加載次數 if (this.data.dataListDateCount >= 3) { that.setData({ // 加載更多 loading loadmorehidden: true }); } else { // 記錄請求日期參數，避免滾動到底部事件，多次觸發相同請求 if (currentDate == wx.getStorageSync("currentDate")) { console.log(currentDate + "已發起請求!"); } else { wx.request({ url: ‘https://news-at.zhihu.com/api/4/news/before/‘ + currentDate, method: ‘get‘, data: {}, header: { "Content-Type": "application/json" }, success: function (res) { var arr = res.data; var format = util.getFormatDate(arr.date); arr["dateDay"] = format.dateDay; var list = that.data.datalist; that.setData({ datalist: list.concat(arr), dataListDateCurrent: arr.date, dataListDateCount: that.data.dataListDateCount + 1 }); } }); } } },
2.結合weui實現加載動畫效果
在wxml界面，結合weui加載更多組件，實現加載動畫效果
<!-- 列表 下拉刷新 動畫 --> <view class="hot-box-top" hidden="{{!refreshhidden}}"> <view class="weui-loadmore"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">正在刷新...</view> </view> </view>
<!-- 列表 上拉加載更多 動畫 -->
<view class="hot-box-more">
<view wx:if="{{!loadmorehidden}}">
<view class="weui-loadmore">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">加載更多...</view>
</view>
</view>
<view wx:else>
<text> 沒有更多了 </text>
</view>
</view>3.結合知乎app接口實現數據的動態加載
通過使用知乎API實現動態數據的加載
API1：獲取最新 精選 信息列表
1.接口地址
https://news-at.zhihu.com/api/4/news/latest
2.輸入參數（無）
3.返回參數
{
"dateDay" : "08月07日 星期一",
"top_stories" : [
{
"id" : 9560543,
"title" : "對於嘲諷對手的行為，只能說「電子競技不相信眼淚」",
"image" : "https://pic1.zhimg.com/v2-c7a203de0c6a6d451d44ad1a415cc6b0.jpg",
"type" : 0,
"ga_prefix" : "080717"
},
{
"id" : 9560143,
"title" : "知道蘋果公司有錢，但沒想到美國政府還欠它 526 億美元",
"image" : "https://pic2.zhimg.com/v2-0d313023bc8c4b3f2e68ea65aeeebc35.jpg",
"type" : 0,
"ga_prefix" : "080713"
},
{
"id" : 9556786,
"title" : "想要做好盡職調查，必須細致到連企業的廁所也不能放過",
"image" : "https://pic4.zhimg.com/v2-8efe699a0ad605d935fe53a5d2d3d147.jpg",
"type" : 0,
"ga_prefix" : "080711"
},
{
"id" : 9559601,
"title" : "博爾特在北京奧運的表演仿佛就在昨天，現在已是傳奇謝幕",
"image" : "https://pic2.zhimg.com/v2-49c4ccda5bc1fb4fc10b2529a563e3dd.jpg",
"type" : 0,
"ga_prefix" : "080707"
},
{
"id" : 9552053,
"title" : "滿眼二維碼，在移動支付上銀行已經輸了？其實混戰才開始",
"image" : "https://pic1.zhimg.com/v2-04123bb20c6637a15dcd1eac71c4f6e8.jpg",
"type" : 0,
"ga_prefix" : "080709"
}
],
"stories" : [
{
"id" : 9560228,
"title" : "被嚇得頭皮發麻、脊背發涼……但真的太「爽」了",
"type" : 0,
"images" : [
"https://pic1.zhimg.com/v2-31792fa6be283373ce3b8574940342d8.jpg"
],
"ga_prefix" : "080721"
},
{
"id" : 9559747,
"title" : "「孩子哭別管他，哭累了就睡了」，這種方法真的不行",
"type" : 0,
"images" : [
"https://pic2.zhimg.com/v2-b1f5f7c5384a682fe07dd2a573541bb9.jpg"
],
"ga_prefix" : "080710"
},
{
"id" : 9552053,
"title" : "滿眼二維碼，在移動支付上銀行已經輸了？其實混戰才開始",
"type" : 0,
"images" : [
"https://pic3.zhimg.com/v2-c191427cc66d14db722d2875484b362a.jpg"
],
"ga_prefix" : "080709"
},
{
"id" : 9559040,
"title" : "好好的一個年輕人，怎麽就……中了回鍋肉的毒",
"type" : 0,
"images" : [
"https://pic2.zhimg.com/v2-67ec769321d8c64e05c9adde287ed711.jpg"
],
"ga_prefix" : "080708"
},
{
"multipic" : true,
"id" : 9559601,
"title" : "博爾特在北京奧運的表演仿佛就在昨天，現在已是傳奇謝幕",
"type" : 0,
"ga_prefix" : "080707",
"images" : [
"https://pic4.zhimg.com/v2-676d2821c51bd66f05a1ffcea167fe1b.jpg"
]
},
{
"id" : 9558150,
"title" : "這裏是廣告 · 蜀道有棧橋何懼上青天",
"type" : 0,
"images" : [
"https://pic1.zhimg.com/v2-4fd0510d4ef0766c07605e1bd3c6bfc4.jpg"
],
"ga_prefix" : "080706"
}
],
"date" : "20170807"
}API2:獲取歷史記錄
1.接口地址
https://news-at.zhihu.com/api/4/news/before/20170807
https://news-at.zhihu.com/api/4/news/before/日期
2.輸入參數:日期
3.返回參數
{
"date" : "20170806",
"stories" : [
{
"id" : 9548310,
"title" : "小事 · 呃……我贏了？",
"type" : 0,
"images" : [
"https://pic4.zhimg.com/v2-ee8be37e57714d08dfb497e72f0288db.jpg"
],
"ga_prefix" : "080622"
},
{
"id" : 9551898,
"title" : "他的音樂可令時光倒流，五座小金人不足以說明他的成就",
"type" : 0,
"images" : [
"https://pic1.zhimg.com/v2-cdaabf222267bb7162abd089fc45bc24.jpg"
],
"ga_prefix" : "080621"
},
{
"id" : 9549918,
"title" : "玩了這麽多年魔獸，我就是對這個設計有意見",
"type" : 0,
"images" : [
"https://pic4.zhimg.com/v2-02d7621c85df476d6c9e99b07c186883.jpg"
],
"ga_prefix" : "080620"
}
]
}微信小程序之下拉刷新，上拉更多列表實現
代碼地址如下：<br>http://www.demodashi.com/demo/11110.html
註：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權
微信小程序之下拉刷新，上拉更多列表實現