vue遇见better-scroll
better-scroll
better-scroll 是一款重点解决移动端(现已支持 PC 端)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 JS lib。
GIT地址:https://github.com/ustbhuangyi/better-scroll
文档用法
HTML
<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM,但不会影响滚动 --> </div>
上面的代码中 better-scroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。这里要注意的是,better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。
JS
import BScroll from 'better-scroll' const wrapper = document.querySelector('.wrapper') const scroll = new BScroll(wrapper)
脑壳疼。。我按照文档上的方法试了一下,发现不行,可能是其他地方影响到了。下次再试下
未调用data.json的用法
这时候数据未加载
HTML
<template> <div class="seller" ref="seller"> <div class="seller-content"> 内容....... </div> </div> </template>
JS
import BScroll from 'better-scroll' export default { created () { this.$nextTick(() => { this.scroll = new BScroll(this.$refs.seller, { click: true }) }) } }
这个还是有问题。。。刷新的时候加载没有反应,但是没效果。。考虑应该是数据未加载
调用data.json的用法
数据已加载
HTML
<template> <div class="seller" ref="seller"> <div class="seller-content"> 内容....... </div> </div> </template>
JS
export default { created () { this.$http.get('/api/seller').then((response) => { response = response.body if (response.errno === 0) { // this.seller = response.data this.$nextTick(() => { this.scroll = new BScroll(this.$refs.seller, { click: true }) }) } }) } }
这样等数据响应以后再调用,就灵性了很多
水平滑动
this.picScroll = new BScroll(this.$refs.picWrapper, { // 允许点击事件 click: true, // 水平滚动 scrollX: true, // eventPassthrough: 'vertical' })
左右联动滚动
左右菜单滚动时联动,并且点击左边右边滚动到相应位置
点击按钮滚动到指定位置
例,点击按钮在300毫秒内滚动到指定位置
let el = document.getElementsByClassName('right-list')
this.scroll_right.scrollToElement(el[8], 300)
HTML
<button @click="abc">abc</button>
JS
created () { this.$nextTick(() => { this.scroll_right = new BScroll(this.$refs.hc_right, { click: true }) }) }, methods: { abc () { let el = document.getElementsByClassName('right-list') this.scroll_right.scrollToElement(el[8], 300) } }
获取滚动时的Y值
<div class="hc-right" ref="hc_right"> <ul> <li class="right-list" v-for="(number,index) of num" v-bind:key="index">{{number}}{{number}}</li> </ul> </div>
created () { this.$nextTick(() => { this.scroll_right = new BScroll(this.$refs.hc_right, { // 允许执行点击事件 click: true, // 滚动的探针---加了这个才能在滚动时获取到数据 probeType: 3 }) // 右侧滚动时获取到Y值 this.scroll_right.on('scroll', (pos) => { this.scrollY = Math.abs(Math.round(pos.y)) }) }) },
全部代码
左右侧联动。
点击左边,右边滑动到对应位置。
滑动右边,左边滚动到对应位置。
原理:左右侧对应的index值是一样的,滚动时保持index值相同。
这里有个问题就是,如果右侧的内容高度太低,就会使得左侧无法拉倒最下面,因为未达到最下面的选项,右侧已经显示出了内容。
效果-----
HTML-----
<template> <div class="hello"> <div class="hc-left" ref="hc_left"> <ul> <li class="left-list" :class="{'current':current == index}" v-for="(number,index) of num" @click="clickMove(index)" v-bind:key="index">{{number}}</li> </ul> </div> <div class="hc-right" ref="hc_right"> <ul> <li class="right-list" v-for="(number,index) of num" v-bind:key="index">{{number}}{{number}}</li> </ul> </div> </div> </template>
JS-----
<script> import BScroll from 'better-scroll' export default { data () { return { num: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], // 高度数组 heightArr: [], // 速度 speed: 300, // 当前index current: 0 } }, created () { this.$nextTick(() => { this.scroll_left = new BScroll(this.$refs.hc_left, { // 允许执行点击事件 click: true }) this.scroll_right = new BScroll(this.$refs.hc_right, { // 允许执行点击事件 click: true, // 滚动的探针---加了这个才能在滚动时获取到数据 probeType: 3 }) // 右侧滚动时获取到Y值 this.scroll_right.on('scroll', (pos) => { // 取整的绝对值 this.scrollY = Math.abs(Math.round(pos.y)) let i = 0 let el = document.getElementsByClassName('left-list') // 比较数组大小,得出对应的index for (i; i < this.heightArr.length; i++) { // 当大于时则跳出循环 if (this.scrollY < this.heightArr[i]) { // 跳出循环 break } } // 左侧滚动到与右侧对应的位置 this.scroll_left.scrollToElement(el[i],this.speed) this.current = i }) // 调用右侧的高度数组 this._calculateHeight() }) }, methods: { // 点击左侧跳转到对应位置 clickMove (index) { let el = document.getElementsByClassName('right-list') this.scroll_right.scrollToElement(el[index], this.speed) this.current = index }, // 计算右侧的高度数组 _calculateHeight () { let el = document.getElementsByClassName('right-list') let heightAll = 0 for (let i = 0; i < el.length; i++) { heightAll = heightAll + el[i].clientHeight this.heightArr.push(heightAll) } } } } </script>
CSS----
<style scoped> .hello{ position: absolute; top: 174px; left: 0; bottom: 0; width: 100%; display: flex; overflow: hidden; } ul { list-style-type: none; padding: 0; } li { display: inline-block; width: 100%; line-height: 60px; border: 1px solid red; text-align: center } a { color: #42b983; } .hello-content{ display: flex; } .hc-left{ width: 100px; flex: 0 0 100px } .hc-right{ flex: 1 } .hc-right li{ line-height: 100px } .right-list:nth-child(2n+1){ line-height: 200px } .hc-left .current{ background-color: red; color: white; } </style>