问题场景:
如下图所示,是一个横向导航滑动菜单,要求进入此页面时,自动定位在所在的位置。
方法:
使用scroll-view里面的scroll-into-view实现
实现原理
即初始化的时候根据前一页传过来的数据来给scrollIntoView进行赋值,页面会与下面遍历的数据中id值做对比,自动定位到选中的位置
注:scrollIntoView值为某子元素id(id不能以数字开头)
具体用法
.wxml中
<scroll-view class="scroll-view_H" scroll-x="true" scroll-into-view="{{ scrollIntoView }}">
<view id="y{{item.classId}}" wx:for="{{classList}}" wx:key="id"></view>
</scroll-view>
.js中
this.setData({ // 去设置当前在那个位置上
scrollIntoView: 'y' + this.data.selectClassId
})
好了~ 完美撒花
本以为自己写的可以完美解决点击跳转定位问题! 结果,产品一句话,又得优化~~~~~~ 打工人呐
之前实现的是点击某一个进入页面之后,会对应把所点击的数据赋给scrollIntoView ,然后scrollIntoView对应的会定位在最左边的位置上, 此时(产品说 :如果是这样的话,我怎么知道前面还有数据选择呢, 你给我把选中的定位在中间位置吧,前面再留出一个未选中的状态!) what?听起来是很有道理的,可我又要改呀呀呀呀 不过正是成长的时候,想! 改!
结果还挺简单, 实际只需把scrollIntoView的值改为 你所定位的id前面对象的id即可!及定位在了选中有样式的前面一个tab标签上
这下又学到啦 转圈圈
如果有帮到你,记得点赞哦~~~