Vue scroll index

This is a Vue.js's directive that let the html DOM can be move with mouse

Version: 1.0.2 Updated: 12/30/2019

By: ShuangMuChengLi License: MIT

Downloads Last 30 Days: 29

Scroll the list, get the index of the list scroll position.

Install

npm install vue-scroll-index

Usage

import Vue from 'vue';
import VueScrollIndex from 'vue-scroll-index';
Vue.use(VueScrollIndex);
<template>
  <div>
    <div
      class="nav-wrapper"
    >
      <h2>
        导航
      </h2>
      <p>当前: {{ currentIndex }}</p>
      <div>
        <el-button
          type="primary"
          @click="ulShow = !ulShow"
        >显示/隐藏</el-button>
      </div>
      <ul
        class="nav"
      >
        <li
          v-for="(item, key) in 10"
          :key="'nav' + key"
          class="nav-item"
          :class="{ active: key === currentIndex }"
        >
          <header>{{ key }}</header>
        </li>
      </ul>
    </div>

    <ul
      v-if="ulShow"
      id="list"
      v-scroll-index="callback"
      class="list"
    >
      <li
        v-for="(item, key) in 10"
        :id="'item' + key"
        :key="key"
        class="item"
      >
        <header>{{ key }}</header>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AnchorTest',
  data(){
    return {
      currentIndex:0,
      ulShow:true
    };
  },
  mounted() {

  },
  methods:{
    callback(index){
      console.log(index);
    }
  }
};
</script>

<style scoped lang="less">
  .list{
    height: 300px;
    overflow-y: auto;
    float: left;
  }
  .item{
    width: 300px;
    height: 200px;
    border: 1px solid #333;
    margin: 10px;
    line-height: 200px;
    text-align: center;
    font-size: 20px;

  }
  .nav-wrapper{
    line-height: 2;
    width: 200px;
    float: left;
    padding:10px;
    .nav-item{
      &.active{
        color: #ff0000;
      }
    }
  }
</style>

Categories: Vue js
Tags: