scroll-view里面的定位元素如何能同步滚动

本篇文章给大家介绍一下在微信小程序中怎么让scroll-view按照指定位置滚动，无需在写额外的js脚本，就可获得极佳的体验，希望对大家有所帮助！

背景是这样的，微信小程序有一个tab切换页面，tab切换页面有两个内容框，我是使用scroll-view进行制作，然后在切换tab页面时，相应的scroll-view里的滚动条需要置顶处理。【相关学习推荐：小程序开发教程】

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

scroll-into-view的值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

那么我们可以在这个属性里大作文章，只要在scroll-view里放置一个id值为设置的一个自定义值就可以实现切换tab时，对应的内容框滚动条都自动滚到顶部，如下面代码所示，下面代码是我使用Taro小程序框架演示的，原生的也同理。

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: '标签第一页' }, { title: '标签第二页' }, { title: '标签第三页' }]

return (

<AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>

<AtTabsPane current={this.state.current} index={0} >

<ScrollView scrollY scrollIntoView='content-0'>

<View id='content-0'></View>

标签页一的内容

</ScrollView>

</AtTabsPane>

<AtTabsPane current={this.state.current} index={1} >

<ScrollView scrollY scrollIntoView='content-1'>

<View id='content-1'></View>

标签页二的内容

</ScrollView>

</AtTabsPane>

<AtTabsPane current={this.state.current} index={2} >

<ScrollView scrollY scrollIntoView='content-2'>

<View id='content-2'></View>

标签页三的内容

</ScrollView>

</AtTabsPane>

</AtTabs>

)

}

}

如第一个tab的scroll-view里放置一个id值为content-0的view，那么在切换tab页时，scroll-view会根据我们设置的scroll-into-view属性定位到子元素的id上，到达滚动条自动置顶的效果

<AtTabsPane current={this.state.current} index={0} >

<ScrollView scrollY scrollIntoView='content-0'>

<View id='content-0'></View>

标签页一的内容

</ScrollView>

</AtTabsPane>

同理的，假如需要滚动条滚到最低下，把相应的子元素id放到最低下即可，例如某些聊天界面，需要定位到最新那条

<AtTabsPane current={this.state.current} index={0} >

<ScrollView scrollY scrollIntoView='content-0'>

标签页一的内容

<View id='content-0'></View>

</ScrollView>

</AtTabsPane>

更多编程相关知识，请访问：编程视频！！

实现如下图，点击右侧的A/B/C/D....可以快速定位到该字母开头的城市列表。这类似于在html中用a标签实现的锚点跳跃功能。那在小程序中应该如何实现呢。在小程序官方文档中提到scroll-view，scroll-view有scroll-into-view这一属性

根据页面的实现，页面分为两大节点，滚动视图区域和定位标签

<scroll-view>......</<scroll-view> //这里面写页面的其他所有内容

<view>......</view> //这里面写快速定位的A/B/C/D...

<scroll-view>根据页面又分为三层，搜索框层，热门城市层，按照字母排序的所有城市层，按照个人需求去实现

接下来讲如何实现锚点的定点跳跃，scroll-view的属性scroll-into-view用来定义scroll-view滚动到哪个区域显示，所以每块以字母开头的城市列表区域的id与scroll-into-view的值是绑定关系，而定位的标签用来改变scroll-into-view的值

实现步骤：

1. scroll-view 设置属性

scroll-y=‘true’运行其竖向滚动，scroll-with-animation=‘true’显示滚动动画，scroll-into-view与变量toView绑定。

2.定义好每一个需要被快速定位的区域的ID名，如下的 inToViewFind、inToViewhot、inToViewA、inToViewB、inToViewC......

3.将定位标签A/B/C/D...绑定好点击事件bindtap='scrollToViewFn'

在methods里面写好该点击事件

scrollToViewFn(e) {

var _id = e.target.dataset.id

this.toView='inToView' + _id

this.$apply()

}

4.将变量toView初始化为inToViewFind

在data里面初始化toView的值

data ={

toView:'inToViewFind'

}

这样便可以实现html里面a标签的锚点跳跃的功能

微信小程序固定头部不动的步骤如下：

1、在小程序自带的方法onPageScroll中可以得到滑动距离顶部的距离，在data公共数据中定义scrollTop。

2、得到滑动距离后，当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位，因此为要在scroll-view中定义class="title{{scrollTop>30'topnav'：''}}"30就是我需要定义的模块距离顶部的距离，当超过这个距离就会执行css的topnav样式。

3、否则就执行愿有的css样式。

---