vue-classic-scroll

Vue scroll component based on better-scroll

中文文档

usage mode

npm i vue-classic-scroll

import Scroll from 'vue-classic-scroll'
import 'vue-classic-scroll/dist/index.css';

// Local or global registration

notice

I am very sorry that I am not familiar with webpack, so I use vue-cli3 for packaging. For tool reasons, please add some code in the Let's add some code to our babel.config.js file

babel.config.js

module.exports = {
 presets: [
   '@vue/app'
 ],
   sourceType: 'unambiguous'   // add this code
 }

example

  <div class="home">
    <Scroll 
      class="xue-hei"
      :length="nais.length"
      @downScroll="scroll"
    >
      <ul>
        <li v-for="item in nais" :key="item">{{item}}</li>
      </ul>
    </Scroll>
  </div>
</template>

<script>
export default {
  data(){
    return{
      nais:[]
    }
  },
  methods:{
    scroll(end){
      setTimeout(()=>{
        end() // Called after the event ends
      },1000)
    }
  },
}
</script>
<style>
.xue-hei{
  height: 200px; // Height must be defined
}
</style>

Common events and parameters

| event | type | explain | | :-------- | :--------: | :------------ | | downScroll | function | The drop-down triggers the event | | upScroll | function | Pull up trigger event |

| parameter | type | required | explain | | :-------- | :------------: | :--------: | :------------ | | options | object | false | initialization parameter. Support for better-scroll all parameters and events | | class | object | true | Height must be defined | | length | number | true | Length of data | | loadText | string/array | false | The text at load time | | loadEndText | string/array | false | The text at the end of the load | | startIcon | string/array | false | Icon for drop-down | | loadIcon | string/array | false | Icon at load time | | emptyText | string | false | Text displayed without data | | emptyIcon | string | false | Icon displayed when no data is available |

better-scroll

versions

0.1.9 first version