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

Question

小程序无法获取元素的宽高，位置信息，只能通过后台计算，但是存在较大的机器误差，不知有啥好的解决方案？git地址：https://github.com/Panfen/lumm

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

• 所有元素大小单位用rpx;

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

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

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

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

Answer 1

测试了一下，的确用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) {

//typename
var id = e.target.dataset.id;
var tType=this.data.menuType[id];
console.log(e),
this.setData({
  scrollNum: id,
  toView: tType
  //scrollTop: this.data.heightList[id]
});

},
测试环境下通过。

Answer 2

scroll-into-view

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

Answer 3

尽量用weui，微信官方的UI，地址：weiui.io

Answer 4

你好，我也遇到这个问题了，scroll-into-view解决不了这个问题，希望和你讨论下现在有更好的方案吗？

Answer 5

你好，你这个做出来了吗？