想做一个类似京东小程序首页功能列表左右滑动的效果，效果图如下
1. 如何让scroll-view显示两行
做过小程序开发的都知道，scroll-view要么显示一行，可以左右滚动，如果显示两行的话就会适应屏幕宽度，达不到左右滚动的效果，所以我们需要改变一下我们的数据结构
我们再来看看wxml如何渲染这些数据
<scroll-view class="classfication-scroll" scroll-with-animation='true' scroll-anchoring='true' scroll-x enable-flex bindscroll='bindscroll'>
<view class="scroll-view-item">
<view wx:for="{{classficationList}}" class="child">
<view class='classfication-view' wx:for="{{item.item}}" wx:for-item='child' wx:key="_id" wx:if="{{child._id<50}}" data-id='{{child.id}}' data-name='{{child.name}}' bindtap='click'>
<view class='image' style='background:{{child.style}}'>
<image src="{{child.url}}" />
</view>
<view class='name'>{{child.name}}</view>
</view>
</view>
</view>
</scroll-view>
2. 如何让底部的scroll-bar跟随着上面的功能列表进行滑动
首先需要获取scroll-view滑动的距离，这里用到scroll-view的bindscroll='bindscroll'方法，
关键代码：
var move = scrollLeft / canScroll / 2 * 100;
3. 如何解决左右滑动视图抖动的问题
解决方案：当滑动到最左或者左右的时候直接return，不执行setData方式，减少性能消耗
bindscroll(event) {
const {
scrollLeft,
scrollWidth
} = event.detail;
if (scrollLeft < 0) { // 向右滑动时超出屏幕就return
return
}
var sc = this.data.scrollWidth; // 屏幕宽度
var canScroll = scrollWidth - sc; // 能滚动的宽度
if (scrollLeft > canScroll) { // 向左滑动时超出屏幕就return
return
}
var move = scrollLeft / canScroll / 2 * 100;
this.setData({
scrollBar: move
})
},
4. 使用防抖的思想再次优化快速滑动时的性能消耗
bindscroll(event) {
const {
scrollLeft,
scrollWidth
} = event.detail;
if (scrollLeft < 0) { // 向右滑动时超出屏幕就return
return
}
var sc = this.data.scrollWidth; // 屏幕宽度
var canScroll = scrollWidth - sc; // 能滚动的宽度
if (scrollLeft > canScroll) { // 向左滑动时超出屏幕就return
return
}
var timer = null;
var _this = this
timer = setTimeout(() => {
clearTimeout(timer)
var move = scrollLeft / canScroll / 2 * 100;
_this.setData({
scrollBar: move
})
}, 300);
},
