微信小程序实现左右联动的实战记录

微信小程序实现左右联动的实战记录

前言

最近在学习小程序，实现了左右联动的功能，记录一下思绪，方便以后参考。

最终的界面如下, 点击左边任意一个项目，右边会跳到相应项目的起始位置，右边滑动，左则会跳到相应的位置。

实现思路

在这里，右则每一项的高度都是固定的，方便定位当前滑动距离在哪一个大项（左则）里。右则的 scroll-view 使用了一项关键的属性：scroll-into-view，这个属性用来确定 scrollTop 的值的，当 scroll-http://into-view 的值和 scroll-view 里面的元素的id的值相等时，scroll-view 会定位到该元素，scrollTop 的值就是滑动到该元素的值。

做这个功能的时候，遇到一个问题，就是右则的小项种类不多的时候，例如某个类目只有1~2个，那么点击左则的大项的时候，会出现点击不到的现象。这里可以用点小技巧来解决：

点击左则大项的时候，设置当前点击标记为true，设置 classifySeleted 为当前点击的项目。 然后在滑动触发函数（onGoodsScroll）里面，判断当前触发滑动是否点击产生的，如果是，则不设置 classifySeleted  的值，否则就计算 classifySeleted 的值并设置。

示例代码：

wxml代码如下：

{{classify.typeName}}

{{classify.typeName}}

{{cake.name}}

{{cake.introduce}}

￥{{cake.price}}

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

});

},

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。