最近在学习小程序,实现了左右联动的功能,记录一下思绪,方便以后参考。
最终的界面如下,点击左边任意一个项目,右边会跳到相应项目的起始位置,右边滑动,左则会跳到相应的位置。
在这里,右则每一项的高度都是固定的,方便定位当前滑动距离在哪一个大项(左则)里。右则的滚动视图使用了一项关键的属性:scroll-into-view,这个属性用来确定scrollTop的值的,当scroll-into-view的值和滚动视图里面的元素的id的值相等时,滚动视图会定位到该元素,scrollTop的值就是滑动到该元素的值。
做这个功能的时候,遇到一个问题,就是右则的小项种类不多的时候,例如某个类目只有1 ~ 2个,那么点击左则的大项的时候,会出现点击不到的现象。这里可以用点小技巧来解决:
点击左则大项的时候,设置当前点击标记为真的,设置classifySeleted为当前点击的项目,然后在滑动触发函数(onGoodsScroll)里面,判断当前触发滑动是否点击产生的,如果是,则不设置classifySeleted 的值,否则就计算classifySeleted的值并设置。
wxml代码如下:
& lt;视图类=澳谌荨北?
& lt;滚动视图类=" classify-container " scroll-y=" true "比;
& lt;视图类="分类{{classifySeleted==classify.typeId& # 63;“活跃”:“}}”天气:为=" {{cakeTypes}} "天气:项=胺掷唷钡奶炱?关键=" id "数据id="{{分类。类型id}} tapClassify“bindtap=比;
& lt;视图类=皀ame”在{{classify.typeName}} & lt;/view>
& lt;/view>
& lt;/scroll-view>
& lt;滚动视图类=" goods-container " scroll-y=" true " scroll-into-view=" {{“inToView”+ typeIndex}}”bindscroll=皁nGoodsScroll scroll-top”=皗{scrollTop}}”比;
& lt;观点wx:=" {{cakeTypes}}”天气:项=胺掷唷钡奶炱?关键=" id "比;
& lt;视图类="标题" id=" {{“inToView”+ classify.typeId}}”在{{classify.typeName}} & lt;/view>
& lt;视图类=吧唐贰钡奶炱?="{{分类。productIds}}“天气:项="蛋糕"天气:关键=" id "比;
& lt;图像类="图片" src=" https://www.yisu.com/zixun/{{cake.imgSrc}}”data-src=" https://www.yisu.com/zixun/{{cake.imgSrc}}”数据表格="{{蛋糕。imgSrc}} tapImg“bindtap=祝辞& lt;/image>
& lt;视图类=懊质÷浴痹趝{cake.name}} & lt;/view>
& lt;视图类="卖"在{{cake.introduce}} & lt;/view>
& lt;视图类="价格"祝辞￥{{cake.price}} & lt;/view>
& lt;/view>
& lt;/view>
& lt;/scroll-view>
& lt;/view>
js代码如下:
onGoodsScroll:函数(e) {
var scrollTop=e.detail.scrollTop;
var h=0;
var classifySeleted=this.data.classifySeleted;
var titleHeight=数学。装天花板(70 * this.data.percent);
var itemHeight=数学。装天花板(180 * this.data.percent);
this.data.cakeTypes。forEach(函数(分类,我){
控制台。日志(h: + h + + scrollTop“scrollTop:”);
var _h=titleHeight + classify.productIds。长度* itemHeight;
如果(scrollTop祝辞=h - 10) {
classifySeleted=classify.typeId;
}
h +=_h;
});
如果(this.data.isTap) {
这一点。setData ({
isTap:假
}）
其他}{
this.setData ({
classifySeleted: classifySeleted
});
}
},
tapClassify:函数(e) {
var id=e.target.dataset.id;
this.setData ({
isTap:没错,
classifySeleted: id、
typeIndex: id
});
},
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
