溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
最近在學習小程序，實現了左右聯動的功能，記錄一下思緒，方便以后參考。
最終的界面如下, 點擊左邊任意一個項目，右邊會跳到相應項目的起始位置，右邊滑動，左則會跳到相應的位置。
實現思路
在這里，右則每一項的高度都是固定的，方便定位當前滑動距離在哪一個大項（左則）里。右則的 scroll-view 使用了一項關鍵的屬性：scroll-into-view，這個屬性用來確定 scrollTop 的值的，當 scroll-into-view 的值和 scroll-view 里面的元素的id的值相等時，scroll-view 會定位到該元素，scrollTop 的值就是滑動到該元素的值。
做這個功能的時候，遇到一個問題，就是右則的小項種類不多的時候，例如某個類目只有1~2個，那么點擊左則的大項的時候，會出現點擊不到的現象。這里可以用點小技巧來解決：
點擊左則大項的時候，設置當前點擊標記為true，設置 classifySeleted 為當前點擊的項目。 然后在滑動觸發函數（onGoodsScroll）里面，判斷當前觸發滑動是否點擊產生的，如果是，則不設置 classifySeleted 的值，否則就計算 classifySeleted 的值并設置。
示例代碼：
wxml代碼如下：
<view class="content-container">
<scroll-view class="classify-container" scroll-y="true">
<view class="classify {{classifySeleted==classify.typeId?'active':''}}" wx:for="{{cakeTypes}}" wx:for-item="classify" wx:key="id" data-id="{{classify.typeId}}" bindtap="tapClassify">
<view class="name">{{classify.typeName}}</view>
</view>
</scroll-view>
<scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{'inToView' + typeIndex}}" bindscroll="onGoodsScroll" scroll-top="{{scrollTop}}">
<view wx:for="{{cakeTypes}}" wx:for-item="classify" wx:key="id">
<view class="title" id="{{'inToView'+classify.typeId}}">{{classify.typeName}}</view>
<view class="goods" wx:for="{{classify.productIds}}" wx:for-item="cake" wx:key="id">
<image class="pic" src="{{cake.imgSrc}}" data-src="{{cake.imgSrc}}" data-list="{{cake.imgSrc}}" bindtap="tapImg"></image>
<view class="name ellipsis">{{cake.name}}</view>
<view class="sold">{{cake.introduce}}</view>
<view class="price">￥{{cake.price}}</view>
</view>
</view>
</scroll-view>
</view>
js代碼如下：
onGoodsScroll: function (e) {
var scrollTop = e.detail.scrollTop;
var h = 0;
var classifySeleted = this.data.classifySeleted;
var titleHeight = Math.ceil(70 * this.data.percent);
var itemHeight = Math.ceil(180 * this.data.percent);
this.data.cakeTypes.forEach(function (classify, i) {
console.log("h:" + h + " scrollTop:" + scrollTop);
var _h = titleHeight + classify.productIds.length * itemHeight;
if (scrollTop >= h - 10) {
classifySeleted = classify.typeId;
}
h += _h;
});
if (this.data.isTap) {
this.setData ({
isTap: false
})
} else {
this.setData({
classifySeleted: classifySeleted
});
}
},
tapClassify: function (e) {
var id = e.target.dataset.id;
this.setData({
isTap: true,
classifySeleted: id,
typeIndex: id
});
},
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
