需求描述
想做一個類似京東小程序首頁功能列表左右滑動的效果，效果圖如下
掃碼體驗
遇到的問題
1. 如何讓scroll-view顯示兩行
做過小程序開發的都知道，scroll-view要么顯示一行，可以左右滾動，如果顯示兩行的話就會適應屏幕寬度，達不到左右滾動的效果，所以我們需要改變一下我們的數據結構
[{
item: [{
"_id": "2",
"id": 7,
"name": "javaScript",
"style": "#fef2ce",
"url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/java-script.png?sign=bc895f0a0344a1415b9b829713bf111c&t=1563077572"
}, {
"_id": "3",
"id": 2,
"name": "vue",
"style": "#EB7347",
"url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/Vue.png?sign=37ba4970e938cb3419b3209d572a8013&t=1563077541"
}]
}, {
item: [{
"_id": "4",
"id": 1,
"name": "小程序",
"style": "#fc9",
"url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/%E5%B0%8F%E7%A8%8B%E5%BA%8F.png?sign=1513baa85fdce9f0f5ee0a2d496c1613&t=1563077605"
}, {
"_id": "5",
"id": 4,
"name": "瀏覽器",
"style": "#00CCFF",
"url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/%E6%B5%8F%E8%A7%88%E5%99%A8.png?sign=a315bc182fc89b7adb65a07c4da96eac&t=1565352298"
}]
}, {
item: [{
"_id": "6",
"id": 5,
"name": "android",
"style": "#AEDD81",
"url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/Android.png?sign=3411681e3b4d3eba93566a19f8c5a297&t=1563077457"
}, {
"_id": "7",
"id": 3,
"name": "react",
"style": "#13227a",
"url": "https://6366-cfxy-mall-pxwnv-1256640731.tcb.qcloud.la/classfication_images/React.png?sign=b6466f2dbea9d0d83da78e0fa04e3b40&t=1563077529"
}]
},
}]
我們再來看看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'方法，
bindscroll(event) {
const {scrollLeft,scrollWidth} = event.detail;
var sc = this.data.scrollWidth; // 屏幕寬度
var canScroll = scrollWidth - sc; // 能滾動的寬度
var move = scrollLeft / canScroll / 2 * 100;
this.setData({
scrollBar: move
})
}
關鍵代碼：
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(() => {
if(timer){
clearTimeout(timer);
timer = null;
}
var move = scrollLeft / canScroll / 2 * 100;
_this.setData({
scrollBar: move
})
}, 400);
},