移动端和小程序中有关scrollTop的不同用法

最新推荐文章于 2024-01-21 21:36:10 发布
最新推荐文章于 2024-01-21 21:36:10 发布
阅读量2.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41719836/article/details/89917365
版权

需求是这样的：点击屏幕右侧的字母，页面会滑动到指定字母的区域。类似微信中通讯录的页面，效果图如下

移动端中用的js可以获取document,代码如下

小程序中用的typeScript,不能获取document,所以不能采用上边的方法，具体代码见下

 

赵又又i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序ScrollTop的获取以及赋值
weixin_34292959的博客
05-23 1万+
微信小程序获取元素高度宽度 1.创建节点 var query = wx.createSelectorQuery(); 2.绑定DOM query.select('#box').boundingClientRect() 3.获取元素信息 query.exec(function (res) { //console.log(res)...
jQuery中scrollTop()方法用法实例
10-24
主要介绍了jQuery中scrollTop()方法用法,实例分析了scrollTop()方法的功能、定义及返回或设置匹配元素的滚动条的垂直偏移量时的使用技巧,需要的朋友可以参考下
微信小程序scroll-view滚动scrollTop不准确
woshiabc111的博客
05-16 1674
如果在方法内写this.setData这种赋值的操作小程序可能会卡死无法滑动，建议在scrollTop到达一定数值后在进行操作，比如scrollTop=0先判断时候滑动到顶部或者底部，再来控制其他view的显示隐藏。1.这是因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流可以在scroll-view 加一个 throttle=“{{false}}” 关闭节流。2.减少scroll方法内的操作因为scroll-view内随便滑动一下监听事件可能。小程序里使用scroll-view。
微信小程序scroll-view组件使用scroll滑动事件中的scrollTop有时不为0的问题
最新发布
wcxrib的博客
01-21 502
解决方法：添加throttle="{{false}}" 属性，关闭官方默认节流，保证scroll事件能全部触发，自己实现节流即可。uni-app语法 :throttle="false"。问题： scroll-view的scroll滑动事件，经常会有这样的问题：scroll-view滑动到顶部后，最后的事件中的scrollTop不为0 、toupper事件也没有收到等。原因：scroll-view组件自带节流，所以滑动过快时，会出现滑到顶部，scrollTop不为0的bug。
在uniapp/微信小程序设置scrollTop初始值
m0_60353051的博客
11-26 2546
本文通过利用scroll-into-view属性+自定义定位器方式实现uniapp和微信小程序中对scrollTop设置初始值
微信小程序（滚动吸顶）
weixin_43837268的博客
06-06 656
【代码】微信小程序（滚动吸顶）
小程序ScrollView置顶只会成功一次，修改scrollTop无效是什么问题？小程序如何做一键置顶？
Youyzq的博客
12-08 1124
为什么会有scrollTop只执行一次的这个问题？先滚动自己的页面看看这个参数会发生变化吗从控制台可以看出，无论我怎么滚动，scrollTop的值是不会变化的。
uniapp开发微信小程序，切换tab页面时，scrollTop值丢失的问题
zzzzzzzi111的博客
10-18 228
在微信小程序页面中，有三个tab标签来控制页面的切换，在其中一个页面用了scrollTop来记录页面滑动的距离，当点击tab标签切换到其他页面后，scrollTop值丢失被重置为0。使用v-if来切换页面的隐藏和显示的话，当v-if为false时，被隐藏的所有元素节点将会被删除，当此元素再次显示时，会被再次创建，也就导致数据被重置了。1.通过v-show控制不同tab标签页的显示和隐藏（v-show在小程序的某些标签中会失效，所以不建议）查看代码，看切换页面时，是否使用了v-if来进行页面的显示和隐藏。
js中scrollTop()方法和scroll()方法用法示例
11-23
本文实例讲述了js中scrollTop()方法和scroll()方法用法。分享给大家供大家参考，具体如下： 设置滚动条据顶部的高度： $("div").scrollTop(100); //把 scroll top offset 设置为 100px 获得滚动条的高度： $("div...
微信小程序实现点击返回顶层的方法
12-29
最近在研究微信小程序，被这个返回顶层给坑了一波，下面贴代码 wxml代码： <scroll xss=removed scroll-top=50 enable-back-to-top=true scroll-top={{scrollTop.scroll_top}} bindscroll=scrollTopFun> ...
微信小程序之判断页面滚动方向的示例代码
12-29
微信小程序中如果判断页面滚动方向？ 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll。 2.获取页面实际高度 <!--WXML--> ...
scroll-top 设置微信小程序滚动条位置
You_wil_see的博客
10-14 4701
1.首先呢 我们要在scroll-view标签中 加上scroll-top属性，scroll-top属性后可加number/string，如果你直接加入scroll-top= "0"的话是没有效果的。所以要设置一个变量，以便于在每次点击过后都会促发这个效果。 我们先设置一个变量scroll-top= "{{scrollTop}}"。 2.第二步就是在同文件的js文件当中，为变量赋值： 3.之后在点击事件后面 加入就可以了。 ...
告别繁琐滑动，微信小程序一键回到顶部功能
Shids_的博客
09-28 5727
告别繁琐滑动，微信小程序一键回到顶部功能
微信小程序scroll-view组件设置 scroll-top无效问题解决
分享互联网的有趣知识~
12-29 3869
在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。
微信小程序，滚动条回到顶部，点击按钮的时候，让滚动条回到顶部scroll-top
笑到世界都狼狈的博客
01-05 4114
首先官方文档中有介绍scroll-view的相关属性：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 我们可以看到scroll-view中存在属性scroll-top="0"可以让滚动条回到顶部，但是实际操作中，我们往往需要在某些特定操作后让滚动条回到顶部 下面以点击按钮，让滚顶条回到顶部为例，写一个简单的实现代码： scroll.wxml: <view class="homes">
scroll-view里面的scrolltop在小程序里面只有作用一次
Huagg24的博客
11-07 914
因为做移动端，有个表格数据要动态写成html格式进行拼接，所以用scroll视图来做的，做分页功能的时候遇到了问题，就是切换页面的时候发现只有第一次点击才能返回到顶部，其他时候都没效果。必须在onScroll里面不停的更改this.pageData.scrollTop。再设置一个一样的变量。当点击时，用old变量去给scrollTop重新赋值；再调用$nextTick等dom结构生成后，再重新赋值scrolltop，就能回到顶部了。这是由于vue和小程序的视图层同步方式不同导致的。
微信小程序scroll-view一键回到顶部，动态绑定了scroll-top值，滑动会发生抖动
qq_41227106的博客
06-06 1833
scroll-view一键回到顶部
关于小程序 scroll
eeeeety6208的博客
10-31 468
我不知道这句话何时说出口，至于当时的气氛和情态也一无所知，但就这句话的内容，为，你，千，千，万，万，遍。顿时，我有些嫉妒书中的“我“，相比于往往独行客的我，那些无悔的宣言，是我从未听到过的传说。2.不可以同时设置scroll-into-view和scroll-top（scroll-left）属性，因为scroll-into-view的优先级别比scroll-top（scroll-left）属性高（官方文档提及过）;//获取scroll-view的scroll-height值。//算出滑动的百分比。
微信小程序-scroll-view滚动到指定位置(一)
热门推荐
柠檬不萌
12-21 8万+
先来说一下官网例子吧 API 自己看咯  https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122 有很多的注意事项,如果你不注意,滚动效果真的真的粗不来~~ html中 scroll-view竖向滚动必须设置scroll-y="true" st
移动端设置overflow:scroll后scrollTop失效并一直为0
05-18
在移动端，如果你想要使用 `overflow:scroll` 实现滚动条功能，需要同时设置元素的高度，并保证元素内部有足够多的内容超出元素高度，才能正确响应 `scrollTop` 属性。否则，`scrollTop` 属性会一直为0，无法实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值