이 글의 내용은 위챗 애플릿 기능의 구현에 관한 것입니다. 위로 밀어서 로드하고 아래로 당겨서 새로 고치는 것이 좋습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 너.
앞서 말씀드렸던 글 목록의 데이터 로딩이 한꺼번에 로딩이 되어 불친절합니다. 이 장에서는 로드 및 새로 고침에 대해 소개합니다.
먼저 IDE에서 슬라이딩 업 작업을 시뮬레이션하는 방법을 소개하겠습니다. 처음에는 기사 목록을 마우스로 클릭하다가 위로 올라갔습니다. 결과가 없습니다. 코드에 문제가 있는 줄 알았습니다. 사실, 아니요. 마우스 휠을 사용하여 위로 밀고 아래로 당기기만 하면 됩니다.
먼저 슬라이드업과 풀다운 기능을 완성해 보겠습니다.
list.wxml 파일:
<view class="page"> <view class="page__bd"> <!--用name 定义模版--> <template name="msgTemp"> <!-- 1. scaleToFill : 图片全部填充显示,可能导致变形 默认 2. aspectFit : 图片全部显示,以最长边为准 3. aspectFill : 图片全部显示,以最短边为准 4. widthFix : 宽不变,全部显示图片 --> <view class="weui-panel__bd"> <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"> <view class="weui-media-box__hd weui-media-box__hd_in-appmsg"> <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/> </view> <view class="weui-media-box__bd weui-media-box__bd_in-appmsg"> <view class="weui-media-box__title">{{title}}</view> <view class="weui-media-box__desc">{{time}}</view> </view> </navigator> </view> </template> <scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh" bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access"> <view class="weui-panel__hd">文章列表</view> <view wx:for-items="{{msgList}}" wx:key="{{item.id}}"> <view class="kind-list__item"> <!--用is 使用模版--> <template is="msgTemp" data="{{...item}}"/> </view> </view> </scroll-view> <view> <loading hidden="{{hidden}}" bindchange="loadingChange"> 加载中... </loading> </view> </view> <view class="page__ft"> </view> </view>
원본을 기반으로 추가 스크롤뷰를 사용하였습니다. 위의 기사 목록을 로드 중입니다.
첫 번째 단계: 세로 스크롤을 허용하도록 설정하려면 scroll-y = true,
# 🎜 🎜#2단계: 고정 높이를 지정합니다. 이는 문서에서도 분명히 요구됩니다. 다음은 동적으로 획득한 휴대폰 구성의 높이와 너비입니다.
3단계: bindscrolltoupper(드롭다운) 및 bindscrolltolower(슬라이드업) 응답 방법을 설정합니다.
4단계: scroll-top(위치 지정용) 및 #🎜🎜 #bindscroll을 설정합니다. (스크롤 시 실행, 전자와 함께 사용하여 위치 지정 효과 달성)
5단계: 페이지 아이콘 설정을 로드하고 직접 복사하세요.
list.js 파일:
# 🎜🎜#세 번째 사항: 각 쿼리 후에 페이지 번호를 1씩 늘려야 하며 로드 전에는 로드된 아이콘을 표시하고 로드 후에는 숨겨야 합니다. 네 번째 포인트: 설정 정보를 얻기 위한 페이지 로딩 초기화, 공식 문서: https://mp.weixin.qq.com/debug/wxadoc/dev/api / systeminfo.html#wxgetsysteminfoobject 다섯 번째 포인트: 드롭다운 논리, 페이지 번호를 1로 설정, msgList 콘텐츠 지우기, 위에서 0px 위치에 배치, 마지막으로 데이터 로드 메서드를 호출합니다. 6번째 포인트: 슬라이딩 업 로직을 직접 호출합니다. scorll 메소드에서 앵커 포인트에 값이 할당되었기 때문입니다. 7번째 포인트: 내 인터페이스를 호출하면 해당 appid를 사용할 수 없습니다. 프로젝트를 다시 만들고 appid 없음을 선택해야 합니다. 이렇게 하면 로딩과 새로고침이 완료됩니다. 비록 새로고침이 만족스럽지는 않지만, 인터넷에서 이런 예가 많이 발견되었습니다. 좋은 효과, 알려주세요. 관련 추천: WeChat에서 풀다운 새로 고침 및 풀업 로드 애플릿 구현 방법에 대한 자세한 설명 위 내용은 WeChat 미니 프로그램 기능 구현: 위로 밀어서 로드하고 아래로 당겨 새로 고침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!// pages/list/list.js
var app = getApp();
// 当前页数
var pageNum = 1;
// 加载数据
var loadMsgData = function(that){
that.setData({
hidden:false
});
var allMsg = that.data.msgList;
app.ajax.req('/itdragon/findAll',{
"page":pageNum , "pageSize" : 6
},function(res){
// 不能直接 allMsg.push(res); 相当于list.push(list);打乱了结构
for(var i = 0; i < res.length; i++){
allMsg.push(res[i]);
}
that.setData({
msgList:allMsg
});
pageNum ++;
that.setData({
hidden:true
});
});
}
Page({
data:{
msgList:[],
hidden:true,
scrollTop : 0,
scrollHeight:0
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData( {
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
}
});
loadMsgData(that);
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
// 下拉刷新数据
pullDownRefresh: function() {
var that = this;
pageNum = 1;
that.setData({
msgList : [],
scrollTop : 0
});
loadMsgData(that);
},
// 上拉加载数据 上拉动态效果不明显有待改善
pullUpLoad: function() {
var that = this;
loadMsgData(that);
},
// 定位数据
scroll:function(event){
var that = this;
that.setData({
scrollTop : event.detail.scrollTop
});
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
두 번째 포인트: 페이징 쿼리이기 때문에 마지막 쿼리 내용을 저장해야 하므로 목록에 추가 .push는 연결하는 데 사용됩니다.