小程序下拉刷新问题（如何解决小程序下拉刷新问题）

在小程序中，onload 生命钩子仅在页面创建时调用一次。 导航到页面跳转后，返回上一级页面。 跳转导航只是隐藏当前页面，所以返回首页时会调用onload lifehook。 它永远不会再运行。 这样做的好处是可以更快地显示页面，但是onload中的请求数据并不是实时更新的。 目前，手动更新页面数据需要下拉刷新操作。 接下来，本文将向您介绍三种在小程序中实现下拉刷新的方法。

enablePullDownRefresh

enablePullDownRefresh是实现下拉刷新最简单的方法。 在json文件中将enablePullDownRefresh设置为true，并监听页面的onPullDownRefresh事件。 支持点击顶部标题栏返回顶部。 如果自定义标题栏则无效。 也可以直接调用wx.startPullDownRefresh()来触发下拉更新事件，生成下拉更新动画。 使用下拉刷新处理数据刷新后调用wx.stopPullDownRefresh。 () 结束动画。 这种下拉更新形式的优点显然是简单且不受限制，但缺点也很明显。

下拉动画过于简单，交互不够精致，且下拉动画不可自定义。 Android下自定义标题栏的时候，位置是固定的，标题栏也是一起下拉的。 scroll-view

scroll-view 是官方的滚动视图组件。 它非常容易使用。 如果要设置上拉更新代码，代码为：

content

如果想使用scroll-view实现上拉更新，请注意以下：

确保滚动-视图集的高度保持固定。 否则监听事件不会被触发。 设置垂直滚动。 滚动-y 滚动-vIEW 的内容高度必须高于滚动-视图高度。 否则，不会发生垂直滚动，也无法触发监听事件。

Scroll-view 缺点：

由于 iOS 存在橡皮筋效果，最终效果与 Android 略有不同。 第一次打开页面时无法触发上拉监听事件。 要触发滚动，必须先向下滚动，然后向上拉并再次滚动才能触发监听事件。 如果您有自定义标题，则滚动-view需要计算高度减去头部高度。

scroll-view的优点：

自定义加载动画代码相对容易。

EnablePullDownRefresh，scroll-view适合列表滚动。 控制更方便。

scroll-into-view：滚动到指定元素。 enable-back-to-top ：iOS点击顶部状态栏、Android双击标题栏时，滚动条返回顶部，仅支持垂直方向，自定义时标题栏禁用

官方不鼓励使用滚动 - 更新视图中的下拉列表。 官方文档中有这样的提示。

自定义下拉更新

我们想要通过自定义下拉更新解决的主要问题是，当在Android上使用固定位置标题栏或enablePullDownRefresh时，导航栏会被下拉。 。 同时，下拉更新时两端的动画保持不变。 虽然是一致的，但实施起来其实并不难。 我们看一下具体实现： wxml:

{{state === 0 ? 下拉并更新' : state = == 1? '发布并更新' : '更新中'}}

该文件定义组件的模板。 它有一个滚动视图包，在下拉更新期间绑定到带有动画的触摸事件，以及一个用于插入滚动列表内容的插槽。 wxss:

.animation { display : flex; -对齐内容: 居中; 宽度: 150rpx; 边距: [k3 ]150rpx; -颜色：# fff;}.loading {宽度：30rpx；边框：6rpx 实心#333333；边框-底部：#cccccc 6rpx 实心；加载动画： 1.1 秒无限线性; @keyframesload{from{transform:rotate(0deg); } to{ Transform: 旋转（360 度）; }}.tip { margin-left: 10rpx;}

样式文件这没什么特别的 js:

let lastY = 0 // 最后滚动位置 letscale = 750 / wx.getSystemInfoSync().windowWidth // rpx 转换率 Component( { options : { multipleSlots: true }, data: {scrollTop : 0, TranslationHeight: 0, // 移动距离 state: -1 }, properties: { // 触发下拉更新的距离 upperDistance: { type: Number, value: 150 } },methods: { // 观察滚动并获取scrollTop onPageScroll (e) { this. scrollTop = e.scrollTop }, touchStart (e) { lastY = e.touches[0].clientY }, touchMove (e) { let clientY = e.touches[0].clientY let offset = clientY - lastY if ( this.data.scrollTop > 0 || 偏移 this.data.upperDistance) { this.data.state = 1 } this.setData({ TranslationHeight: this.data.translateHeight, 状态: this.data.state }) }, touchEnd (e) { if (this.data.translateHeight - this.data.scrollTop *scale > this.data.upperDistance) { this.setData({translateHeight: 150 }) this.triggerEvent('scrolltoupper') this.setdata({state: 2}) e​​lse if (this.data.scrolltop {wx.pagescrollto({scrolltop: 0,uration: 0

这个下拉刷新组件最重要的就是控制代码定义何时更新下拉，使用下拉的更新距离来决定是否执行更新，并在touchEnd事件中，检索并显示手指滑动时走过的距离，判断滑动距离是否达到设定值，如果是则发送scrolltoupper事件，否则更新停止。 onLoad: function () { this.refreshScroll = this.selectComponent( '#refreshScroll') for (let i = 0; i { wx.hideLoading() }, 1000) },fresh: function (e) { setTimeout( () => { this.refreshScroll.stopRefresh() }, 1000) }})

使用时的关键点是在页面上放置onPageScro传递ll检索到的值，bindscrolltoupper监听scrolltoupper事件，执行更新操作，然后调用stopRefresh停止更新。 我们来看一下真​​机上的测试结果： iOS：

Android：

在真机上测试时，性能相当不错。 当然，这只是一个用于自定义下拉更新的简单组件的示例。 如果你需要在实际项目中使用它，你可能需要自己改进。 毕竟不一样了。 不同的人有不同的应用场景。 这只是一个想法。

概述

本文介绍了小程序中更新下拉列表的三种方法。 前两个是小程序官方提供的。 最后一是我个人的一些想法的总结，写得比较简单。 如果你想将它应用到你的项目中，你仍然需要自己改进它。 我希望我能为您提供一些进行自定义下拉更新的想法。

推荐教程：《微信小程序》

PHP快速学习视频免费教程（从入门到精通）

如何学习PHP？应该去哪里学习PHP？如何才能快速学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 微信小程序开发中var that =this的基本用法
• 小程序瀑布流（小程序中瀑布流的实现）
• 回想一下Android智能手机上的微信小程序白屏问题（手机上打开小程序时白屏）。
• 可以转发微信小程序给好友（微信小程序可以转发分享到朋友圈吗？）
• 使用applet canvas编写一个简单的图片应用程序（applet canvas生成海报）

本文由主机参考刊发，转载请注明：小程序下拉刷新问题（如何解决小程序下拉刷新问题） https://zhujicankao.com/123735.html