|
導(dǎo)讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一... 微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一項(xiàng)門檻非常高的創(chuàng)新，經(jīng)過將近兩年的發(fā)展，已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 本篇文章給大家?guī)淼膬?nèi)容是關(guān)于微信小程序功能實(shí)現(xiàn)：上滑加載下拉刷新，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。之前談到文章列表的數(shù)據(jù)加載，是一次性全部加載，這樣是不友好的。這章介紹加載和刷新。 先介紹在IDE中，怎么模擬上滑這個操作。開始我是用鼠標(biāo)點(diǎn)擊文章列表，然后先上移動。結(jié)果一直沒有結(jié)果，以為是代碼寫的有問題。其實(shí)并不是，上滑，下拉這個操作，只需要用鼠標(biāo)的滾輪即可。 首先，我們先完成上滑和下拉這個功能。 list.wxml文件： <view class="page">
<view class="page__bd">
<!--用name 定義模版-->
<template name="msgTemp">
<!--
1. scaleToFill : 圖片全部填充顯示，可能導(dǎo)致變形 默認(rèn)
2. aspectFit ： 圖片全部顯示，以最長邊為準(zhǔn)
3. aspectFill ： 圖片全部顯示，以最短邊為準(zhǔn)
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>在原來的基礎(chǔ)上，多用了一個scroll-view （官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html） 我是加載文章列表的上面， 第一步：要設(shè)置允許它縱向滾動 scroll-y = true ， 第二步：要給一個固定高度，文檔中也明確要求了這點(diǎn)。這里是動態(tài)獲取手機(jī)配置的高度和寬度。 第三步：要設(shè)置bindscrolltoupper （下拉） 和 bindscrolltolower （上滑） 響應(yīng)的方法。 第四步：要設(shè)置 scroll-top （用于定位） 和 bindscroll （滾動的時候執(zhí)行，和前者一起用可達(dá)到定位效果） 第五步：加載頁面icon設(shè)置，直接copy即可。 list.js 文件： // pages/list/list.js
var app = getApp();
// 當(dāng)前頁數(shù)
var pageNum = 1;
// 加載數(shù)據(jù)
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); 相當(dāng)于list.push(list);打亂了結(jié)構(gòu)
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為頁面跳轉(zhuǎn)所帶來的參數(shù)
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData( {
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
}
});
loadMsgData(that);
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
// 下拉刷新數(shù)據(jù)
pullDownRefresh: function() {
var that = this;
pageNum = 1;
that.setData({
msgList : [],
scrollTop : 0
});
loadMsgData(that);
},
// 上拉加載數(shù)據(jù) 上拉動態(tài)效果不明顯有待改善
pullUpLoad: function() {
var that = this;
loadMsgData(that);
},
// 定位數(shù)據(jù)
scroll:function(event){
var that = this;
that.setData({
scrollTop : event.detail.scrollTop
});
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})
第二點(diǎn)：因?yàn)槭欠猪摬樵儯枰焉弦淮尾樵儍?nèi)容保存，所以用list.push 拼接。 第三點(diǎn)：每次查詢后，頁數(shù)都要加一，并且加載前要顯示加載的icon，加載結(jié)束要隱藏。 第四點(diǎn)：頁面加載初始化獲取設(shè)置信息，官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject 第五點(diǎn)：下拉的邏輯，將頁數(shù)設(shè)置為一，并清空msgList 內(nèi)容，定位距頂部0px，最后調(diào)用加載數(shù)據(jù)的方法。 第六點(diǎn)：上滑的邏輯，直接調(diào)用。因?yàn)槎ㄎ稽c(diǎn)在scorll方法中已經(jīng)賦值。 第七點(diǎn)：如果調(diào)用我的接口，是不能用appid的，需要重新創(chuàng)建一個項(xiàng)目，選擇無appid。 這樣加載和刷新就完成了，雖然對刷新很不滿意，網(wǎng)上找了很多例子都是這樣，如果有好的效果，請賜教。 相關(guān)推薦： 微信小程序中的下拉刷新和上拉加載的實(shí)現(xiàn)方法詳解 微信小程序?qū)崿F(xiàn)下拉加載和上拉刷新詳細(xì)講 以上就是微信小程序功能實(shí)現(xiàn)：上滑加載下拉刷新的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！ 小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學(xué)習(xí)測試使用，請?jiān)谙螺d后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
