PHP前端开发

微信小程序功能实现:上滑加载下拉刷新

百变鹏仔 6天前 #前端问答
文章标签 加载

本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的。这章介绍加载和刷新。

先介绍在IDE中,怎么模拟上滑这个操作。开始我是用鼠标点击文章列表,然后先上移动。结果一直没有结果,以为是代码写的有问题。其实并不是,上滑,下拉这个操作,只需要用鼠标的滚轮即可。

首先,我们先完成上滑和下拉这个功能。

list.wxml文件:

<view>    <view>        <!--用name 定义模版-->        <template>            <!--            1. scaleToFill : 图片全部填充显示,可能导致变形 默认            2. aspectFit : 图片全部显示,以最长边为准            3. aspectFill : 图片全部显示,以最短边为准            4. widthFix : 宽不变,全部显示图片            -->            <view>                <navigator>                    <view>                        <image></image>                    </view>                    <view>                        <view>{{title}}</view>                        <view>{{time}}</view>                    </view>                </navigator>            </view>        </template>                <scroll-view>            <view>文章列表</view>                <view>                    <view>                        <!--用is 使用模版-->                        <template></template>                    </view>                </view>        </scroll-view>        <view>            <loading>            加载中...            </loading>        </view>    </view>    <view>    </view></view>

在原来的基础上,多用了一个scroll-view (官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html) 我是加载文章列表的上面,

第一步:要设置允许它纵向滚动 scroll-y = true ,

第二步:要给一个固定高度,文档中也明确要求了这点。这里是动态获取手机配置的高度和宽度。

第三步:要设置bindscrolltoupper (下拉) 和 bindscrolltolower (上滑) 响应的方法。

第四步:要设置 scroll-top (用于定位) 和 bindscroll (滚动的时候执行,和前者一起用可达到定位效果)

第五步:加载页面icon设置,直接copy即可。

list.js 文件:

// pages/list/list.jsvar 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 <p><br><span style="font-family:'Microsoft YaHei';font-size:18px;">第一点:如果对 app.ajax.req 里面的方法看不懂,可以参考:微信小程序request请求 (有对应接口源码)</span></p><p><span style="font-family:'Microsoft YaHei';font-size:18px;">第二点:因为是分页查询,需要把上一次查询内容保存,所以用list.push 拼接。</span></p><p><span style="font-family:'Microsoft YaHei';font-size:18px;">第三点:每次查询后,页数都要加一,并且加载前要显示加载的icon,加载结束要隐藏。</span></p><p><span style="font-family:'Microsoft YaHei';font-size:18px;">第四点:页面加载初始化获取设置信息,官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject</span></p><p><span style="font-family:'Microsoft YaHei';font-size:18px;">第五点:下拉的逻辑,将页数设置为一,并清空msgList 内容,定位距顶部0px,最后调用加载数据的方法。</span></p><p><span style="font-family:'Microsoft YaHei';font-size:18px;">第六点:上滑的逻辑,直接调用。因为定位点在scorll方法中已经赋值。</span></p><p><span style="font-family:'Microsoft YaHei';font-size:18px;">第七点:如果调用我的接口,是不能用appid的,需要重新创建一个项目,选择无appid。</span></p><p><span style="font-family:'Microsoft YaHei';font-size:18px;">这样加载和刷新就完成了,虽然对刷新很不满意,网上找了很多例子都是这样,如果有好的效果,请赐教。</span></p><p><span style="font-family:'Microsoft YaHei';font-size:18px;">