共计 1097 个字符,预计需要花费 3 分钟才能阅读完成。
首先 就是我用这个插件的目标
传统的下滑右侧这个滚动有点丑,而且各个浏览器这个 scrollbar 还不一样!最可恶的在于 css 调节后,火狐浏览器却不反对。现在找到了这个插件!真是快乐的想吃辣条庆贺一下
官网网址:https://better-scroll.github.io/docs/zh-CN/
第一步:装置 引入
cnpm i better-scroll -S
而后在应用的页面引入
<script type="text/ecmascript-6">
import BetterScroll from 'better-scroll'
export default {...}
</script>
第二步 应用
- app 疏忽
- a 就是筹备用的滑动外盒子,外面爱多少多少不必管
- ul 无序列表
- li 用 Vue 的遍从来 100 个
- mounted 外面 this.test()
- test 外面创立一个名字 bs,为了把本来的 ID 进行赋值
- mouseWheel 就是问你 鼠标滑动是否开启
- scrollY 问你要不要开启下滑
- scrollbar 问你要不要显示那个滑动的彩色小棍
- 最初就是你抉择好的赋值回给 scroll
最终成果
<template>
<div id="app">
<div class="a" ref="scroll">
<ul>
<li v-for="n in 100" :key="n">{{n}}</li>
</ul>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import BetterScroll from 'better-scroll'
export default {mounted() {this.test()
},
methods: {test() {
let bs = new BetterScroll(this.$refs.scroll, {
mouseWheel: true,
scrollY: true,
scrollbar: true
})
this.$refs.scroll = bs
}
}
}
</script>
<style lang="less">
*,
body,
html {
margin: 0;
padding: 0;
}
.a {
height: 100vh;
overflow: hidden;
width: 200px;
position: relative;
ul {
li {
height: 50px;
line-height: 50px;
font-size: 20px;
font-weight: bold;
text-align: center;
background: #a1a1a1;
border-bottom: 1px solid #e3e3e3;
color: #fff;
}
}
}
</style>
爱我你怕了吗?
正文完