微信小程序scroll-view联动滚动
前言scroll-viewquery.select(标签名 ).boundingClientRect().exec()最后一条内容区比较少,点击无效果。前言
在做微信小程序的时候,需要用到联动滚动,类似于美团的点餐,在网上搜了很多,发现不是很全,在这里自己总结一下
scroll-view
如果想要实现纵向滑动,除了设置scroll-y为true,还必须设置固定高度,只有内容高度大于你所设置的高度的时候才会出现滚动
scroll-into-view联动左右区域的内容,可以实现同步滚动效果
scroll-with-animation在设置滚动条位置时使用动画过渡,详情见微信官方文档:https://developers./miniprogram/dev/component/scroll-view.html
// 左部标题区<scroll-view scroll-y= rue class=aside-left style=height:{{height-85}}px; scroll-into-view="{{inToview+rigId}}" scroll-with-animation="true"><view wx:for="{{aside}}" wx:key class=aside-tip {{classfiySelect == item.id?"selected":"unselect"}} data-id={{item.id}}indtap=left_list>{{item.name}}</view></scroll-view>// 右部内容区<scroll-view scroll-y= rue style=height:{{height-65}}px; bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{inToview+rigId}}" scroll-with-animation="true"><view class=part wx:for="{{detail}}" wx:key