微信小程序实现触底加载与下拉刷新的示例代码

目录
  • 触底加载
    • loader函数思考
    • loader函数实现
    • 触底加载动画
    • 触底加载的优点
  • 下拉刷新
  • 最后

在最近做小程序的时候有这么一个很常见的需求,加载一个信息列表,要求需要触底加载和下拉刷新,我突然想起来掘金小册界面和这个需求很相似,接下来我给大家介绍一下我的实现方案。

触底加载

步骤如下:

  • 封装一个loader函数
  • 在监听页面加载的时候触发这个loader函数
  • 在监听到触底的时候再次触发这个函数
onLoad: function (options) {
    this.loadBooks(this.data.books.length)
},
onReachBottom: function () {
    this.loadBooks(this.data.books.length)
},
loadBooks: function () {

},

注意这里的生命周期函数:onload为监听页面加载生命周期,onReachBottom为监听触底动作生命周期。

loader函数思考

loader函数的封装首先取决与我们的业务逻辑,首先根据我们的业务来思考,

我们想要通过触底来获取数据,所以我们需要固定住我们每次获取数据的数量,其次,为了避免重复,我们不能重复获取,就要考虑从为获取的数据项开始获取,下面实现过程中的skip(n)是必要的,即传进来的参数为从第n项开始,我们在监听和触底传参都为当下数组的长度,因为当页面刚加载的时候数组长度为0,当触底的时候,数组长度恰为当前已经获取的数据项,所以之后就可以获取未获得的数据并于之前的数组合并。

loader函数实现

其实loader函数的实现才是触底加载功能的核心,正常情况下触底加载的逻辑是通过触底累加一个数字代表页码数,然后将页码数发送给服务端,服务端再将信息数组返回,我使用的是云开发,所以解决方案有所不同。

  • 调用wx云开发的api,skip(n)从集合的第n项开始获取 limit(n)获取至多n个元素。
  • 通过get获取相应数据,这里为n项后6个数据。
  • 通过cancat()实现数组的合并

需要注意的是这里的limit(n)直接使用是有20的长度限制,如果有刚需,需要获取20个以上的数据集合,那么我们可以在云函数中去解决。

loadBooks: function (n) {
        wx.cloud.database().collection('books').skip(n).limit(6).get().then(res => {
            console.log(res.data)
            this.setData({
                books: this.data.books.concat(res.data)
            })
        })
    },

触底加载动画

关于触底加载动画,我是在codepen参考的,只需要在触底的时候,将控制动画元素的变量更改,在数据获取成功的时候再改变即可,加载动画代码如下。

<view class="loader" wx:if="{{isLoader}}">
    <view class="dot"></view>
    <view class="dot"></view>
    <view class="dot"></view>
    <view class="dot"></view>
    <view class="dot"></view>
</view>
.dot {
    width: 24rpx;
    height: 24rpx;
    background: #3ac;
    border-radius: 100%;
    display: inline-block;
    animation: slide 1s infinite;
}

.dot:nth-child(n) {
    animation-delay: 0.1s;
    background: #6cd793;
}

