小程式開發之列表的上拉載入和下拉刷新效果實作教程

微信小程式可謂是9月21號之後最火的一個名詞了，一經出現真是轟炸了整個開發人員，當然很多App開發人員有了一個擔心，微信小程式的到來會不會讓行動端App顛覆，讓行動端的程式設計師失業，身為一個Android開發者我是不相信的，即使有，那也是需要個一兩年的過度和打磨才能實現的吧。
不管微信小程式是否能顛覆現今的行動開發格局，我們都要積極向上的心態去接收，去學習。不排斥新技術，所以，心動不如行動，趕緊先搭建一個微信小程式開發工具。那麼接下來就讓我們來開始學習清單的上拉載入和下拉刷新的實作吧（透過聚合資料平台來獲取微信新聞）。
1.介紹幾個元件
1.1 scroll-view 元件

圖片：1.jpg

##注意：使用垂直捲動時，需要給一個固定高度，透過WXSS 設定height。
1.2 image元件

圖片：2.jpg

#：mode有12種模式，其中3種是縮放模式，9種是裁切模式。
1.3 Icon元件

圖片：3.jpg

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.1先來張效果圖

圖片：4.gif

2.2邏輯很簡單，直接上程式碼
2.2.1 detail.wxml 版面配置檔案

<loading hidden="pw_hidden" bindchange="loadingChange">
 加载中... </loading>
 <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh"> <view wx:if="pw_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="pw_list" wx:for-item="item" bindtap="bindViewTap" data-title="pw_item.title" > <image style=" width: 50px;height: 50px;margin: 20rpx;" src="pw_item.firstImg" ></image> <view class="eee" >
 <view style="margin:5px;font-size:8px"> 标题:pw_item.title</view> <view style="margin:5px;color:red;font-size:6px"> 来源:pw_item.source</view> </view></view><view class="tips1"> <view wx:if="pw_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>没有更多内容了</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(){ // 页面关闭 }, //点击事件处理
 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); })},})

最後的效果：

圖片：5.jpg

以上是小程式開發之列表的上拉載入和下拉刷新效果實作教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！