微信小程序scroll-view，点击menu，滚动到锚点；滚动到锚点，**menu。
首先看看效果图
1、首先是点击菜单，滚动列表，这个实现比较简单。直接使用scroll-view 的 scroll-into-view属性，小程序文档。
<view class='container'>
<!-- 菜单 -->
<view class='menu'>
<ul>
<!-- scrollList 修改cate -->
<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>
<!-- item -->
<!-- scroll-into-view 属性的值是什么，就滚动到什么 -->
<scroll-view class='list' scroll-with-animation="{{true}}" scroll-y scroll-into-view="{{cate}}">
<!-- id 标记锚点 -->
<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>
<!-- scrollList 修改cate -->
<!-- 这里的高度，应该计算获得，这里暂时写死了 -->
<li bindtap="clickMenu" wx:if="{{ scrollTop < 1226}}" class="active" data-cate='fruit'>水果</li>
....
</view>
<!-- item -->
<!-- scroll-into-view 属性的值是什么，就滚动到什么 -->
<scroll-view bindscroll="scroll" class='list' scroll-with-animation="{{true}}" scroll-y scroll-into-view="{{cate}}">
<!-- id 标记锚点 -->
<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