微信小程序-商品列表右=>左联动（二）

上一篇：《微信小程序-商品列表左=>右联动（一）》

上一篇讲解了左=>右联动，那个还比较简单，本篇写剩下比较核心的部分，也是本次开发过程中遇到最难的部分，右=>左联动，先简单看一下演示

右左联动.gif

一、关键技术：
(1) 小程序 wxss 中使用 rpx，而 js 中 scrollTop 获取到的值是 px，所以存在rpx 转 px 的问题。以 iPhone6 为基准，转换公式：

// percent 为当前设备1rpx对应的px值
var percent = res.windowWidth / 750;

详情参考：WXSS尺寸单位

(2) 微信自带scroll-view UI组件，通过 bindscroll="scroll" 绑定滚动事件；通过 scroll-top="{{scrollTop}}" 动态控制 左侧滑栏的被动滚动。
二、实现思路：
通过计算整个右侧滑栏滚动上去的高度 与 右侧滑栏中每一个分类距顶部的距离做比对，获取到该滚动置顶的分类的 index 。然后用获取到的 index 乘以左侧滑栏中某一项的高度，动态赋值给左侧滑栏内的 scrollTop ，控制左侧滑栏的联动。

图片发自App

以下是代码，考虑到部分新手同学，几乎为每一行代码添加了注释。
wxml代码：标签中属性如有不懂，请自行查看小程序API，内有详细讲解！

  
  
  
     
        
          
          
        {{itemName[0].title}}  
        
    
  

  
  
     
      
        {{itemName[0].title}}
           
              
              
                   
                  
                    
                    {{item.desc}}  
                   
                  
                
                  
           
        
             
    
  
  

js代码：

// pages/list-1/list-1.js
var list = require('../../utils/list.js')
Page({
  data: {
    // 左侧点击类样式
    curNav: 'A',
    scrollTop: 0,
    // 定义一个空数组，用来存放右侧滑栏中每一个商品分类的 Height
    listHeight:''
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    var that = this;
    // 定义右侧标题的 rpx 高度 和 px 高度
    var right_titleRpxHeight = 60;
    var right_titleHeight;
    // 定义右侧单个商品的 rpx 高度 和 px 高度
    var right_contentRpxHeight = 180;
    var right_contentHeight;
    // 定义左侧单个tab的 rpx 高度 和 px 高度
    var left_titleRpxHeight = 140;
    var left_titleHeight;
    //  获取可视区屏幕高度
    wx.getSystemInfo({
      success: function (res) {
        // percent 为当前设备1rpx对应的px值
        var percent = res.windowWidth / 750;
        that.setData({
          winHeight: res.windowHeight,
          right_titleHeight: Number(right_titleRpxHeight * percent),
          right_contentHeight: Number(right_contentRpxHeight * percent),
          left_titleHeight: Number(left_titleRpxHeight * percent)
        })
      }
    })
    // 把请求到的 list 中的数据赋值给  listChild1
    var listChild1 = list.List[0];
    // 定义一个 names ，用于存放 scroll-into-view 使用的 id
    var names = '';
    // 循环 listChild1 中的每一项
    for (var item in listChild1) {
      // 把 listChild1 中每一项的键值用“：”（便于后期处理）分隔开，存入 names 中，数据格式见图‘names中的数据’
      names+= ":"+item;
      // 计算右侧每一个分类的 Height 。
      // listChild1 下的每一个 item 中包含该分类的 title，所以 listChild1[item].length 需要减一 
      // 右侧每一个分类中每一行放两个商品，所以 this.data.right_contentHeight 除二
      // 最后加上 right_titleHeight，此时 height 为右侧一个完整分类的高度
      var height = (listChild1[item].length - 1) * this.data.right_contentHeight / 2 + this.data.right_titleHeight;
      // 同上面 names 的道理，把每一个 height 用“：”隔开放入 listHeight 中
      this.data.listHeight += ":" + height;
      this.setData({
        // 把 listChild1 赋值给 list ，供 wxml 中循环使用
        list: listChild1,
        listHeight:this.data.listHeight
      })
    }
    // 把 names 的数据切成数组
    var names = names.substring(1).split(':');
    this.setData({
      names:names
    })
  },
  // 右侧滑栏的 bindscroll 事件函数（ES6写法）
  scroll(event){
    // 把 listHeight 切割成数组
    var height = this.data.listHeight.substring(1).split(':');
    // 定义一个 index 供左侧边栏联动使用
    var index = 1;
    var num = 0;
    for(var i = 0;i event.detail.scrollTop){
          index = i+1;
          // 如果右侧滑栏滚动高度小于单个类别高度的 1/2 时，index 为 0
          if (event.detail.scrollTop < height[0]/2) {
            index = 0;
          }
          break;
        }
    }
    // 定义并设置左侧边栏的滚动高度
    var left_scrollTop = this.data.left_titleHeight*index
    this.setData({
      scrollTop: left_scrollTop,
      // 动态给左侧滑栏传递对应该项的 id，用于高亮效果显示
      curNav: this.data.names[index]
    })
  },
  //点击左侧 tab ，右侧列表相应位置联动 置顶
  switchRightTab: function (e) {
    var id = e.target.id;
    this.setData({
      scrollTopId: id,
      // 左侧点击类样式
      curNav:id,
    })
  }
})  
  

样式表 和 list 数据请翻看上一篇：《微信小程序-商品列表左=>右联动（一）》

有不懂之处，请先翻阅上一篇，如还有疑问，那肯定是笔者没写明白，还请读者不吝留言！