上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更多。

下拉加载更多:

1、在响应的 xxx.json 配置文件依次配置如下配置

>> enablePullDownRefresh:true  表示开启下拉刷新

>> backgroundTextStyle              下拉 loading 的样式,仅支持 dark/light

>> backgroundColor                    窗口的背景色

2、上方后面2个没有设置好,在下拉时,页面顶部会出现一块白色的区域。

3、在下拉刷新时,不可使用 wx.showLoading 提示(其余的提示我没有测试),否则在 ios 下页面回弹过多,导致看不到顶部的那个提示页面刷新的区域。

4、页面下拉会触发 onPullDownRefresh 事件

5、防止 onPullDownRefresh 多次触发,导致多次请求

上拉加载更多:

1、在对应的 xxx.json 中配置(不是必须的)

>> onReachBottomDistance          页面上拉触底事件触发时距页面底部距离,单位为px

2、页面上拉在小于或等于  onReachBottomDistance  的距离时,会触发 onReachBottom 事件

实现效果:

代码实现:

1、页面布局 loadMore.wxml 文件的编写

<view class='view-container'>
<block wx:for='{{articles}}' wx:key='{{item.id}}'>
<view class='articles-container'>
<view class='info'>
<image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}}
<text class='created-at'>{{item.created_at}}</text>
<text class='category'>{{item.category}}</text>
</view>
</view>
</block>
<view class='data-loading' hidden='{{hidden}}'>
数据加载中...
</view>
</view>

2、样式编写 loadMore.wxss 文件的编写

.view-container {
background-color: #fff;
} .data-loading {
height: 100rpx;
line-height: 100rpx;
background-color: #eee;
text-align: center;
font-size: 14px;
} .articles-container {
border-bottom: 1px solid #eee;
margin: 30rpx 10rpx;
background-color: #eee;
} .articles-container .info {
font-size: 12px;
margin: 20rpx 0rpx;
height: 100%;
display: inline-block;
} .articles-container .info .avatar {
width: 60rpx;
height: 60rpx;
margin-right: 10rpx;
border-radius: 60rpx;
display: inline-block;
vertical-align: middle;
} .articles-container .info .created-at {
margin: 0px 20rpx;
display: inline-block;
vertical-align: middle;
} .articles-container .info .category {
color: #3399ea;
display: inline-block;
vertical-align: middle;
}

3、js 控制 loadMore.js 文件的编写

Page({

  data: {
/**
* 需要访问的url
*/
urls: [
'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0',
'https://www.csdn.net/api/articles?type=new&category=arch',
'https://www.csdn.net/api/articles?type=new&category=ai',
'https://www.csdn.net/api/articles?type=new&category=newarticles'
],
/**
* 当前访问的url索引
*/
currentUrlIndex: 0,
/**
* 获取到的文章
*/
articles: [],
/**
* 控制上拉到底部时是否出现 "数据加载中..."
*/
hidden: true,
/**
* 数据是否正在加载中,避免数据多次加载
*/
loadingData: false
}, onLoad: function(options) {
this.loadData(false);
}, /**
* 加载数据
*/
loadData: function(tail, callback) {
var that = this,
urlIndex = that.data.currentUrlIndex;
wx.request({
url: that.data.urls[urlIndex],
success: function(r) {
var oldArticles = that.data.articles,
newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles;
that.setData({
articles: newArticles,
currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1
});
if (callback) {
callback();
}
},
error: function(r) {
console.info('error', r);
},
complete: function() {}
});
}, /**
* 监听用户下拉动作
*/
onPullDownRefresh: function() {
console.info('onPullDownRefresh');
var loadingData = this.data.loadingData,
that = this;
if (loadingData) {
return;
}
// 显示导航条加载动画
wx.showNavigationBarLoading();
// 显示 loading 提示框,在 ios 系统下,会导致顶部的加载的三个点看不见
// wx.showLoading({
// title: '数据加载中...',
// });
setTimeout(function() {
that.loadData(false, () => {
that.setData({
loadingData: false
});
wx.stopPullDownRefresh();
// wx.hideLoading();
wx.hideNavigationBarLoading();
console.info('下拉数据加载完成.');
});
}, 1000);
}, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
console.info('onReachBottom');
var hidden = this.data.hidden,
loadingData = this.data.loadingData,
that = this;
if (hidden) {
this.setData({
hidden: false
});
console.info(this.data.hidden);
}
if (loadingData) {
return;
}
this.setData({
loadingData: true
});
// 加载数据,模拟耗时操作 wx.showLoading({
title: '数据加载中...',
}); setTimeout(function() {
that.loadData(true, () => {
that.setData({
hidden: true,
loadingData: false
});
wx.hideLoading();
});
console.info('上拉数据加载完成.');
}, 1000);
}
})

