Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to make scroll-view scroll according to the specified position in Mini Program". In daily operation, I believe many people have doubts about how to make scroll-view scroll according to the specified position in Mini Program. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to make scroll-view scroll according to the specified position in Mini Program". Next, please follow the editor to study!

The background is like this. WeChat Mini Programs has a tab switching page, and the tab switching page has two content boxes. I use scroll-view to make it, and then when switching tab pages, the scroll bars in the corresponding scroll-view need to be handled at the top.

We can see that the official document describes that there is a scroll-into-view attribute in the scroll-view, which is described as follows

The value of scroll-into-view should be a child element id (id cannot start with a number). Sets the direction in which to scroll, and in which direction scrolls to the element

So we can make a big article in this property, as long as we put an id value in scroll-view to set a custom value to switch tab, the corresponding content box scroll bars are automatically rolled to the top, as shown in the following code, the following code is demonstrated by me using the Taro Mini Program framework, and the native is the same.

Import Taro from'@ tarojs/taro'import {View} from'@ tarojs/components'import {AtTabs, AtTabsPane} from 'taro-ui'export default class Index extends Taro.Component {constructor () {super (... arguments) this.state = {current: 0,}} handleClick (value) {this.setState ({current: value})} render () {const tabList = [{title:' tag first page'} {title: 'tag page 2'} {title: 'tag page 3'}] return (content of tab 1, content of tab 2, content of tab 3 )}}

For example, if a view with an id value of content-0 is placed in the scroll-view of the first tab, then when switching between tab pages, scroll-view will navigate to the id of the child element according to the scroll-into-view attribute we set, and the scroll bar will be automatically topped.

The contents of tab one

By the same token, if you need to scroll to the lowest level, you can put the corresponding child element id to the lowest level. For example, some chat interfaces need to locate the latest one.

This ends the study of "how to scroll scroll-view according to the specified position in Mini Program". I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.