微信小程序页面左右滑动与上下拉刷新的实现方案

最新推荐文章于 2024-06-05 07:15:00 发布
最新推荐文章于 2024-06-05 07:15:00 发布
阅读量8.4k 收藏 7
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012597860/article/details/79311951
版权
本文介绍了微信小程序中实现页面上下拉刷新和左右滑动的策略。针对page和scrollview的刷新机制进行了详细说明，包括page的onPullDownRefresh和onReachBottom方法，以及scrollview的bindscrolltoupper和bindscrolltolower事件。同时，讨论了页面滑动冲突问题及解决办法，并提出了在不同页面滑动需求下的实现思路。
摘要由CSDN通过智能技术生成

关于上下拉刷新

微信小程序官方建议使用page的上下拉刷新，那么什么时候会触发上下拉刷新呢

page页面上下拉刷新

下拉.jpg

  • 下拉

通过向下滑动页面即可触发page页面的onPullDownRefresh方法

  • 上滑

上滑的触发分两种情况

  • 内容不能充满page
    • 此时你第一次上拉会触发一次onReachBottom
      • 解析：
      • 微信这么做的原因是可以让我们在这里进行一次处理提醒用户
    • 再次上拉不会触发
  • 内容充满page
    • 通过上滑即可触发page页面的onReachBottom方法

scrollview上下拉刷新

scrollview的上下拉刷新是通过方法bindscrolltoupper与bindscrolltolower，更过相关的细节请参考微信小程序scrollview组件

注：scrollview的上下拉刷新并没有页面下拉滑动长条那种显示，只是单纯的触发，如果你想有那种效果需要自己去实现（基于o