4、配置文件 loadMore.json 的编写

{
"navigationBarTitleText": "上拉刷新和下拉加载更多",
"enablePullDownRefresh": true,
"onReachBottomDistance": 0,
"backgroundTextStyle": "dark",
"backgroundColor": "#c0d9ff"
}

完整代码:

微信小程序实现上拉和下拉加载更多代码:https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/view-pull-up-load-more

微信小程序实现上拉和下拉加载更多的更多相关文章

  1. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  2. 微信小程序 在使用wx.request时显示加载中

    微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.re ...

  3. 微信小程序开发--模板(template)使用,数据加载,点击交互

    微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...

  4. 在微信小程序中,如何实现下拉刷新(模拟刷新)

    一.在app.json中启动刷新, 在Windows 中, 添加  "enablePullDownRefresh":"true" 二.在需要刷新的页面中写(若是 ...

  5. 【微信小程序】scroll-view与Page下拉冲突

    需求:主界面是个列表.列表可以纵向滑动,下拉添加新的条目Item.每个条目Item可以横向滑动. 发现做下拉时,用Page的enablePullDownRefresh和scroll-view条目的横向 ...

  6. 微信小程序开发——设置默认图片、错误加载图片

    小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...

  7. 微信小程序(五) 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:

  8. 微信小程序:picker组件实现下拉框效果

    一.wxml中代码 <view class="in_order_Param">             <text>状态:</text>     ...

  9. 微信小程序 和 laravel8 实现搜索后分页 加载

    Page({ /** * 页面的初始数据 */ data: { activity:{}, page:1, last_page : 0, keyword:'' }, //加载 scroll(e){ le ...

随机推荐

  1. AQS深入分析

    一.node概念 1.当线程获取锁失败时,会被打包成一个node放到同步队列中 2.node属性 当线程获取锁失败时,会被打包成一个node放到同步队列中,所以node属性中有一个thread属性; ...

  2. 学习Tomcat(三)之容器连接器

    Tomcat最底层使用的是Java标准的SocketServer和Socket接受和处理请求,但是Socket接受到的数据是网络运输层的TCP或UDP协议的数据,需要转为Http或者其它应用层协议的数 ...

  3. vue-cli3项目中使用vue-ueditor-wrap

    Vue + UEditor + v-model 双向绑定 一.安装 1 npm i vue-ueditor-wrap 2 # 或者 3 yarn add vue-ueditor-wrap 二.下载文件 ...

  4. Vue+elementUI 创建“回到顶部”组件

    1.创建"回到顶部"组件 1 <template> 2 <transition name="el-fade-in"> 3 <div ...

  5. idea鼠标双击.log日志文件无法打开

    发现只要再mybatis-config.xml的起别名中加<package name="xxx"/>,就会导致Reader entry: ����   1 n乱码,而R ...

  6. CodeForce-808C Tea Party(结构体排序贪心)

    Tea Party CodeForces - 808C 现在有 n 个杯子,每个杯子的容量为 a1, a2, ..., an.他现在一共有 w 毫升茶 (w ≤ a1 + a2 + ... + an) ...

  7. python序列类型及一些操作

    序列分类 1.按存放的数据类型分类: 容器类型(能存放不同类型的数据):list.tuple.coolections.deque 扁平序列(只能存放一种类型的数据):str.bytes.bytearr ...

  8. YbtOJ#752-最优分组【笛卡尔树,线段树】

    正题 题目链接:http://www.ybtoj.com.cn/problem/752 题目大意 \(n\)个人,每个人有\(c_i\)和\(d_i\)分别表示这个人所在的队伍的最少/最多人数. 然后 ...

  9. 技术与艺术的结合,HMS Core让手机主题趣味丛生

    在9月23日晚举办的华为nova9系列新品发布会上,华为在发布nova9系列新机之外,还为观众展示了多款Harmony OS趣味主题.其中一款名为"翻滚吧牛奶"的应用主题看起来十分 ...

  10. maven插件maven-install-plugin

    maven-install-plugin负责将获取的jar包安装到本地仓库 <build> <plugin> <groupId>org.apache.maven.p ...