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

前言

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

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

 

实现思路

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

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

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

示例代码

wxml代码如下:

js代码如下:

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
});
},

总结

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

相关文章

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入...
1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用...
QQ小程序支付 Java后端 同学折腾QQ小程序的支付折腾了好几天,没有完成统一下单,因为我做过微信和支付...
前言: 在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个...
一、前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无...
前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是...