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

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

Bild: 1.jpg

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

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

Bild: 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. Implementierung des Pull-Up-Ladens und Pull-Down-Aktualisierens der Liste
2.1 Schauen wir uns die Renderings an

Bild: 4.gif

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>

2.2.1 detail.js Logik-Codedatei

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); })},})

Endeffekt:

Bild: 5.jpg

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!