浅析如何让scroll -视图在applet中按指定位置滚动(applet scroll-view)

本文介绍了如何在微信小程序中让scroll -视图在指定位置滚动，无需额外编写js脚本即可获得极佳的体验。希望对你有帮助！

背景是微信小程序有一个标签页切换页面，标签页切换页面有两个内容框。我是用scroll-view做的，然后在切换tab页的时候，scroll-view中对应的滚动条需要置顶。【相关学习推荐:小程序开发教程】

我们可以看到在官方文档描述scroll-view中有一个scroll-into-view属性。该属性的描述如下

scroll-into-view的值应该是子元素id(id不能以数字开头)。设置滚动的方向，以哪个方向滚动到元素。

那么，我们就可以在这个属性上大有作为了。在scroll -视图中放置一个设置了id值的自定义值时，可以切换tab，对应内容框的滚动条会自动滚动到顶部，如下面的代码所示，我用Taro applet框架演示过，原生的也是如此。

从 # 39；进口芋头；@ tarojs/taro # 39；从 # 39；导入{ View };@ tarojs/components # 39；从 # 39；导入{ AtTabs，AtTabsPane };taro -ui # 39；导出默认类索引扩展Taro。组件{ constructor () { super(...arguments)this . state = { current:0，} } handle click(value){ this . setstate({ current:value })} render(){ const tabList =[{ title: # 39；标签的第一页 # 39；}，{ title: # 39；标签的第2页 # 39；}，{ title: # 39；标签的第3页 # 39；}]return( lt；AtTabs current = { this . state . current } tabList = { tabList } onClick = { this . handle click . bind(this)} gt； ltAtTabsPane current = { this . state . current } index = { 0 } gt； ltscroll view scrollY scrollIntoView = # 39；内容-0 # 39； gt lt视图id = # 39内容-0 # 39； gt lt/View gt；选项卡1的内容

ltAtTabsPane current = { this . state . current } index = { 0 } gt； ltscroll view scrollY scrollIntoView = # 39；内容-0 # 39； gt lt视图id = # 39内容-0 # 39； gt lt/View gt；选项卡1的内容

ltAtTabsPane current = { this . state . current } index = { 0 } gt； ltscroll view scrollY scrollIntoView = # 39；内容-0 # 39； gt选项卡1的内容

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：浅析如何让scroll -视图在applet中按指定位置滚动(applet scroll-view) https://zhujicankao.com/76244.html