1、微信小程序菜单内容左右联动

小程序无法获取元素的宽高，位置信息，只能通过后台计算，但是存在较大的机器误差，不知有啥好的解决方案？今天我就给大家分享一些我个人的解决方法，希望对大家有所帮助！

        如图所示，左侧是菜单栏，右侧是主体内容，点击左侧菜单，右侧滑动到相应的位置；右侧滑动的过程，也会改变左侧菜单的选中状态。本人的实现方案：

        1、所有元素大小单位用rpx;

        2、通过scrollbind(e) 的 e.detail.scrollHeight获取右侧滑动区域的总高度（单位px）

        3、通过物品高度和标题高度的比值，计算出各自的实际高度（单位px）

        4、通过修改scrollTop（单位px）改变主体内容位置

这样还是存在1px-100px的误差，物品越多，后面的累计误差会越大，有没有更好的解决办法呢？

在我的多次测试下，的确用scroll-view的scroll-to-view特性可以解决：

        wxml中修改：

<scroll-view scroll-y style="height: 31.5em" class="goods" bindscroll="goodsScrollAct" scroll-into-view="{{toView}}">

<view class="box" id="{{item.viewId}}" wx:for="{{allGoods}}" wx:key="unique" wx:for-index="typeId">

        js文件中修改：page data中增加：

menuType:['food','dust','bowl','cages','toys','tools'],toView:'cages',

        然后把下面函数修改一下：

selectMenuAct: function (e) {

}

测试环境下通过。

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

今天的内容就到这里，下节更新《微信小程序-左-->右联动》，为大家详细展示！

感谢您的阅读，如有疑问或想交流技术，请留言！

                                         希望对您能有些帮助！