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

作者: 疯人也有疯情调30958056
来源: 51数据库
2021-07-10

前言

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

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

实现思路

在这里，右则每一项的高度都是固定的，方便定位当前滑动距离在哪一个大项（左则）里。右则的 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
 });
 },

总结

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