关于scroll-view 的 scrollTop无效问题

最新推荐文章于 2024-03-10 16:15:39 发布
最新推荐文章于 2024-03-10 16:15:39 发布
阅读量2k 收藏
点赞数
分类专栏： 遇到的问题 微信scrollTop无效 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35451130/article/details/123047951
版权

今天研究了以下小程序滚动高度的问题，刚开始用scroll-view来设置滚动高度，并且点击其他导航按钮让其置顶的问题，发现scroll-top设置无效的问题，在之前的时候可以通过bindscroll的绑定事件可以设定，但是小程序的版本可能改了，出现了一个api 叫wx.pageScrollTode api

下面给大家看一下写的代码，首先在wxml里面需要用到滚动的容器用scroll-view包裹起来，
在这里插入图片描述
在data当中定义scrollTop的数值，0或者-1都可以，
在这里插入图片描述
可以监听以下滚动的scrollTop的数值
然后在需要点击的按钮绑定点击事件，
在这里插入图片描述
调用wx.pageScrollTo的api就可以设置了里面的scrollTop的数值为0或-1，尽量和data中定义的不要相同， duration是过渡动画时长。就可以实现了

小码家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview
2401_84447417的博客
04-29 982
ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1。
微信小程序页面回到顶端的方式
m0_52387040的博客
04-05 5648
文章目录前言一、用scroll-view标签实现回到顶端二、用pageScrollTo回到顶端总结 前言 <scroll-view> </scroll-view> wx.pageScrollTo({ duration: 0, }) 当没有scroll-view标签的时候 wx.pageScrollTo是可以实现回到顶端的 但是有scroll-view标签的时候wx.pageScrollTo就会失效了 但是wx.pageScrollTo可以控制回到顶端动画的
scroll-view中通用属性scroll-top的使用
最新发布
qq_51528868的博客
03-10 724
当浏览该按钮对应的数据，使数据滚动（竖向）到非第一条数据时，切换按钮，却发现数据没有返回到第一条数据，而是停留在了上一个按钮浏览的位置，怎么处理这种出现的情况，使每次点击不同的按钮，都能使数据显示第一条数据。需要注意的是，先设置scroll-top为-1在设置为0，才能检测到数据的变化，才能够让scroll-view真正的滚过去。使用竖向滚动时，需要给scroll-view一个固定高度。通过使用scroll-view中的通用属性scroll-top设置竖向滚动条位置为0。
微信小程序 scrollview 滚动到指定位置
天问博客-专注于大前端技术
11-29 7039
在微信小程序中，实现 ScrollView 滚动到指定位置有多种方法，下面将介绍三种主要的实现方式。
scrollTop设置不起效果的几种原因
热门推荐
smallNut的博客
01-17 1万+
今天在写需求的时候遇到一个要将表格的滚动条在进行路由跳转时固定的操作，然后没想到居然在scrollTop这个属性的设置上栽了坑，关于此问题的原因网络上的解释也五花八门，各不相同 这里我们以下图demo为例，给大家解释一下设置scrollTop属性设置无效可能会遇到的几个原因 1.父，子元素需设置高度，并且子元素高度必须大于父元素 这一点应该很好理解，如果子元素高度始终小于父元素，那么无论怎么设置scrollTop的值都不可能大于0 2.父元素需设置overflow: scroll 或 overflow-y：
微信小程序scroll-view滚动scrollTop不准确
woshiabc111的博客
05-16 1973
如果在方法内写this.setData这种赋值的操作小程序可能会卡死无法滑动，建议在scrollTop到达一定数值后在进行操作，比如scrollTop=0先判断时候滑动到顶部或者底部，再来控制其他view的显示隐藏。1.这是因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流可以在scroll-view 加一个 throttle=“{{false}}” 关闭节流。2.减少scroll方法内的操作因为scroll-view内随便滑动一下监听事件可能。小程序里使用scroll-view。
微信小程序scroll-view滚动条始终再最底部，实现自动滚动的效果
yueyue1111111的博客
07-06 6322
微信小程序scroll-view的使用
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的...scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： ...在网上搜索了一下小程序scroll-view文字不能换行的问题后，发现原来是小程序组件有一个默认的样式 white-space: nowr
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
微信小程序完美解决scroll-view高度自适应问题的方法
10-14
主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
微信小程序scroll-view组件使用scroll滑动事件中的scrollTop有时不为0的问题
wcxrib的博客
01-21 634
解决方法：添加throttle="{{false}}" 属性，关闭官方默认节流，保证scroll事件能全部触发，自己实现节流即可。uni-app语法 :throttle="false"。问题： scroll-view的scroll滑动事件，经常会有这样的问题：scroll-view滑动到顶部后，最后的事件中的scrollTop不为0 、toupper事件也没有收到等。原因：scroll-view组件自带节流，所以滑动过快时，会出现滑到顶部，scrollTop不为0的bug。
uni-popup中使用scroll-view不起作用
weixin_52934055的博客
07-06 2304
遮罩层样式
scroll-top不会生效的原因
weixin_64974855的博客
06-07 269
/如果scrollTop赋值与原来的值一样，scroll-top是不会生效的。
安卓开发——问题：ScrollView滚动过程中调用scrollTo()无效
萌鼠喝酸奶的博客
02-18 1692
最近遇到一个问题，记录一下。 业务场景：一个复用的可滑动页面，每次进入页面需要重置定位至顶部，实现方式是在页面退出时执行scrollView.scrollTo(0,0)。 问题：快速滚动后，即页面还处于惯性滚动，立即退出页面，再次进入页面，页面位置未重置到顶部。 原因：scrollTo()被惯性滚动效果覆盖，不生效。 处理：由于ScrollView没有提供可以用来停止滚动的方法，只能通过其他方式尝试解决，最后发现调用smothScrollTo()可以打断惯性滚动，又由于需要ScrollView快速重
taro（小程序一样） ScrollView 滚动到底部或者顶部 再次设置scrollIntoView 无效
zw19940808的博客
11-19 3600
小程序 ScrollView 滚动到底部或者顶部 再次设置scrollIntoView 无效
uniapp微信小程序scroll-view头部固定在页面上，不会随着页面滚动而移动
weixin_38905666的博客
03-21 3104
scroll-view，顶部定位
ios系统微信小程序scroll-view划不动的问题
每天都记录一点点！
02-04 5394
这段时间开发个微信小程序的点餐系统，因为只需要小程序版本，所以就用原生的小程序写了，过程中遇到了几个问题和坑，就总结一下，方便来后者。 商品分类和商品列表的左右联动，像美团和饿了么那样的交互，点击某个分类滑动到对应的商品列表，随意滑动商品列表商品分类也会做对应的切换，我个人的实现方案如下： 要用到scroll-view的to-view属性 每个商品的高度都是固定的，所以要开始计算好每个类目对应的商品列表的高度，在滑动商品的时候实时获取scrollTop,然后再让商品分类列表做对应的切换 主要代码如下：
scroll-view无效
08-10
scroll-view无效可能是由于以下几个原因造成的： 1. scroll-view组件的高度设置不正确：如果scroll-view组件的高度没有正确设置，scroll-into-view属性可能会失效。您可以通过设置scroll-view组件的高度为固定值或使用wx.getSystemInfoSync()获取屏幕高度来解决该问题。123 #### 引用[.reference_title] - *1* *3* [微信小程序scroll-view的scroll-into-view无效问题解决办法](https://blog.csdn.net/weixin_55109596/article/details/129023944)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [微信小程序scroll-view的scroll-into-view无效如何解决](https://blog.csdn.net/weixin_42065274/article/details/104814681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值