Heim > WeChat-Applet > Mini-Programmentwicklung > Tutorial zur Implementierung der Pull-Up-Lade- und Pull-Down-Aktualisierungseffekte von Listen in der Miniprogrammentwicklung

Tutorial zur Implementierung der Pull-Up-Lade- und Pull-Down-Aktualisierungseffekte von Listen in der Miniprogrammentwicklung

巴扎黑
Freigeben: 2017-08-17 14:53:25
Original
1911 Leute haben es durchsucht
Man kann sagen, dass WeChat-Miniprogramme der heißeste Begriff nach dem 21. September sind. Als er erschien, hat er alle Entwickler wirklich bombardiert. Natürlich sind viele App-Entwickler besorgt, dass die Einführung von WeChat-Miniprogrammen mobile Apps untergraben wird. Ich glaube nicht, dass mobile Programmierer ihren Job verlieren werden. Selbst wenn dies der Fall ist, wird es ein oder zwei Jahre der Umstellung und Feinarbeit dauern, um dies zu erreichen.
Unabhängig davon, ob WeChat-Miniprogramme die heutige mobile Entwicklungslandschaft untergraben können, müssen wir eine positive Einstellung haben, um zu akzeptieren und zu lernen. Wir lehnen neue Technologien nicht ab, daher ist es besser, zuerst zu handeln als nachzudenken. Erstellen Sie schnell ein WeChat-Applet-Entwicklungstool. Beginnen wir also mit dem Erlernen der Implementierung des Pull-up-Ladens und der Pull-down-Aktualisierung der Liste (Abrufen von WeChat-Nachrichten über die Plattform für aggregierte Daten).
1. Stellen Sie mehrere Komponenten vor
1.1 Scroll-View-Komponente
Tutorial zur Implementierung der Pull-Up-Lade- und Pull-Down-Aktualisierungseffekte von Listen in der Miniprogrammentwicklung

Hinweis: Wenn Sie vertikales Scrollen verwenden, müssen Sie eine feste Höhe angeben und die Höhe über WXSS festlegen.
1.2 Bildkomponente

Bild: 2.jpg

Tutorial zur Implementierung der Pull-Up-Lade- und Pull-Down-Aktualisierungseffekte von Listen in der Miniprogrammentwicklung


Hinweis: Der Modus verfügt über 12 Modi, darunter 3 sind Zoommodi und 9 sind Zuschneidemodi.
1.3 Symbolkomponente

Bild: 3.jpg

Tutorial zur Implementierung der Pull-Up-Lade- und Pull-Down-Aktualisierungseffekte von Listen in der Miniprogrammentwicklung




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

2. Implementierung des Pull-Up-Ladens und Pull-Down-Aktualisierens der Liste
2.1 Schauen wir uns die Renderings an

Bild: 4.gif

Tutorial zur Implementierung der Pull-Up-Lade- und Pull-Down-Aktualisierungseffekte von Listen in der Miniprogrammentwicklung


2.2 Die Logik ist sehr einfach, codieren Sie sie einfach direkt
2.2.1 detail.wxml-Layoutdatei
<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>
Nach dem Login kopieren

2.2.1 detail.js Logik-Codedatei
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); })},})
Nach dem Login kopieren

Endeffekt:

Bild: 5.jpg

Tutorial zur Implementierung der Pull-Up-Lade- und Pull-Down-Aktualisierungseffekte von Listen in der Miniprogrammentwicklung

Das obige ist der detaillierte Inhalt vonTutorial zur Implementierung der Pull-Up-Lade- und Pull-Down-Aktualisierungseffekte von Listen in der Miniprogrammentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage