In diesem Artikel geht es um die Implementierung von Pull-Down-Laden und Pull-Up-Aktualisierung durch das WeChat-Applet. Wenn Sie nichts über die Implementierung von Pull-Down-Laden und Pull-Up-Aktualisierung durch das WeChat-Applet wissen Wenn Sie sich für die Implementierung von Pulldown-Laden und Pullup-Aktualisierung durch das WeChat-Applet interessieren, schauen wir uns diesen Artikel gemeinsam an. Kommen wir ohne weitere Umschweife zum Punkt
Zwei Implementierungen Methoden für die Pulldown-Aktualisierung und das Pullup-Laden von WeChat-Miniprogrammen
Methode 1: Die Methoden onPullDownRefresh und onReachBottom implementieren das Pulldown-Laden und Pullup-Aktualisieren von Miniprogrammen
Setzen Sie zuerst das Fensterattribut in der JSON-Datei ein
| 属性 |
类型 |
描述 |
| enablePullDownRefresh |
Boolean |
是否开启下拉刷新，详见页面相关事件处理函数。 |
solid #C0C0C0;border-collapse:collapse;"> Type
|
Beschreibung; Grenzkollapse: Zusammenbruch;"> enablePulldownRefresh
| 属性 |
类型 |
描述 |
| onPullDownRefresh |
function |
页面相关事件处理函数——监听用户下拉动作 |
| onReachBottom |
function |
页面上拉触发底事件的处理函数 |
| Boolean |
Ob die Pulldown-Aktualisierung aktiviert werden soll, finden Sie auf der Seite für Einzelheiten zur Funktion Ereignisbehandlung. |
Legen Sie die Methoden onPullDownRefresh und onReachBottom in js fest
| Properties |
Typ |
Beschreibung |
| onPullDownRefresh |
function td > |
Seitenbezogene Ereignisverarbeitungsfunktion – Benutzer-Pulldown-Aktionen überwachen |
| onReachBottom |
Funktion | Verarbeitungsfunktion für Seiten-Pull-up-Trigger-Bottom-Ereignis | tr> tbody>
Pulldown-Ladeanweisungen:
Nach der Verarbeitung der Datenaktualisierung kann wx.stopPullDownRefresh die Pulldown-Aktualisierung der aktuellen Seite stoppen.
onPullDownRefresh(){
console.log('--------下拉刷新-------')
wx.showNavigationBarLoading() //在标题栏中显示加载
wx.request({
url: 'https://URL',
data: {},
method: 'GET',
// OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}
})Nach dem Login kopieren
Methode 2:
Bindscrolltoupper und bindscrolltolower in der Bildlaufansicht festlegen, um das WeChat-Applet-Dropdown zu implementieren
| 属性 | 类型 | 描述 | | bindscrolltoupper | EventHandle | 滚动到顶部/左边，会触发 scrolltoupper 事件 | | bindscrolltolower | EventHandle | 滚动到底部/右边，会触发 scrolltolower 事件 |
Attributeindex.wxml Nach dem Login kopieren | <!--index.wxml-->
<view class="container" style="padding:0rpx">
<!--垂直滚动，这里必须设置高度-->
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"
class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
<view class="item" wx:for="{{list}}">
<image class="img" src="{{item.pic_url}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_description}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">
加载中...
</loading>
</view>
</view>Nach dem Login kopieren | Beschreibung |
| bindscrolltoupper | EventHandle
| Nach oben/links scrollen , wird das scrolltoupper-Ereignis ausgelöst |
var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
// 请求数据
var loadMore = function(that){
that.setData({
hidden:false
});
wx.request({
url:url,
data:{
page : page,
page_size : page_size,
sort : sort,
is_easy : is_easy,
lange_id : lange_id,
pos_id : pos_id,
unlearn : unlearn
},
success:function(res){
//console.info(that.data.list);
var list = that.data.list;
for(var i = 0; i < res.data.list.length; i++){
list.push(res.data.list[i]);
}
that.setData({
list : list
});
page ++;
that.setData({
hidden:true
});
}
});
}
Page({
data:{
hidden:true,
list:[],
scrollTop : 0,
scrollHeight:0
},
onLoad:function(){
// 这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
var that = this;
wx.getSystemInfo({
success:function(res){
that.setData({
scrollHeight:res.windowHeight
});
}
});
loadMore(that);
},
//页面滑动到底部
bindDownLoad:function(){
var that = this;
loadMore(that);
console.log("lower");
},
scroll:function(event){
//该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
this.setData({
scrollTop : event.detail.scrollTop
});
},
topLoad:function(event){
// 该方法绑定了页面滑动到顶部的事件，然后做上拉刷新
page = 0;
this.setData({
list : [],
scrollTop : 0
});
loadMore(this);
console.log("lower");
}
})Nach dem Login kopieren | EventHandle | Nach unten/rechts scrollen, Das scrolltolower-Ereignis wird ausgelöst
|
index.js
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
/**/
scroll-view {
width: 100%;
}
.item {
width: 90%;
height: 300rpx;
margin: 20rpx auto;
background: brown;
overflow: hidden;
}
.item .img {
width: 430rpx;
margin-right: 20rpx;
float: left;
}
.title {
font-size: 30rpx;
display: block;
margin: 30rpx auto;
}
.description {
font-size: 26rpx;
line-height: 15rpx;
}Nach dem Login kopieren
index.wxss
Das Obige ist der gesamte Inhalt dieses Artikels. Wenn Sie nicht viel darüber wissen, können Sie es selbst lesen. Je mehr Sie beide Seiten kennen, desto einfacher wird es, es zu meistern! Verwandte Empfehlungen: WeChat-Applet implementiert Finger-Zoom-Bildcode-Sharing
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der WeChat-Applet-Implementierung des Pulldown-Ladens und Pullup-Aktualisierens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
