微信小程序 下拉刷新及上拉加载原理解析

这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1.下拉刷新的概念及应用场景。

概念： 下拉刷新是移动端更新列表数据的交互行为，用户通过手指在屏幕上子上而下的滑动，可以触发页面的下拉刷新，更新列表数据。

应用场景： 在移动端，数据列表是常见的页面效果，更新列表数据是最基本的页面需求，相比于按钮刷新，定时刷新来说，下拉刷新的用户体验方便友好，已经成为移动端刷新列表数据的最佳解决方案。

微信小程序启动下拉刷新：

两种方式：

1.需要在app.json 的window选项中或页面配置中开启enablePullDownRefresh， 但是，一般情况下，推荐在页面配置中为需要的页面单独开启下拉刷新行为。

2.可以通过wx.startPullDownRefresh() 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

配置下拉刷新窗口的样式：

需要在app.json 的window选项中或页面配置中修改backbroundColor 和backgroundTextStyle 选项。

backgroundColor: 用来配置下拉刷新窗口的背景颜色，仅支持16进制颜色值。

backgroundTextStyle 用来配置下拉刷新loading 的样式，仅支持dark和light

onPullDownRefresh： 页面相关事件处理函数--监听用户下拉操作时执行

停止下拉刷新效果：

当处理万下拉刷新后，下拉刷新的loading 效果会一直显示，不会主动消失，需要手动隐藏下拉刷新的loading效果，此时，跳用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。

上拉加载更多

1.上拉加载更多的概念及应用场景。

概念： 在移动端，随着手指不断向上滑动，当内容将要到达屏幕底部的时候，页面会随之不断的加载后续内容，知道没有新内容位置，我们称之为上拉加载更多，上拉加载更多的本质就是数据的分页加载。

应用场景： 在移动端，列表数据的分页加载，首选的实现方式就是上拉加载更多。

配置上拉触底的距离：

可以在app.json的window 选项上或页面配置中设置触底的距离 onReachBottomDistance 单位为px，默认触底距离为50px。

监听上拉触底事件：onReachBottom() 函数，可以监听用户在当前页面的上拉触底事件，从而实现上拉加载更多列表数据的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序实现列表下拉刷新上拉加载

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:开启下拉刷新: onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px. { "enablePullDown

  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    微信小程序实现页面下拉刷新和上拉加载功能详解

    本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water

  • 微信小程序（六）：列表上拉加载下拉刷新示例

    1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

  • 详解微信小程序开发之下拉刷新 上拉加载

    详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • 微信小程序scroll-view实现横向滚动和上拉加载示例

    微信小程序scroll-view实现横向滚动和上拉加载示例

    今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

  • 微信小程序实现上拉加载功能

    本文实例为大家分享了微信小程序上拉加载的具体代码,供大家参考,具体内容如下 demo.wxml  文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{ item.store_name }}</view> <image src='{{item.logo}}'></image> <

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

  • 微信小程序实现动态列表项的顺序加载动画

    微信小程序实现动态列表项的顺序加载动画

    本文实例为大家分享了微信小程序实现动态列表项的顺序加载动画,供大家参考,具体内容如下 效果  思路 1.最开始用了纯CSS动画animation,发现动画需要重复写,于是换使用transition动画. 2.使用onReady()可以让页面加载好再显示动画以免动画提前结束. 代码 wxml <!-- style中的主要为了区分已加载好的项和新数据,只有新数据有动画 --> <view wx:for="{{lists}}" class="common"

  • 微信小程序 下拉刷新及上拉加载原理解析

    这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小

  • 微信小程序下拉刷新PullDownRefresh的使用方法

    微信小程序下拉刷新PullDownRefresh的使用方法

    前言 下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 onPullDownRefresh .虽然微信的官方文档有很多坑,但下拉刷新介绍的还是很全面的. 微信小程序--下拉刷新.jpg 最近开发一款微信小程序,里面有用到下拉刷新数据的功能.于是,又开始折腾了... 一.onPullDownRefresh回调 初略看了下文档,发现小程序js中有onPullDownRefresh回调,果断重写之... // http://itlao5.com onPullDownRe

  • 微信小程序下拉刷新界面的实现

    微信小程序下拉刷新界面的实现 利用onPullDownRefresh函数设置下拉刷新功能 一.在app.json中,将window选项中的enablePullDownRefresh设为true "window":{ "enablePullDownRefresh":true } 或者在要刷新的界面的XXX.json中设置enablePullDownRefresh设为true { "enablePullDownRefresh": true } 二.利

  • 微信小程序下拉加载和上拉刷新两种实现方法详解

    方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onReachBottom方法 下拉加载说明: 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新. onPullDownRefresh(){ console.log('--------下拉刷新-------') wx.showNavigationBarLoadin

  • 微信小程序 下拉菜单的实现

    微信小程序 下拉菜单的实现

    微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

  • 微信小程序下拉菜单效果的实例代码

    微信小程序下拉菜单效果的实例代码

    //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te

  • 微信小程序下拉框组件使用方法详解

    本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = region,以及value = "一维数组" //.wxml <picker mode="region" bindchange="bindViewEvent" data-model="component" data-me

随机推荐