@keyframes slide {
    0% {
        transform: scale(1);
    }
    50% {
        opacity: .3;
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}

触底加载的优点

在小程序中如果数据量过大,一次性获取会加重dom渲染的负担,不仅如此,响应的速度也会如龟速一样,所以为了用户的体验,良好的响应式交互是必要的,通过触底交互,按量加载数据,如下,我每次触底会加载八份数据,然后直到所有数据加载完毕,为空。

下拉刷新

小程序下拉刷新页面实现还是很容易的

  • 在相应页面的同级json文件中配置一下enablePullDownRefresh使其为true,这里是开启对应页面的下拉刷新设置

    {
      "usingComponents": {},
      "enablePullDownRefresh": true,
    }
  • 使用onPullDownRefresh监听用户下拉动作
    onPullDownRefresh: function () {},
  • 调用wx的加载api
    onPullDownRefresh: function () {
            console.log(1)
            //在标题栏中显示加载
            wx.showNavigationBarLoading()
            wx.showLoading({
                title: '刷新中...',
            })
            wx.cloud.database().collection('books').skip(0).limit(6).get().then(res => {
                this.setData({
                    books: res.data
                })
                wx.hideLoading();
                //隐藏导航条加载动画
                wx.hideNavigationBarLoading();
                //停止下拉刷新
                wx.stopPullDownRefresh();
            })
        },

    具体api相关介绍如下:

    • wx.showNavigationBarLoading()在导航条进行显示加载动画
    • wx.hideNavigationBarLoading()隐藏导航条加载动画
    • wx.stopPullDownRefresh()停止下拉刷新

最后

到此这篇关于微信小程序实现触底加载与下拉刷新的示例代码的文章就介绍到这了,更多相关小程序触底加载与下拉刷新内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

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

  • 微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)

    微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一) 页面缓存的设置优化了页面加载,减少了频繁的调取接口,使用户在断网的情况下有更好的体验. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localSt

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

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

  • 微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

    本文实例讲述了微信小程序实现上拉加载功能.分享给大家供大家参考,具体如下: 开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{item.title}}</

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

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

  • 微信小程序实现下拉刷新动画

    微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下 简易的效果 下面放代码: js: var animation = wx.createAnimation({}) var i = 1; Page({ data: { donghua: true, left1: Math.floor(Math.random() * 250 + 1), left2: Math.floor(Math.random() * 250 + 1), left3: Math.floor(Math.random()

  • 微信小程序 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

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

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

  • 微信小程序实现触底加载与下拉刷新的示例代码

    目录 触底加载 loader函数思考 loader函数实现 触底加载动画 触底加载的优点 下拉刷新 最后 在最近做小程序的时候有这么一个很常见的需求,加载一个信息列表,要求需要触底加载和下拉刷新,我突然想起来掘金小册界面和这个需求很相似,接下来我给大家介绍一下我的实现方案. 触底加载 步骤如下: 封装一个loader函数 在监听页面加载的时候触发这个loader函数 在监听到触底的时候再次触发这个函数 onLoad: function (options) { this.loadBooks(thi

  • 微信小程序实现触底加载

    现在来看小程序还没有使用pc端的那种分页格式,现在微信小程序上分页一般使用触底加载来实现分页的,下面就来分享一个触底加载的实现方式. 1.首先要从后端也就是服务器上获取分页的数据,如:每页多少条数据,一共分了多少页,大致内容如下图 既然有了数据,那就要在微信端去获取数据了 2.先不考虑分页,把获取到的数据直接显示到微信端 // pages/test/test.js //引入封装请求路径的模块 const orderApi = require('../../api/order') //设置当前页数

  • Android使用PullToRefresh实现上拉加载和下拉刷新效果的代码

    在没给大家介绍正文之前,先给大家介绍展示下运行图,如果大家感觉还不错,请继续往下阅读: 相关阅读:分享Android中pullToRefresh的使用心得 项目已同步至:https://github.com/nanchen2251/pullToRefreshDemo 简单使用详情: 1)studio可以直接在app的module设置中直接进行搜索,但是有-的必须添上,而不能用空格代替,为了更加了解这个东西,我还是推荐大家去这里看看,奉上网址: https://github.com/chrisba

  • 微信小程序中使用wxss加载图片并实现动画效果

    记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bW

  • 微信小程序清空输入框信息与实现屏幕往上滚动的示例代码

    微信小程序,是属于小程序的一种,英文名为Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用.微信小程序也是基于H5,JS的开发. 一. 清空输入框信息(重置输入框信息恢复默认值) 这是我在微信小程序实训开发的过程中出现的问题,多次思考后终于解决了输入框内已发送的消息无法被清空这个问题.从另一个角度说可以把清空输入框信息理解为重置输入框信息恢复初始默认值.以下是我的解决方案,希望对你们有所帮助. 首先

  • mui上拉加载更多下拉刷新数据的封装过程

    辗转用mui做了两个项目,空下来把mui上拉加载更多,下拉刷新数据做了一个简单的封装,希望可以帮助到需要的朋友 demo项目的结构 直接贴代码了 index.html mui上拉刷新下拉加载都这里了,两个方法搞定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device

  • iOS开发之UITableView与UISearchController实现搜索及上拉加载,下拉刷新实例代码

    废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableViewCell.h" #define kDeviceWidth [UIScreen mainScreen].bounds.size.width #define kDeviceHeight [UIScreen mainScreen].bounds.

  • 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded(); 有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位 分析原因: 首先这四个模块都是用的 <mt-loadmore :top-method="loadTop" :bott

随机推荐