微信小程序-scroll-view滚动到指定位置(一)

最新推荐文章于 2024-05-23 11:14:47 发布
最新推荐文章于 2024-05-23 11:14:47 发布
阅读量8.2w 收藏 7
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 scroll-view scroll-view-into 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoyazhi2129/article/details/53786072
版权

先来说一下官网例子吧 API 自己看咯

 https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122



有很多的注意事项,如果你不注意,滚动效果真的真的粗不来~~

  1. html中
    1. scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;"  必须..
    2. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号
  2. js中
    1.  "toView","scrollTop"必须设置值
    2. "scrollTop": 0,必须为数值
         
莫兰迪不会没有瓶子
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
scroll-view组件 实现滚动到底部
u013302168的博客
07-30 1063
或者，通过监听window的scroll事件。
微信小程序scroll-view滚动条始终再最底部，实现自动滚动的效果
yueyue1111111的博客
07-06 6312
微信小程序scroll-view的使用
微信小程序滚动到指定位置
最新发布
m0_48334955的博客
05-23 381
方案1：常见的解决办法思路就是先获取元素距离顶部高度然后再滚动。推荐直接使用方案2，方案3保险，方案2简单。可以直接写组件内的选择器哦。不然返回一直是null。方法支持直接传选择器的。方案2不行的话选方案3。组件内需要在后面加上。
微信小程序使用scroll-view 标签实现内容上下或左右滑动
湾流~ 的博客
09-05 5733
scroll-view标签微信官方介绍 scroll-view标签属性 : scroll-x 为x轴(左右滑动),scroll-y为y轴(上下滑动) 左右滑动 scroll-view标签需要设置white-space: nowrap;里面的元素要设置为行内块元素 html <scroll-view scroll-x > <view class="templateitem" v-for="(item,index) in xxx" style=" width: 200px; heig
uniapp中scroll-view组件scroll-into-view的使用
记录本人工作中遇到的问题、经验总结以及分享。
11-01 6298
目的：让 scroll-view组件自动定位到当前月份，比如11月。
uniapp使用scroll-into-view实现锚点定位和滚动监听功能
weixin_47136265的博客
08-15 3330
1、点击左侧分类导航栏页面右侧区域滚动到对应的分类数据，通过scroll-into-view实现，2、滚动右侧区域，滚动到哪一分类的的区域，左侧导航栏对应分类的导航变为选中状态，通过滚动监听实现。
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 ...scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何使用 scroll-view 组件实现滚动动画，并提供...
微信小程序-scroll-view横向滚动和上拉加载
03-29
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：i ...       最近刚好在集中scroll-view的文章和跳坑指南；  今天介绍微信小程序...
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
今日准备把微信小程序的下拉刷新做一下，没想到我绑定了bindscrolltolower事件，但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我...
微信小程序滚动到某个位置改变效果
热门推荐
林毅洋
05-08 2万+
Some of the words 200 ? 'class1' : 'class2'}}" //JS文件 //滚动监听 scroll: function (e) { this.setData({ scrollTop:e.detail.scrollTop }) } 其中，variable为全局变量， class1、class2即为相应的css 感谢此文章
小程序开发笔记（四）：微信小程序实现滚动到指定位置。
healerwen的博客
03-19 2772
创建一个按钮，点击后滚动到页面内的指定位置。 wxml <view class="box1" bindtap="toComment">查看回答</view> //...其他内容 <view class="box2 text-bold" id="comment">回答</view> js toComment() { var query...
uni-app——scroll-into-view 锚点功能
LinBM123的博客
11-16 1948
注意点： scroll-into-view绑定scroll-view子元素id scroll-view容器高度设置height: 100vh; <template> <view class="container"> <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y left_box" @scrolltoupper="upper" @scrolltolower="lowe.
微信小程序 scroll-view 实现自动滑动到底部
热爱思考、活力满满、开朗爱笑的年轻人
11-18 7385
<scroll-view class="scroll-wrapper" scroll-into-view="{{scrollTo}}" scroll-y="true" bindscroll="messageListScrolling" > <block wx:for="{{messageList}}" wx:key="id"> <view>你的scroll-view中的内容</view> </block> &lt
页面a跳转到页面b指定位置的方法
alokka的博客
07-07 7432
页面a跳转到页面b指定位置的方法1.锚点法a.html里：<a href="b.html#abc">xxx</a>b.html里加一个锚点：<div name="abc"></div>这样就可以直接跳转到只能位置啦在一个页面a进行跳转方法一、跳转到顶部 1、首先我们在网页body内最上面添加一个<span id="top" name="top"></span> 2、我们再到body内，需要出现点击后
微信小程序开发——页面跳转传值
番薯大佬的专栏
04-12 3026
WeChat小程序交流（QQ群：769977169）由页面A跳转到页面B时，假如需要将A页面的信息传递给B页面使用，这时候在跳转时，可以把需要传递的信息以get方式设置在导航的url中。如：wx.navigateTo({ url: 'receiveValue?name='+this.data.name+'&amp;job='+this.data.job, })另外，信息传递到B页面后，...
微信小程序滚动锚点定位实现
Beyond the Horizon
05-03 4055
最近开发了一款商城小程序，打算整理一下商城小程序遇到的难点和解决方法。 好多网页页面元素非常多，信息量也非常大，用户在使用过程中可以通过页面导航实现快速的切换，而无需用户来回滚动鼠标，极大提高了用户的体验性，本篇主要介绍在商城列表中如何使用锚点，话不多说上代码。 效果图 list.wxml 这是一个简单的滚动视图，锚点的关键属性就在于scroll-into-view="{{id}}"，通过...
微信小程序仿微信功能Day3
xiaobaibaiyo的博客
09-28 426
仿微信通讯录功能实现 右侧一个定位锚点跳转功能。 整体是列表的数据显示。 需要图片资源的请去网盘下载 提取码：en17 1.phone.wxml <!-- pages/phone/phone.wxml --> <scroll-view scroll-into-view="{{toView}}" scroll-y="true" class="vh"> <!-- menu --> <view class="box" wx:for="{{topArr}}"
微信小程序实现锚点功能
暖光的博客
10-26 2075
只需要在小程序触发标签绑定data-id, 目标标签绑定id // 锚点跳转 scrollView: function (event) { var me = this; var query = wx.createSelectorQuery().in(me); var id = event.currentTarget.dataset.id;//需要锚点点id query.selectViewport().scrollOffset() //#comm 跳转到指定i
微信小程序手动scroll-view的滚动
08-16
微信小程序的scroll-view组件是用于实现可滚动视图区域的功能。要实现手动滚动，可以使用scroll-into-view属性和scrollTop属性。 首先，在scroll-view组件上设置一个唯一的id，例如id="scroll-view"，作为滚动视图的标识。 然后，在需要手动滚动到的某个位置设置一个唯一的id，例如id="target"。 接下来，在页面的js文件中，通过调用wx.createSelectorQuery().select('#target').boundingClientRect()方法获取目标元素的位置信息。 然后，将获取到的位置信息中的top属性赋值给scrollTop属性，以实现手动滚动到目标位置。 具体代码如下： 在wxml文件中： ``` <scroll-view id="scroll-view" scroll-y="true"> <!-- 内容 --> <view id="target">目标位置</view> <!-- 内容 --> </scroll-view> ``` 在js文件中： ``` Page({ // 其他代码 scrollIntoView() { wx.createSelectorQuery().select('#target').boundingClientRect((res) => { if (res) { wx.pageScrollTo({ scrollTop: res.top }) } }).exec() }, // 其他代码 }) ``` 通过调用scrollIntoView方法可以手动滚动到目标位置。 需要注意的是，scroll-into-view属性和scrollTop属性也可以直接在wxml中设置，实现页面加载时自动滚动到指定位置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值