微信小程序scroll-view，点击menu，滚动到锚点；滚动到锚点，激活menu。

首先看看效果图

1、首先是点击菜单，滚动列表，这个实现比较简单。直接使用scroll-view 的 scroll-into-view属性，小程序文档。

< view class= 'container'>

< view class= 'menu'>

< ul >

< li bindtap= "scrollList" wx:if= "{{cate == 'fruit'}}" class= "active" data-cate= 'fruit'>水果 li >

< li bindtap= "scrollList" wx:if= "{{cate != 'fruit'}}" data-cate= 'fruit'>水果 li >

< li bindtap= "scrollList" wx:if= "{{cate == 'vegetables'}}" class= 'active' data-cate= 'vegetables'>蔬菜 li >

< li bindtap= "scrollList" wx:if= "{{cate != 'vegetables'}}" data-cate= 'vegetables'>蔬菜 li >

< li bindtap= "scrollList" wx:if= "{{cate == 'meat'}}" class= "active" data-cate= 'meat'>肉蛋 li >

< li bindtap= "scrollList" wx:if= "{{cate != 'meat'}}" data-cate= 'meat'>肉蛋 li >

ul >

view >

< scroll-view class= 'list' scroll-with-animation= "{{true}}" scroll-y scroll-into-view= "{{cate}}">

< view id= 'fruit'>水果 view >

< image wx:for= "{{items}}" class= 'item' src= '../images/item.png'> image >

< view id= 'vegetables'>蔬菜 view >

< image wx:for= "{{items}}" class= 'item' src= '../images/item.png'> image >

< view id= 'meat'>肉蛋 view >

< image wx:for= "{{items}}" class= 'item' src= '../images/item.png'> image >

scroll-view >

view >

接下来届数文件

data: {

items:[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],

cate: 'fruit',

},

scrollList: function(e){

this.setData({

cate: e.currentTarget.dataset.cate

})

console.log(e)

},

2、实现滚动list的时候，是menu激活

思路是，首先每个item 的高度是一定的，获取数据后，根据item的数量，去获取cate对应的高度。然后，监听bindscroll事件，把scrollTop记录到变量，menu者根据高度scrollTop去确定是否激活。

直接看代码吧

< view class= 'container'>

< view class= 'menu'>

< ul >

< li bindtap= "clickMenu" wx:if= "{{ scrollTop < 1226}}" class= "active" data-cate= 'fruit'>水果 li >

....

view >

< scroll-view bindscroll= "scroll" class= 'list' scroll-with-animation= "{{true}}" scroll-y scroll-into-view= "{{cate}}">

< view id= 'fruit'>水果 view >

< image wx:for= "{{items}}" class= 'item' src= '../images/item.png'> image >

.....

scroll-view >

view >

j s代码

data: {

items:[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],

cate: 'fruit',

scrollTop: 0,

},

scroll(e){

this.setData({

scrollTop:e.detail.scrollTop

})

console.log(e)

},

链接: https://pan.baidu.com/s/173aDaDCG3Krq-y-VEpHrzw 密码: 1dpt