码迷,mamicode.com
首页 > 其他好文 > 详细

Vue better-scroll使用指南

时间:2019-10-25 23:12:05      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:就是   pre   component   pac   get   target   方式   this   position   

1.安装(官方文档上有,不多言了)

NPM

better-scroll 托管在 Npm 上,执行如下命令安装:

npm install better-scroll --save

接下来就可以在代码中引入了,webpack 等构建工具都支持从 node_modules 里引入代码:

import BScroll from ‘better-scroll‘

如果是 ES5 的语法,如下:

var BScroll = require(‘better-scroll‘)

script 加载

better-scroll 也支持直接用 script 加载的方式,加载后会在 window 上挂载一个 BScroll 的对象。

你可以直接用:https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js 这个地址。也可以把 dist 目录下的文件拷贝出去发布到自己的 cdn 服务器。

2.Scroll的封装(每个页面都导入使用太过于麻烦,耦合太高,因此我做了封装)

 1 <template>
 2     <div class="wrapper" ref="wrapper">
 3         <div class="content">
 4             <slot></slot>
 5         </div>
 6     </div>
 7 </template>
 8 
 9 <script>
10     import BScroll from ‘better-scroll‘
11 
12     export default {
13         name: "Scroll",
14         props: {
15             probeType: {
16                 type: Number,
17                 default: 0
18             },
19             pullUpLoad: {
20                 type: Boolean,
21                 default: false
22             }
23         },
24         data() {
25             return {
26                 scroll: null,
27                 message: ‘哈哈哈‘
28             }
29         },
30         mounted() {
31             // 1.创建BScroll对象
32             this.scroll = new BScroll(this.$refs.wrapper, {
33                 click: true,
34                 probeType: this.probeType,
35                 pullUpLoad: this.pullUpLoad
36             })
37 
38             // 2.监听滚动的位置
39             this.scroll.on(‘scroll‘, (position) => {
40                 // console.log(position);
41                 this.$emit(‘scroll‘, position)
42             })
43 
44             // 3.监听上拉事件
45             this.scroll.on(‘pullingUp‘, () => {
46                 this.$emit(‘pullingUp‘)
47             })
48         },
49         methods: {
50             scrollTo(x, y, time = 300) {
51                 this.scroll.scrollTo(x, y, time)
52             },
53             finishPullUp() {
54                 this.scroll.finishPullUp()
55             }
56         }
57     }
58 </script>
59 
60 <style scoped>
61 
62 </style>

3.使用 (将想要滚动的内容放在 <Scroll-box></Scroll-box>中即可)

<template>
        <scroll-box class="content">
     <div></div>    
        </scroll-box>
    </div>
</template>

<script>
    import Scroll from ‘../../subcomponents/Scroll‘
    export default {
    
        data() {
            return {
            }
        },
        components: {
            ‘scroll-box‘: Scroll
        },
        created() {
        },
        methods: {
    }
</script>

<style lang="scss" scoped>
    .content {
        height: 350px;
    }
</style>

4.其他

其他问题,就是如何调整最合适的滚动区域,以及监听滚动的位置了,在官方文档上查看即可

Vue better-scroll使用指南

标签:就是   pre   component   pac   get   target   方式   this   position   

原文地址:https://www.cnblogs.com/apex-wzw/p/11741205.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!