小程序 商品分类左右联动

效果：点击左边分类，右边滑动到相应商品，滑动右边商品，对应分类发生变化

1.先设置左右两边高度

获取设备高度

onLoad: function(options) {
    // 获取设备信息
    wx.getSystemInfo({
      success: res => {
        this.scrollHeight = res.windowHeight -70;
      }
    });
  },

左右两边用scroll-view包裹

<div class="list df">
      <div class="left">
        <scroll-view scroll-y scroll-with-animation="true" :style="{'height': scrollHeight + 'px'}">
          <ul class="tx-c">
            <li
              :class="curCategory == item.id ? 'active':''"
              v-for="(item,index) in categoryList"
              :key="index"
              @click.stop="selectCategory(item.id)"
            >{{item.name}}</li>
          </ul>
        </scroll-view>
      </div>
      <div style="width:75%;">
        <scroll-view
          :style="{'height': scrollHeight + 'px'}"
          scroll-y
          scroll-with-animation="true"
          :scroll-into-view="curListView"
          @scroll="scrollcontent"
          scroll-top="0"
        >
          <div
            class="right of"
            v-for="(item1,index1) in categoryList"
            :id="'list'+item1.id"
            :key="index1"
          >
            <h2 class="fb">{{item1.name}}</h2>
            <div
              class="of right-li df"
              v-for="(item2,index2) in item1.productList"
              :key="index2"
              @click.stop="details(item2.id,item1.id)"
            >
              <div class="fl right-li-fl">
                <img :src="item2.productPic" />
              </div>
              <div class="fl of">
                <div class="df" style="min-height:38px;">
                  <div class="fb of" style>{{item2.productName}}</div>
                  <div class="new" v-show="item2.isFresh">新品</div>
                </div>
                <div
                  class="little"
                  style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
                >{{item2.productDesc}}</div>
                <div class="little" v-show="false">大/无奶油/冰</div>
                <div class="of right-li-fl-img">
                  <div>
                    <span style="color:#EC5103;">￥{{item2.discountPriceYuan}}</span>&nbsp;
                    <span
                      v-if="item2.marketPriceYuan!==item2.discountPriceYuan"
                      style="text-decoration:line-through;color:#676767;"
                    >￥{{item2.marketPriceYuan}}</span>
                  </div>
                </div>
              </div>
              <div class="right-li-fl-img df">
                <img
                  src="../assets/images/common/home-add.png"
                  class="df-r"
                  @click.stop="addProduct(item2)"
                />
              </div>
            </div>
          </div>
        </scroll-view>
        <div style="height:45px;"></div>
      </div>
    </div>

selectCategory(id) {
      var id = id; 
      this.curListView="list" + id; 
      this.curCategory= id;
 },

scrollcontent: function (e) {
        var scrollHeight = e.mp.detail.scrollTop;
        var categorys = this.categoryList;	
        var sumHeight = 0;						
        for (var index in categorys) {  	
          var type = categorys[index];	
          var dishSize = type.productList.length;
          sumHeight += 15 + dishSize * 100;
          if (scrollHeight <= sumHeight) {
              this.curCategory=type.id
              break;    	
          }
           this.curCategory=type.id
        }
  },

data() {
    return {
      scrollHeight: 0, // 滚动视图的高度fr
      categoryList: {}, //商品分类
      curListView:'',
      curCategory:''
    };
  },

注：这里使用的mpvue框架，在小程序事件中把赋值替换为this.setData()，@click替换为小程序bindtap，标签内样式跟class替换为小程序支持