浅析如何让scroll -视图在小程序中按指定位置滚动（微信小程序scrollview滚动到底部）

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

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

我们可以看到官方文档描述scroll -视图中有一个scroll -into -视图属性，描述如下。

scroll -into -视图的值应该是子元素id（id不能以数字开头）。设置可以滚动的方向，然后以哪个方向滚动到元素。

然后我们可以在这个财产上大做文章。只需在scroll -视图中放置一个设置了id值的自定义值来切换选项卡，相应内容框的滚动条将自动滚动到顶部，如以下代码所示，我使用Taro小程序框架演示了这些内容，原生内容也是如此。

从英国进口芋头。#39;@ taro js/taro & amp；#39;从& amp#39;@ tarojs/components & amp；#39;从& amp#39;taro -ui & amp；#39;导出默认类索引扩展Taro。组件{构造函数（）{ super（...arguments）this . state = { current:0，} } handle click（value）{ this . setstate（{ current:value }）} render（）{ const tabList =【{ title:& amp；#39;标签的第1页&；#39;}，{ title:& amp；#39;标签的第2页&；#39;}，{ title:& amp；#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 scrolltoview = & amp；#39;内容-0和#39;& gt& lt视图id = & amp#39;内容-0和#39;& gt& lt/View & gt；选项卡1的内容

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

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

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

• 滚动-视图以完成列表页面的方法的详细说明（滚动-视图的用法）
• 利用scroll -视图组件实现小程序返回顶部的特效（小程序的scroll -视图下拉刷新）
• 使用scroll-view组件实现小程序返回顶部的特效(小程序scrollview滚动到指定位置)。
• 浅析如何让scroll -视图在applet中按指定位置滚动(applet scroll-view)

本文由主机参考刊发，转载请注明：浅析如何让scroll -视图在小程序中按指定位置滚动（微信小程序scrollview滚动到底部） https://zhujicankao.com/107554.html