左右滚动插件

vue 左右滚动插件

效果展示

gundong.gif

模板部分

<template>
    <div class="scroll_wrap">
        <div class="scroll_l">
            <div
                v-bind:style="{
                    height: left_item_h + 'px',
                    'line-height': left_item_h + 'px'
                }"
                v-bind:class="[left_index == index ? 'activeClass' : '']"
                class="l_item"
                v-for="(item, index) in ori_data"
                :key="index"
                @click="left_item_click(index)"
            >
                {{ item.name }}
            </div>
        </div>
        <div class="scroll_r" ref="scroll_r" v-on:scroll="on_right_scroll">
            <div
                v-bind:style="{
                    height: right_item_h + 'px',
                    'line-height': right_item_h + 'px'
                }"
                v-for="(item, index) in right_data"
                :key="index"
                class="r_item"
            >
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

js部分

function my_scroll (currentY, targetY , element) {
  // 计算需要移动的距离
  console.log("00000")
  let needScrollTop = targetY - currentY
  let _currentY = currentY
  setTimeout(() => {
    // 一次调用滑动帧数，每次调用会不一样
    const dist = Math.ceil(needScrollTop / 10)
    _currentY += dist
    element.scrollTo(_currentY, currentY)
    // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
    if (needScrollTop > 10 || needScrollTop < -10) {
      my_scroll(_currentY, targetY, element)
    } else {
      element.scrollTo(_currentY, targetY)
    }
  }, 1)
}

export default {
    name: 'dashboard',
    props: ["left_item_h" , "right_item_h" , "ori_data"],
    data() {
        return {
            left_index: 0
        }
    },
    computed: {
        right_data() {
            var tmp_arr = [];
            this.ori_data.forEach((item, index) => {
                tmp_arr = tmp_arr.concat(item.item_arr);
            });

            return tmp_arr;
        }
    },

    methods: {
        on_right_scroll() {
            var scroll_h = this.$refs.scroll_r.scrollTop;
            var item_num = 0;
            var item_heitht = 0;
            for (var index = 0; index < this.ori_data.length; index++) {
                var item = this.ori_data[index];
                var one_height = item.item_arr.length * this.right_item_h;
                item_num++;
                item_heitht = item_heitht + one_height;
                if (item_heitht >= scroll_h) {
                    break;
                }
            }

            this.left_index = item_num - 1;
        },
        left_item_click(index) {
            this.left_index = index;

            var select_h = 0;
            for (var i = 0; i < index; i++) {
                select_h = select_h + this.ori_data[i].item_arr.length * this.right_item_h;
            }
            // this.$refs.scroll_r.scrollTo(0, select_h + 4);
            var ele = this.$refs.scroll_r
            console.log(ele.scrollTop , select_h , ele)
            my_scroll(ele.scrollTop , select_h + 6 , ele)
        }
    }
};

css部分

.scroll_wrap {
    width: 100%;
    height: 100%;
    display: flex;
}
.scroll_l {
    flex: 1;
    /* border: 1px solid red; */
    overflow: scroll;
}
.scroll_r {
    flex: 3;
    /* border: 1px solid blue; */
    overflow: scroll;
}

.l_item,
.r_item {
    width: 100%;
    border: 1px solid gray;
    padding: 2px 4px;
    text-align: center;
    box-sizing: border-box;
    /* transition: all 1s; */
}
.activeClass {
    color: red;
}

使用方法：
在使用的地方导入该组件, 并直接使用

1. 导入组件
import gundong from "../common/gudong.vue"

....
2. 注册组件
components: {
        gundong
},

3.  准备数据
data () {
      return {
            xxx: [
                  {
                        name: "类目1",
                        item_arr: [
                              {
                                    name: "类目1 - 1"
                              },
                              {
                                    name: "类目1 - 2"
                              },
                        ]
                  },
                  {
                        name: "类目2",
                        item_arr: [
                              {
                                    name: "类目2- 1"
                              },
                              {
                                    name: "类目2 - 2"
                              },
                        ]
                  }
            ]
      }
}


....
4. 在界面中使用组件， 并传递属性数据
<gundong 
        :left_item_h="50" 
        :right_item_h="80" 
        :ori_data="xxx">
 </gundong>

解释： 
left_item_h： 左侧类目元素的高度
right_item_h：  右侧物品元素的高度
ori_data：  数据结构