zoukankan      html  css  js  c++  java
  • 【微信小程序】转载:微信小程序实战篇-下拉刷新与加载更多

    下拉刷新

    实现下拉刷新目前能想到的有两种方式 
    1. 调用系统的API,系统有提供下拉刷新的API接口 

    当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下拉刷新了,因为系统默认是不具备下拉刷新功能的 
    下拉刷新API.png 
    2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个bindscrolltoupper属性吗?忘记请自行回顾上一篇 微信小程序实战篇-电商(二)当滚动到顶部/左边,会触发 scrolltoupper 事件,所以我们可以利用这个属性,来实现下拉刷新功能。

    两种方法都可以,第一种比较简单,易上手,毕竟一些逻辑系统已经给你处理好了,第二种适合那种想要自定义下拉刷新样式的小程序,我们讲解电商,就用第一种,系统提供的就好,主要是教会大家怎么用。以首页为例 
    1. home.json 参数配置

    "enablePullDownRefresh": true
    • 1

    我们哪个页面需要下拉刷新,就在哪个页面对应的xxx.json文件配置上面属性,这个属性从字面意思也可以知道,是否允许下拉刷新,

    当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下拉刷新了,因为系统默认是不具备下拉刷新功能的 
    2. home.js

    
      //下拉刷新
      onPullDownRefresh:function()
      {
        wx.showNavigationBarLoading() //在标题栏中显示加载
    
        //模拟加载
        setTimeout(function()
        {
          // complete
          wx.hideNavigationBarLoading() //完成停止加载
          wx.stopPullDownRefresh() //停止下拉刷新
        },1500);
      },

    效果图-1.gif

    onPullDownRefresh 下拉刷新事件监听,具体看一下里面的代码,wx.showNavigationBarLoading() 与wx.hideNavigationBarLoading() 这两句话是用来控制小菊花的显示和隐藏,由于我们现在还没有讲解网络请求,所以我就模拟了一下网络加载,通过setTimeout方法,写一个时间延迟的方法,这个方法可以模拟网络加载所消耗的时间,还有就是当网络加载完成我们要停止下拉刷新wx.stopPullDownRefresh() 。

    这个到目前为止下拉刷新的功能已经完成了,但是还不够完美,还是有点怪怪的,就是下拉刷新没有动画,有木有~我那时也感到奇怪,微信封装的下拉刷新怎么可能这样呐,后来我参考别人写的代码,发现一个小坑,先看一下我填完坑的效果吧

    效果图-2.gif 
    怎么样,是不是顺眼多了,想知道我是怎么加入这个动画的嘛,让我来给你揭晓,其实很简单,只需要一句话代码在app.json中window里配置下面属性,这个是配置整个系统的背景颜色,为什么我配置系统颜色就会出现下拉刷新了呐,原因就在下拉刷新的动画本身就有,只不过当我们没配置背景颜色,系统默认就为白色,动画也是白色,所以我们就看不到动画效果,是不是有点坑,哈哈~~

    "backgroundColor": "#f0145a"
  • 相关阅读:
    个人冲刺二(7)
    个人冲刺二(6)
    个人冲刺二(5)
    个人冲刺二(4)
    对称二叉树 · symmetric binary tree
    108 Convert Sorted Array to Binary Search Tree数组变成高度平衡的二叉树
    530.Minimum Absolute Difference in BST 二叉搜索树中的最小差的绝对值
    pp 集成工程师 mism师兄问一问
    17. Merge Two Binary Trees 融合二叉树
    270. Closest Binary Search Tree Value 二叉搜索树中,距离目标值最近的节点
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/8043508.html
Copyright © 2011-2022 走看看