最低0.47元/天 解锁文章
傲羽鸿蒙
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序 实现上滑刷新
何小杰的博客
09-24 5364
下面博主将会和大家图文讲解怎么实现微信小程序上滑刷新的，最后附上源码！ 实现上滑加载更多数据 上滑滚动视图 名词： 对于PC端。是 ：下拉刷新 对于手机端是：上滑加载更多 方向是不一样的 json 中的backgroundcolor 是设置的是下拉或者上滑多出来的窗口的颜色 当从navigationto跳转的子页面跳回去到主页面之后，子页面的appdata就会清除掉 除了app.jso...
微信小程序实现卡片层叠滑动效果
10-16
主要为大家详细介绍了微信小程序实现卡片层叠滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序顶部搜索栏随界面滑动变换
XXCJLRC的博客
02-08 1269
微信小程序顶部搜索栏随界面滑动变换
【微信小程序开发】小程序中的上滑加载更多，下拉刷新是如何实现的？
最新发布
景天科技苑
06-05 2万+
小程序是如何实现下滑加载更多数据，下拉刷新页面的，本文就来详细探讨一下。
微信小程序页面上下滚动、左右滑动（二）
harmsworth的博客
09-20 9340
系列文章目录 微信小程序页面上下滚动、左右滑动（一） 文章目录系列文章目录前言项目结构解决问题11.pretest页面2.test页面解决问题2总结参考 前言 在上一篇文章，讲解了再微信小程序中如何实现页面上下滚动、左右滑动。但是，此处有2个缺陷。 当有多少个可以滑动的页面时，就会渲染多少个组件 当快速的左右滑动时，swiper 会出现卡死（无限循环滑动）的现象 那么我们可以考虑在每次渲染 swiper-item 时，最多渲染 3 个，动态生成可滑动的页面，于是就做出了如下效果的页面。 最多只有 3 个
微信小程序实现页面上拉触底事件下拉刷新
abcdef_520的博客
08-29 622
小程序刷新加载下一页数据
详解微信小程序开发之下拉刷新 上拉加载
11-26
在微信小程序开发中，下拉刷新（Pull-to-Refresh）和上拉加载（Infinite Scroll）是提升用户体验的重要功能，特别是在展示大量数据列表时。本文将深入探讨如何使用`scroll-view`组件实现这两种功能。 首先，`scroll...
微信小程序页面上下滚动效果
10-16
在微信小程序中，实现页面上下滚动效果是一种常见的交互设计，它能提供良好的用户体验，使得用户可以轻松浏览和导航多内容的页面。以下我们将详细探讨如何在微信小程序中创建这种滚动效果。 首先，我们需要理解微信...
微信小程序 实现列表刷新的实例详解
01-03
 微信小程序，最近自己学习微信小程序的知识，就想实现现在APP 那种列表刷新，下拉刷新，上拉加载等功能。  先开看一下界面 1.wx.request （获取远程服务器的数据，可以理解成$.ajax） 2. scroll-view的两个事件...
微信小程序列表的上拉刷新和上拉加载
06-12
通过以上内容，我们可以了解到微信小程序中如何实现上拉刷新和上拉加载更多功能。这两个特性不仅提升了用户体验，也使得数据展示更加灵活。在实际开发中，还需要根据具体需求进行优化，比如添加加载动画、错误处理等...
微信小程序 刷新上拉下拉不会断详细介绍
01-03
微信小程序 上拉下拉不会断详细介绍 最开始看到效果图，不错，第一想到的是用做的，添加浮动层，然后设置浮动层高度。其实不然，大牛是”enablePullDownRefresh”: “true”后，在页面添加遮掩层，并跟随底部滑动...
微信小程序 页面如何自动滚动到底部
qq_45475788的博客
12-29 3519
1、页面增加标签<scroll-view></scroll-view> 2、写函数： // 页面滚动到底部 pageScrollToBottom: function() { wx.createSelectorQuery().select('#body-view').boundingClientRect(function(rect){ // 使页面滚动到底部 wx.pageScrollTo({ scrollTop: rect.h
小程序基本命令
aiven1637的博客
10-30 3282
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序 - 实现导航栏和内容上下联动功能
qq_51210812的博客
09-25 1209
一、实现过程：   主要是使用 scroll-view 实现导航栏部分，用 swiper 实现下面的内容部分，通过 swiper 的 current 属性和导航栏的 index 相互对应来实现导航栏部分切换时内容部分跟随切换；通过 swiper 的bindchange 事件拿到当前轮播的索引，对应赋值实现导航栏随着内容切换的效果。 注意: current： 控制当前显示的页index索引; bindchange：current发生改变触发的方法； s...
微信小程序——onPullDownRefresh (下拉刷新)
qq_43201350的博客
01-23 9296
思路 onPullDownRefresh (下拉刷新) 1 当前页面数据置空 2 当前页码重置为1 3 重新请求页面数据接口 */ // 下拉刷新 onPullDownRefresh() { console.log('我下拉刷新了'); // 重置数组 this.setData({ goodsList: [] }) // 重置页码 this.params.pagenum = 1 // 发送请求 this.getList(
微信小程序禁止页面上下滑动的三个方式
热门推荐
小鱼的博客
06-29 2万+
开发的时候，会遇到产品或者UI发出如下规定：1、如果是一屏的页面，就禁止页面能上下滑动2、如果显示弹窗的时候，长屏幕禁止上下滑动！感叹一句：好变态当然，感叹归感叹，但是还是得听不是，我找出了3种方式，看看大家喜欢哪个，就用哪个！第一种方式：页面最外层的盒子，使用绝对定位！这样页面也就不能滑动了！此方法呢，比较麻烦，写的代码比较多！但是还是能够实现的！源码如下： 第二种方式：在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json
微信小程序，滚动条回到顶部，点击按钮的时候，让滚动条回到顶部scroll-top
笑到世界都狼狈的博客
01-05 4259
首先官方文档中有介绍scroll-view的相关属性：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 我们可以看到scroll-view中存在属性scroll-top="0"可以让滚动条回到顶部，但是实际操作中，我们往往需要在某些特定操作后让滚动条回到顶部 下面以点击按钮，让滚顶条回到顶部为例，写一个简单的实现代码： scroll.wxml: <view class="homes">
微信小程序实现下拉刷新首页数据、上拉加载下一页数据
花铛
02-27 4666
原因：之前的页面可能是未被销毁，仍然在页面栈中，因此切换回来之后还保持之前的状态。解决方法：切换回来页面之后，首先清空。滚动条没有回到顶部的情况。切换页面，可能会出现。
微信小程序全屏视频上下滑动
05-02
实现微信小程序全屏视频上下滑动的方法如下： 1. 首先，在页面的 json 文件中设置 enablePullDownRefresh 属性为 true，这样就可以开启下拉刷新功能。 2. 在 wxml 文件中，使用 video 标签来展示视频，并且设置宽度为 100%，高度为屏幕高度，这样就可以实现全屏播放视频。 3. 在 js 文件中，使用 wx.createSelectorQuery() 来获取屏幕高度，然后动态设置 video 标签的高度为屏幕高度。 4. 在 js 文件中，监听页面的触摸事件，当用户向下滑动时，触发下拉刷新函数，并且暂停视频播放；当用户向上滑动时，恢复视频播放。 下面是一个简单的实现示例代码： 1. json 文件： ``` { "enablePullDownRefresh": true } ``` 2. wxml 文件： ``` <video src="your_video_url" controls style="width: 100%; height: {{videoHeight}}px;"></video> ``` 3. js 文件： ``` Page({ data: { videoHeight: 0 }, onLoad: function () { const that = this; wx.createSelectorQuery().select('body').boundingClientRect(function (rect) { that.setData({ videoHeight: rect.height }) }).exec(); }, onPullDownRefresh: function () { wx.stopPullDownRefresh(); // 暂停视频播放 }, onPageScroll: function (e) { if (e.scrollTop < 0) { // 恢复视频播放 } } }) ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值