简单实现左右内容联动（微信小程序）-灵析社区

之前做了一个简单的小程序项目，其中需要实现内容联动的功能。该页面左侧表示商品类别，右侧表示商品。点击左侧的商品分类菜单，右侧的内容需要滑动对应的商品分类下；滑动右侧的商品列表，左侧对应的商品分类会选中（高亮显示）。页面展示效果如下：

wxml页面布局

页面右侧模块需要滚动，所以使用 scroll-view组件包裹

注意：使用scroll-view组件竖向滚动时，需要指定高度（单位为px），否则不会进行滚动 scrol-into-view的用法类似于html中#id的锚点功能，根据指向的id值（某子元素的id, 并且不能以数字开头），来决定内容滚动到哪里。

<view class="catelist">
    <view>
        // 左侧商品类别
    </view>
    <scroll-view class='scrollRight'  scroll-y scroll-with-animation style='height: {{winHeight}}px' bindscroll="scrollToLeft" scroll-into-view="{{contentActive}}"   >
        // 右侧商品列表
    </scroll-view>
</view>

页面功能逻辑

a. 获取滚动区域高度

滚动区域的高度为设备的高度，使用通过微信官方api getSystemInfo接口API获取，该api可以获取设备高度

注：实际项目中，需要获取到商品数据之后，再获取高度

getSystem() {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winHeight: res.windowHeight
        });
    });
},

b. 点击左侧商品分类菜单，右侧滚动到对应分类下的商品

给左侧商品分类菜单绑定bindtap事件处理函数，事件触发后取出渲染页面时存放在该节点上的分类id（使用字母type加id的形式）和索引index。分类id用来作为唯一标识定位右侧商品列表，更新右侧内容scroll-view的scroll-to-view属性；索引index用来控制左侧菜单栏高亮显示。

在右侧每个分类下的商品列表头部增加一个元素，加上id标识 id='type{{item.id}}'（相当于锚点），实现点击商品分类时，右侧商品列表滚动到对应分类。

// 左侧点击事件
chooseType(e) {
    //currentTarget表示当前绑定事件对应的节点
    let dataSet = e && e.currentTarget && e.currentTarget.dataset;
    this.setData({
      navActive: dataSet.index,  
      contentActive: dataSet.id  
    });
},

// 左侧点击事件
chooseType(e) {
    //currentTarget表示当前绑定事件对应的节点
    let dataSet = e && e.currentTarget && e.currentTarget.dataset;
    this.setData({
      navActive: dataSet.index,  
      contentActive: dataSet.id  
    });
},

b. 滑动右侧商品列表，与之对应的左侧商品分类菜单高亮显示

1.算出右侧列表中的每一个商品模块距离顶部的高度，保存至一个数组里

getSystem() {
    const that = this
    wx.getSystemInfo({
      success: function (res) {
        let heightArr = [];
        let h = 0;
        //创建节点选择器
        const query = wx.createSelectorQuery();
        //选择id
        query.selectAll('.list').boundingClientRect()
        query.exec(function (res) {
          res[0].forEach((item) => {
            h += item.height;
            heightArr.push(h);
          })
          that.setData({
            top: heightArr
          })
        })
      }
    });
},

2.滑动右侧商品列表时，在bindscroll绑定的函数中,获取当前滑动的高度，与商品模块距离顶部的高度对比来知道目前滑动到那个商品区域，并返回当前分类对应的索引

scrollToLeft(res) {
    const scrollTop = res.detail.scrollTop;
    const scorllArr = this.data.top;
    const that = this;
    if (scrollTop < scorllArr[scorllArr.length - 1] - that.data.winHeight) {
      for (let i = 0; i < scorllArr.length; i++) {
        if (scrollTop >= 0 && scrollTop < scorllArr[0]) {
          that.setData({
            navActive: 0,
          })
        } else if (scrollTop >= scorllArr[i - 1] && scrollTop < scorllArr[i]) {
          that.setData({
            navActive: i
          })
        }
      }
    }
  },

注：此处功能暂时没有考虑左侧商品分类滑动的情况