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:;
bottom:;
width: 100%;
display: flex;
overflow: hidden;
}
ul {
list-style-type: none;
padding:;
}
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>