精华内容
下载资源
问答
  • 主要为大家详细介绍了微信小程序动画实现下拉刷新动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 在全局的app.json中的window 配置 "enablePullDownRefresh":true,或者是给对应的page中的json文件中直接配置 "enablePullDownRefresh":true ...另外有一个下拉监听事件 onPullDownRefresh,将其放入js中,下.
    • 在全局的app.json中的window 配置 "enablePullDownRefresh":true,或者是给对应的page中的json文件中直接配置 "enablePullDownRefresh":true
      需要注意的是true,不是"true"

    全局的app.json中
    在这里插入图片描述
    对应page中
    在这里插入图片描述
    其中有一个"backgroundTextStyle": "dark"(参数有dark/light)是配置顶部有三个点闪烁的动画
    在这里插入图片描述

    另外有一个下拉监听事件 onPullDownRefresh,将其放入js中,下拉滚动的时候触发此事件。

    // 下拉滚动的时候触发此事件
    onPullDownRefresh() {
    	console.log("我刷新了")
    	wx.showNavigationBarLoading()//下拉的时候显示在 商城 前面的加载Loading小图标
    	 setTimeout(()=>{
            wx.stopPullDownRefresh() //停止当前页面下拉刷新状态。
    	 	wx.hideNavigationBarLoading() //隐藏加载Loading小图标
    	 },1000)
    }
    

    待续。。。

    展开全文
  • 主要为大家详细介绍了微信小程序实现下拉刷新和轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 实现下拉刷新

    千次阅读 2018-09-24 16:58:29
    下面博主将会为大家讲解下拉刷新的操作,最后附上源码! 以下是微信小程序项目源码:点击可以进入gitee直接下载源码包喔 微信小程序演示程序 版权所有,禁止转载,违者必究。 喜欢的朋友可以点赞评论喔,您的支持...

    下面博主将会为大家讲解下拉刷新的操作,最后附上源码!

    在这里插入图片描述

    在这里插入图片描述

    以下是微信小程序项目源码:点击可以进入gitee直接下载源码包喔
    微信小程序演示程序

    版权所有,禁止转载,违者必究。
    喜欢的朋友可以点赞评论喔,您的支持是我更新最大的动力~

    展开全文
  • 本文实例为大家分享了微信小程序实现列表下拉刷新上拉加载的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载...
  • 微信小程序支持下拉刷新,上拉直接默认页面效果判断到底即可。 1.下拉刷新要在app.json 配置 enablePullDownRefresh:true 1 2 3 4 5 6 7 "window":{  "backgroundTextStyle":"light",  ...
  • 主要介绍了微信小程序下拉刷新界面的实现的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下
  • 一、启用下拉刷新(两种方式) 1、全局下拉刷新 在app.json的window节点中,将enablePullDownRefresh设置为true 2、局部下拉刷新 在页面的json文件中,将enablePullDownRefresh设置为true 二、配置下拉刷新 在全局或...

    一、启用下拉刷新(两种方式)
    1、全局下拉刷新
    在app.json的window节点中,将enablePullDownRefresh设置为true
    2、局部下拉刷新
    在页面的json文件中,将enablePullDownRefresh设置为true
    二、配置下拉刷新
    在全局或页面的.json文件中,通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式,其中:
    backgroundColor:用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值
    backgroundTextStyle:用来配置下拉刷新loading的样式,仅支持dark和light两个颜色属性
    如图在页面的json文件进行的配置:
    在这里插入图片描述
    三、下拉刷新
    1、在data中定义存放列表的属性,用来接收获取的数据

    data: {
        goodsList:[], // 商品列表数组
        // 请求参数对象
        queryObj:{
          pagenum: 1,// 页码值
          pagesize: 10 // 每页显示多少条数据
        },
        // 总数量,用来实现分页
        total: 0
      },
    

    2、将页面跳转时携带的参数,转存到 queryObj 对象中:

      /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
    // 调用获取商品列表数据的方法
     	this.getGoodsList()
     },
    

    3、 定义获取商品列表数据

    //获取商品列表数据方法
    getGoodsList() {
        wx.showLoading({
          title: '数据加载中...',
        })
        wx.request({
          url: `https://www.dd.cn/${this.data.queryObj}`,
          method:'GET',
          success:({data:res})=>{
            console.log(res);
            this.setData({
              goodsList:[...this.data.goodsList, ...res.data],
              total:res.tolal
            })
          },
          // 无论获取数据是否成功都会执行该方法
          complete:()=>{
            wx.hideLoading() // 关闭loading
          }
        })
      },
    

    3、在页面循环数据,展示到页面(此处代码省略)
    4、下拉刷新事件

     /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        // 1. 重置关键数据
        let pagenum = 'queryObj.pagenum'
        this.setData({
          [pagenum]:1,
          total :0,
          isloading : false,
          goodsList : []
        })
    
        // 2. 重新发起请求
        this.getGoodsList()
      },
    

    四、上拉触底事件
    1、首先需要配置json文件,“onReachBottomDistance”: 150
    2、在onReachBottom上拉触底事件中处理

     /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
      	if(this.data.isLoading) return  //判断是否为true 
      	
      	let pagenum = 'queryObj.pagenum'
        this.setData({
          pagenum:pagenum += 1// 让页码值自增 +1
        })
        this.getGoodsList()// 重新获取列表数据
      },
    

    3、通过节流阀防止发起额外的请求
    3.1在 data 中添加 isloading 节流阀如下:

      data: {
    // 是否正在请求数据
        isloading: false
    }
    

    3.2修改 getGoodsList 方法,在请求数据前后,分别打开和关闭节流阀:

    // ** 打开节流阀
    getGoodsList() {
      this.setData({
          isLoading:true
        })
       // 省略中间代码,和前面一致
      wx.request({
       //...省略代码,和前面 3、定义获取商品列表数据 代码不变
      	// 无论获取数据是否成功都会执行该方法
          complete:()=>{
            wx.hideLoading() // 关闭loading
            this.setData({
              isLoading:false
            })
          }
      })
    }
    

    3.3 判断数据是否加载完毕,避免不必要的请求
    如果下面的公式成立,则证明没有下一页数据了:

    当前的页码值 * 每页显示多少条数据 >= 总数条数
    pagenum * pagesize >= total
    
     onReachBottom: function () {
    // 判断是否还有下一页数据
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {
      wx.showLoading({
          title: '数据加载完毕!',
        })
        wx.hideLoading() // 关闭loading
        return 
       }
      }
    

    上拉触底完整代码如下

    data: {
        goodsList:[], // 商品列表数组
        // 请求参数对象
        queryObj:{
          query: '',   // 查询关键词
          cid: '',   // 商品分类Id
          pagenum: 1,// 页码值
          pagesize: 10 // 每页显示多少条数据
        },
        // 总数量,用来实现分页
        total: 0,
        // 是否正在请求数据
        isloading: false
    },
    //获取商品列表数据方法
    getGoodsList() {
    	this.setData({
          isLoading:true
        })
        wx.showLoading({
          title: '数据加载中...',
        })
        wx.request({
          url: `https://www.dd.cn/${this.data.queryObj}`,
          method:'GET',
          success:({data:res})=>{
            console.log(res);
            this.setData({
              goodsList:[...this.data.goodsList, ...res.data],
              total:res.tolal
            })
          },
          // 无论获取数据是否成功都会执行该方法
          complete:()=>{
            wx.hideLoading() // 关闭loading
            this.setData({
              isLoading:false
            })
          }
        })
      },
       /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
      // 判断是否还有下一页数据
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {
      wx.showLoading({
          title: '数据加载完毕!',
        })
        wx.hideLoading() // 关闭loading
        return 
       }
      // 判断是否正在请求其它数据,如果是,则不发起额外的请求
      	if(this.data.isLoading) return 
      	
      	let pagenum = 'queryObj.pagenum'
        this.setData({
          [pagenum]:pagenum += 1// 让页码值自增 +1
        })
        this.getGoodsList()// 重新获取列表数据
      },
      
    
    展开全文
  • 我们主要配置两个文件就可以了,因为这是微信自己封装的刷新,很方便也很简单,不过限制也很多,可能有时候效果达不到我们的需求,那样我们自己就需要自定义封装一个了,这里只简单说一下微信下拉刷新的使用 json { ...

    先来看效果

    以上就是本次实现效果

    我们主要配置两个文件就可以了,因为这是微信自己封装的刷新,很方便也很简单,不过限制也很多,可能有时候效果达不到我们的需求,那样我们自己就需要自定义封装一个了,这里只简单说一下微信的下拉刷新的使用

    json

    {
        "enablePullDownRefresh": true,
        "backgroundTextStyle": "dark",
    }

    enablePllDownRefresh是下拉刷新功能

    backgroundTextStyle是三点动画效果,支持dark / light

    Js

    Page({
        data: {
    
        },
        /**
       * 数据初始化
       */
      getList: function() {
        wx.request({
          url: '',
          data: {},
          header: "",
          method: "GET",
          success: function(res) {
            
          }
        })
        // 隐藏loading提示框
        wx.hideLoading()
        // 隐藏导航条加载动画
        wx.hideNavigationBarLoading()
        //停止下拉刷新
        wx.stopPullDownRefresh()
      },
      onLoad: function (options) {
        this.openMap()
      },
      /**
       * 刷新操作
       */
      onRefresh: function() {
        // 导航条加载动画
        wx.showNavigationBarLoading()
        //loading提示框
        wx.showLoading({
          title: 'Loading...',
        })
        this.getList()
      },
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
        this.onRefresh()
      }
    
    })

    以上就是所有代码

    QQ群: 1102727334

    展开全文
  • 实现下拉刷新 1.使用组件scroll-view 参照小程序官方文档,采用scroll-view组件实现可滑动区域的加载。具体声明如下所示,主要使用bindscrolltolower事件实现下拉加载。 <scroll-view scroll-y="true" style=...
  • 微信小程序scroll-view下拉刷新(附带下拉刷新效果) 使用说明 https://blog.csdn.net/u012308481/article/details/102619511
  • 主要介绍了微信小程序实现页面下拉刷新和上拉加载功能,结合实例形式分析了微信小程序页面下拉刷新和上拉加载相关事件监听与功能实现操作技巧,需要的朋友可以参考下
  • 这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景。 概念: 下拉刷新是...
  • 本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下 js代码 var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endselect: "", //...
  • 微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多
  • 微信小程序,两种方式实现上拉加载,下拉刷新,用于列表展示数据
  • 微信小程序——关于下拉刷新 近期在做一个微信小程序的开发项目。其中一个需求就是,下拉刷新。这个功能可以应用于许多场景,譬如,当执行下拉刷新时,页面可以重新加载,数据重新更新。 在上传头像,修改资料,或者...
  • 微信小程序代码-下拉刷新,tab切换功能.zip,小程序模板代码,可以直接从源码里粘贴复制过来,虽然这样做不利于自己独立编写代码。
  • 最近10几天都在学习小程序的开发,遇到了一些问题和笔记有趣的东西,今天总结了一下,和大家分享 1.小程序中的template模块使用 在一个月黑风高的夜晚,我突然发现一个很有意思的东西,那就是template模块,它可以将...
  • 开发中,有时列表使用来实现滚动效果,然而在实现上拉加载,下拉刷新 的时候,希望可以在中来实现拖拽效果,而不是使用wx.startPullDownRefresh()去展示整个页面的拖拽。 这里选择使用 bindtouchstart ...
  • 下拉加载下一页: 应用场景:刷新列表数据。 在app.json文件或页面对应的JSON文件中配置"enablePullDownRefresh": true; //下拉加载下一页 onPullDownRefresh(){ let _this = this; //判断到是最后一页,则...
  • WeChartPullToRefreshListView 微信小程序实现类似android下拉刷新上拉加载更多ListView 下拉刷新 上拉加载更多

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,887
精华内容 3,954
关键字:

微信小程序实现下拉刷新

微信小程序 订阅