我们要实现的是上方这样的效果:
- 点击前三个标签,ScrollView组件不会发生滚动
- 点击最后两个标签,ScrollView组件不会发生滚动也不会发生滚动
- 点击中间的标签,会向左前进一个标签的长度
开发环境:Taro
解决思路:
我们使用Taro提供的ScrollView组件
scrollX使ScrollView组件保持横向滚动而不是垂直方向scrollWithAnimation使滚动保持动画效果scrollIntoView值为某子元素id。设置哪个方向可滚动,则在哪个方向滚动到该元素。我们也是通过这个属性来控制ScrollView的滚动效果的。-
- 更具索引值,当其是前三个或者是最后两个时,不改变
scrollIntoView的值,当索引位于中间位置时,将scrollIntoView的值设置为i-1那个子元素对应的id.
- 更具索引值,当其是前三个或者是最后两个时,不改变