[小记] 微信小程序 scroll-view 组件下拉刷新、动态高度计算

最新推荐文章于 2024-08-08 09:23:31 发布

"William'_

最新推荐文章于 2024-08-08 09:23:31 发布

阅读量960

点赞数

分类专栏：微信小程序文章标签： js 小程序

本文链接：https://blog.csdn.net/weixin_44731536/article/details/110226100

版权

本文介绍了微信小程序中使用scroll-view组件遇到的下拉刷新问题及其解决方案。通过设置`refresher-enabled`和`refresher-triggered`属性，配合`bindrefresherrefresh`事件实现自定义下拉刷新功能。此外，还探讨了scroll-view组件高度计算的技巧，特别是在处理rpx单位转换时的方法。请注意，这些功能需要在真机调试环境下才能正常工作。

摘要由CSDN通过智能技术生成

微信小程序 scroll-view 组件下拉刷新

当使用了scroll-view组件之后，该页面便不能下拉刷新了。根本拉不动！
参考：微信小程序之scroll-view组件下拉刷新_小聂的奋斗之旅-CSDN博客

页面下拉事件说明

此时可以使用 scroll-view 组件自定义下拉刷新属性完成下拉刷新操作。

<scroll-view
	refresher-enabled="true"
    refresher-triggered="{
    {triggered}}"
    bindrefresherrefresh="scrollRefresh"
    class="scroll-box"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

"William'_

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

小程序scroll-view区域滚动计算可滚动高度

guairena的博客

01-08

3065

需求： 微信小程序区域滚动，头部是标题、日期切换、下面是表头，可滚动的只有列表表体的内容；通过scroll-view组件实现表体内容的区域滚动。思路：列表页主要有标题、日期时间切换、列表表头在滚动的时候是不能动的，只有表体的数据内容可以区域滚动。表体的内容写在<scroll-view></scroll-view>组件里。在列表页还可以切换到图表页；图表页的头部和列表共用，相当于筛选条件是一样的。图表需要滚动的也要放到<scroll-view></scr

scroll-view高度计算

qq_41241504的博客

04-26

390

<scroll-view scroll-y="{true}" style="height:{{scroll_height}}rpx"></scroll-view> onLoad: function (options) { let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度 let windowWidth = wx.getSystemInfoSync().windowWidth ...

参与评论您还未登录，请先登录后发表或查看评论

使用scroll-view时获取适合的高度

最新发布

qq_57170741的博客

08-08

391

计算scroll-view高度

diangedan的专栏

10-21

461

滚动高度

使用scroll-view计算页面剩余高度

weixin_59803648的博客

07-28

510

使用scroll-view计算页面剩余高度

微信小程序scroll-view中的坑（因为动态设置高度导致无法下拉）

zhoulib__的博客

07-22

3569

微信小程序中使用scroll-view时，一般都是需要自行设置高度，因为不设置的话，显示的老小了，但是设置高度的话给一个定值也不合适，一般在移动端上面，界面通常是正好铺面当前的屏幕的大小，代码主要使用 calc这个计算 css 首先获取当前scroll-view组件在屏幕中位置像这样 data: { top:'', }, let query = wx.createSelectorQuery() query.select('.scroll-view').boundingCl

微信小程序scroll-view下拉刷新(附带下拉刷新效果)

11-19

总之，通过结合`scroll-view`组件和微信小程序的API，我们可以轻松实现具有下拉刷新功能的界面，为用户提供更加流畅的数据更新体验。在实践中，开发者可以根据需求调整和扩展这个功能，打造更加个性化的交互设计。

微信小程序scroll-view组件实现滚动动画

08-28

微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...

解决微信小程序scroll-view换行问题

01-03

今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： ...在网上搜索了一下小程序scroll-view文字不能换行的问题后，发现原来是小程序组件有一个默认的样式 white-space: nowr

微信小程序scroll-view点击项自动居中效果的实现

10-15

在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它允许用户在内容超过屏幕范围时进行滚动浏览。在某些场景下，我们可能需要实现一个功能，即当用户点击`scroll-view`内的某一项时，该选项能够自动滚动到...

uniapp使用scroll-view自动计算剩余高度实现滚动效果

qq_43640535的博客

08-17

1596

uniapp使用scroll-view自动计算剩余高度

关于scroll-view和下拉刷新的那些坑

03-29

众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的高度时，给页面一个固定导航，并且还要执行下拉加载的方法。由于在官方文档的说明中，使用竖向滚动时，需要给<scroll>一个固定高度，通过 WXSS 设置 height。但是设置了高度的时候，下拉加载的方法就不好使了。这时候我们要根据滚动的高度来设置不同的高度，部分代码如下： <scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol

微信小程序中scroll-view中不设定高度实现自动滚动

09-17

在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度，现通过样式和布局实现高度自适应不设定高度

支付宝小程序计算scroll-view高度占满屏幕高度（底部）

C_zhihao的博客

07-12

1402

要实现一个顶部卡片加tab栏，然后下面是个到底部的scroll-view，如下图中商家和评价所在的tab要求固定不动往常不考虑滚动时顶部不动的时候都是比较随意的把scroll-view的高度给的大一点，但是这次要求顶部是不动的，于是就需要计算一下实际的scroll-view的高度，实现起来很简单，并没有比百度上所说的css的方式复杂多少，代码如下：需要注意的是，支付宝小程序回调函数是放在exec()中执行的，和微信小程序不同 onReady(){ this.computeScr.

小程序中的scroll-view 自动计算高度

weixin_49409651的博客

06-29

567

困扰自己很就，也查了很多资料，原因是因为 scroll 高度没给准确导致page 会带着scroll滚动 background: linear-gradient(0deg, rgba(255, 255, 255, .3), $themeColor); display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; line-

小程序动态获取组件高度(自定义Tabbar的高度)

lindali1115的博客

05-22

3242

1.tabbar组件ready方法中 ready() { // 缓存tabber栏的高度 const query = wx.createSelectorQuery().in(this) query.select('.tabbar').boundingClientRect((rect) => { // console.log(rect.height) wx.setStorageSync('tabbberHeight', rect.height) }).exec()

小程序 - 处理scroll-view组件的高度问题