搜尋
首頁微信小程式小程式開發微信小程式 清單的上拉載入和下拉刷新的實現

微信小程式 清單的上拉載入和下拉刷新的實現

Apr 01, 2017 pm 03:36 PM
下拉重新整理微信小程式

本文主要介紹了微信小程式中實作清單的上拉載入和下拉刷新的方法。具有很好的參考價值。下面跟著小編一起來看下吧

微信小程式可謂是9月21號之後最火的一個名詞了,一經出現真是轟炸了整個開發人員,當然很多App開發人員有了一個擔心,微信小程式的到來會不會讓行動裝置App顛覆,讓行動端的程式設計師失業,身為一個Android開發者我是不相信的,即使有,那也是需要個一兩年的過度和打磨才能實現的吧。

不管微信小程式是否能顛覆現今的行動開發格局,我們都要積極向上的心態去接收,去學習。不排斥新技術,所以,心動不如行動,趕緊先搭建一個微信小程式開發工具。那麼接下來就讓我們來開始學習清單的上拉載入和下拉刷新的實作吧(透過聚合資料平台來獲取微信新聞)。

1.介紹幾個元件

1.1 scroll-view 元件

微信小程式 清單的上拉載入和下拉刷新的實現

##注意:使用垂直捲動時,需要給一個固定高度,透過WXSS 設定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.清單的上拉載入與下拉刷新的實作

#2.1先來張效果圖

微信小程式 清單的上拉載入和下拉刷新的實現

2.2邏輯很簡單,直接上程式碼

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"> 标题:{{item.title}}</view>
 <view style="margin:5px;color:red;font-size:6px"> 来源:{{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>没有更多内容了</text></view>
 </view>
 </scroll-view>

2.2.1 detail.js邏輯程式碼檔案


#

var network_util = require(&#39;../../utils/network_util.js&#39;);
var json_util = require(&#39;../../utils/json_util.js&#39;);
Page({
 data:{
 // text:"这是一个页面"
 list:[],
 dd:&#39;&#39;,
 hidden:false,
 page: 1,
 size: 20,
 hasMore:true,
 hasRefesh:false
 },
 onLoad:function(options){
 var that = this;
 var url = &#39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10&#39;;
 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 = &#39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=&#39;+(++that.data.page)+&#39;&ps=10&#39;;
 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 = &#39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10&#39;;
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 page:1,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
})

最後的效果:

微信小程式 清單的上拉載入和下拉刷新的實現

#關於新聞的詳情實現,後面在實現

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

以上是微信小程式 清單的上拉載入和下拉刷新的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器