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

问题描述

问 题

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

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

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

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

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

• 通过修改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) {

//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]
});

},
测试环境下通过。

这篇关于微信小程序菜单内容左右联动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！