微信小程序实现左右联动的实战记录
时间：2021-03-01 13:40:57|栏目：AngularJS|点击： 次
前言
最近在学习小程序，实现了左右联动的功能，记录一下思绪，方便以后参考。
最终的界面如下, 点击左边任意一个项目，右边会跳到相应项目的起始位置，右边滑动，左则会跳到相应的位置。
实现思路
在这里，右则每一项的高度都是固定的，方便定位当前滑动距离在哪一个大项（左则）里。右则的 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
});
},
总结
上一篇：angularjs项目的页面跳转如何实现（5种方法）
栏 目：AngularJS
本文标题：微信小程序实现左右联动的实战记录
本文地址：http://www.codeinn.net/misctech/71937.html
