vue模擬h5外賣點餐雙聯列表

自己用vue手擼的一個h5外賣點餐雙聯列表

#2019.10.28修改：當滾動右邊列表時，左邊列表的激活項超出列表可是範圍的時候左邊列表滾動到相應的激活項位置

<template>
  <div class="goodsListNav">
    <div id="left" class="left">
      <span
        class="leftItem"
        :id="index + 'b'"
        @click="setIsAction(item,index)"
        :style="isAction === index ? leftAction : ''"
        v-for="(item,index) in list"
        :key="index"
      >{{item.name}}</span>
    </div>
    <div id="right">
      <div :id="index + 'a'" class="item" v-for="(item,index) in list" :key="index">
        {{item.name}}
        <div
          class="items"
          v-for="(items,i) in item.ItemList"
          :key="i"
        >{{items.itemName}}----{{items.age}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "goodsListNav",
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      isAction: 0,
      isBottom: false,
      bottomNum: null,
      leftAction: {
        color: "yellow",
        background: "red"
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let dom = document.getElementById("right");
      let domLeft = document.getElementById("left");
      dom.addEventListener("scroll", res => {
        if (this.isBottom) {
          //到底的後往上滾動到底狀態解除回到到底之前的狀態
          this.isAction = this.bottomNum;
          this.bottomNum = null;
          this.isBottom = false;
        }
        let topDom = document.getElementById(this.isAction + "a"); //獲取當前右邊點亮的按鈕
        let leftItem = document.getElementById(this.isAction + "b"); //獲取當前左邊點亮的按鈕
        if (dom.scrollTop > topDom.scrollHeight + topDom.offsetTop) {
          //往下滾動
          this.isAction = this.isAction + 1;
        } else if (dom.scrollTop + 1 < topDom.offsetTop && this.isAction != 0) {
          //網上滾動
          this.isAction = this.isAction - 1;
        } else if (dom.scrollHeight <= Math.ceil(dom.scrollTop + dom.offsetHeight)) {
          //到底存儲最後一個狀態，並設置到底的狀態
          this.bottomNum = this.isAction;
          this.isAction = this.list.length - 1;
          this.isBottom = true;
          domLeft.scrollTo({ top: domLeft.scrollHeight - domLeft.clientHeight})
        }
        if (domLeft.clientHeight + domLeft.scrollTop < leftItem.scrollHeight + leftItem.offsetTop) {
          // 左邊的向上滾動
          domLeft.scrollTo({ top: domLeft.scrollTop + leftItem.scrollHeight})
        } else if (domLeft.scrollTop > leftItem.offsetTop) {
          // 左邊的向下滾動
          domLeft.scrollTo({ top: domLeft.scrollTop - leftItem.scrollHeight})
        }
      });
    },
    setIsAction(item, index) {
      this.isAction = index;
      let dom = document.getElementById("right");
      let topDom = document.getElementById(this.isAction + "a");
      dom.scrollTo({ top: topDom.offsetTop });
    }
  }
};
</script>
<style lang='scss' scoped>
@import "./goodsListNav.scss";
</style>

css

.goodsListNav{
  height: 100%;
  width: 100vw;
  position: relative;
  .left{
    position: absolute;
    top: 0;
    left: 0;
    width: 25vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: scroll;
    .leftItem{
      cursor: pointer;
      padding: 10px 0;
    }
  }
  #right{
    width: 100vw;
    padding-left: 25vw;
    height: 100%;
    overflow: scroll;
    .item{
      padding: 10px 0;
      .items{
        padding: 5px 0
      }
    }
  }
}

數據
 

list: [
        {
          name: 1,
          id: 0,
          ItemList: [
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1}
          ]
        },
        {
          name: 1,
          id: 1,
          ItemList: [
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1}
          ]
        },
        {
          name: 1,
          id: 2,
          ItemList: [
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1}
          ]
        },
        {
          name: 1,
          id: 3,
          ItemList: [
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1}
          ]
        },
        {
          name: 1,
          id: 4,
          ItemList: [
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1}
          ]
        },
        {
          name: 1,
          id: 5,
          ItemList: [
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1},
            {itemName: 1,age: 1}
          ]
        }
      ]

效果圖