小程序左右联动效果实现

文章参考自：https://blog.csdn.net/weixin_39162041/article/details/87739797

需求场景 订餐小程序菜单左右联动

点击左侧菜单右侧滚动很好实现，直接通过scroll-view组件的scroll-into-view属性实现类似锚点效果即可，右侧滚动emmmmmmm......刚开始陷入了死胡同，后来通过参考网上大神的一些思路 完美的实现，主要是通过右侧scroll-view组件bindscroll获取右侧滚动的距离顶部的距离和右侧某一菜单分类的高度进行判断，巴拉巴拉巴拉巴拉巴拉巴拉巴拉...还是直接看代码吧！

wxml:

<view class="left-scroll">
        <scroll-view scroll-y scroll-with-animation style="height:{{scrollHei}}px" scroll-into-view="{{leftViewId}}">
          <view class="left-scroll-list" >
            <block wx:for="{{categorys}}" wx:key="this">
              <view class="left-scroll-item {{item.id == curCategory?'active':''}}"  data-id="menu{{index}}" data-i="{{index}}" bindtap="changeMenu">{{item.name}}</view>
            </block>
          </view>
        </scroll-view>
      </view>

      <view class="right-scroll">
        <scroll-view scroll-y scroll-with-animation scroll-into-view="{{rightViewId}}" style="height:{{scrollHei}}px" bindscroll="getScroll">
          <view class="right-scroll-list">
            <view class="right-scroll-item column" wx:for="{{categorys}}" wx:key="this" id="menu{{index}}">
              <text class="food-class">{{item.name}}</text>
              <view class="food-content row" wx:for="{{item.list}}" wx:key="this" wx:for-item="list">
                <image src="/image/meals-fan.png" class="food-img"></image>
                <view class="food-info column">
                  <text class="food-name">{{list.cateName}}</text>
                  <text class="food-desc">{{list.cateDesc}}</text>
                  <view class="price-add row">
                    <view class="price-info">
                      <text class="curr-price">￥{{list.currPrice}}</text>
                      <text class="origin-price">￥{{list.yjPrice}}</text>
                    </view>
                    <image src="/image/meals-add.png" class="add-food"></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

js

data:{
   // 左侧菜单下标
    menuIndex:0,
    // 右侧滚动view
    rightViewId:'',
    curCategory :1,
   categorys:[
      {
        id:1,
        name:'精品热热菜',
        list:[
          {
            img:'/image/meals-fan.png',
            cateName:'鱼香肉丝',
            cateDesc:'土豆+木耳+鸡蛋',
            currPrice:'9.9',
            yjPrice:'120',
            num:0
          },
          {
            img: '/image/meals-fan.png',
            cateName: '菜名',
            cateDesc: '菜的描述',
            currPrice: '9.9',
            yjPrice: '120',
            num: 0
          },
          {
            img: '/image/meals-fan.png',
            cateName: '菜名',
            cateDesc: '菜的描述',
            currPrice: '9.9',
            yjPrice: '120',
            num: 0
          }
        ]
      },
      {
        id: 2,
        name: '精品凉凉菜',
        list: [
          {
            img: '/image/meals-fan.png',
            cateName: '菜名',
            cateDesc: '菜的描述',
            currPrice: '9.9',
            yjPrice: '120',
            num: 0
          },
          {
            img: '/image/meals-fan.png',
            cateName: '菜名',
            cateDesc: '菜的描述',
            currPrice: '9.9',
            yjPrice: '120',
            num: 0
          },
          {
            img: '/image/meals-fan.png',
            cateName: '菜名',
            cateDesc: '菜的描述',
            currPrice: '9.9',
            yjPrice: '120',
            num: 0
          }
        ]
      },
      {
        id: 3,
        name: '精品伴伴菜',
        list: [
          {
            img: '/image/meals-fan.png',
            cateName: '菜名',
            cateDesc: '菜的描述',
            currPrice: '9.9',
            yjPrice: '120',
            num: 0
          },
          {
            img: '/image/meals-fan.png',
            cateName: '菜名',
            cateDesc: '菜的描述',
            currPrice: '9.9',
            yjPrice: '120',
            num: 0
          },
          {
            img: '/image/meals-fan.png',
            cateName: '菜名',
            cateDesc: '菜的描述',
            currPrice: '9.9',
            yjPrice: '120',
            num: 0
          }
        ]
      }
    ]
},
// 点击左侧菜单栏
  changeMenu(e){
    let rightViewId = e.currentTarget.dataset.id,
        menuIndex = e.currentTarget.dataset.i
    this.setData({
      rightViewId,
      menuIndex
    })
  },

// 获取右侧滚动信息
  getScroll(e){
    let that = this,
        sTop = e.detail.scrollTop,
        categorys = that.data.categorys,
        sumHeight = 0//自定一个一个变量，用来存每个菜类和菜品一共的高度

    for (let index in categorys) {              //循环所有菜类和菜品
      let item = categorys[index],      //菜类
          dishSize = item.list.length;//每个菜类下的所有菜品
      //用定义的变量 加等于 每个菜类标题的高度（15）+ 每个菜类下的所有菜品的数量（dishSize ）乘以 每个菜品的高度（100）
      //就是右侧菜单所有菜类标题和菜品的一共高度
      //（这里的15 和100代表的是像素（px））
      sumHeight += 21 + dishSize * 70;  //这里的21和70最好写活，元素渲染完成后获取单个菜品的高度
      if (sTop <= sumHeight) {//判断当前滚动到顶部隐藏部分的高度，如果小于等于右侧菜单所有菜类和菜品的一共高度
        //那就把当前高度的 菜品属于所在类型的id传给左侧菜单的scroll-into-view 对应值里
        console.log(sTop,sumHeight)
        that.setData({
          curCategory: item.id,
        })
        break;              //跳出当前循环
      }
    }
  },