微信小程序实现左右联动的实战记录
程序员文章站
2022-03-20 15:08:35
前言
最近在学习小程序,实现了左右联动的功能,记录一下思绪,方便以后参考。
最终的界面如下, 点击左边任意一个项目,右边会跳到相应项目的起始位置,右边滑动,左则会跳到相...
前言
最近在学习小程序,实现了左右联动的功能,记录一下思绪,方便以后参考。
最终的界面如下, 点击左边任意一个项目,右边会跳到相应项目的起始位置,右边滑动,左则会跳到相应的位置。
实现思路
在这里,右则每一项的高度都是固定的,方便定位当前滑动距离在哪一个大项(左则)里。右则的 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 }); },
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
上一篇: Angular4.0动画操作实例详解