一、介绍
关于better-scroll的原文详细介绍请参考，这里只做总结
黄老师的文章《当 better-scroll 遇见 Vue》的详细介绍
better-scroll的api：点击
better-scroll的滚动原理
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。
better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。
二、better-scroll在vue中的使用
Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper 访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。
这里的 this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染，感兴趣的同学可以了解一下它的内部实现细节，底层用到了 MutationObserver 或者是 setTimeout(fn, 0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的（20 ms 是一个经验值，每一个 Tick 约为 17 ms），对用户体验而言都是无感知的。
这里从今日头条截取获取后台数据链接，用vue-jsonp来异步获取数据。
安装vue-jsonp
npm install vue-jsonp --save-dev
在组件单独使用
import Vue from ‘vue‘ import VueJsonp from ‘vue-jsonp‘ Vue.use(VueJsonp)
详细请参考 vue-jsonp的npm地址：点击
<template>
<div>
<nav class="nav">
<ul>
<li>推荐</li>
</ul>
</nav>
<div class="wrapper" ref="wrapper">
<div class="content" >
<section class="has_action" v-for="item in data" :key="item.datetime">
<div class="item-detail">
<h3 class="dotdot">{{item.title}}</h3>
<div class="item-info">
<div>
<span class="stick_label space">{{item.label}}</span>
<span class="src space">{{item.media_name}}</span>
<span class="cmt space">评论{{item.comment_count}}</span>
<span class="time space" title="2018-11-05 19:23">{{item.datetime}}</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</template>
<script>
import Vue from ‘vue‘
import VueJsonp from ‘vue-jsonp‘
import BScroll from ‘better-scroll‘
Vue.use(VueJsonp)
export default {
name: ‘myscroll‘,
data() {
return {
data: []
}
},
created() {
this._getData().then(json => {
this.data = json.data
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.wrapper,{})
})
})
},
methods: {
// 或者页面数据，跳用今日头条数据接口
_getData() {
return this.$jsonp(‘https://m.toutiao.com/list‘,{
tag: ‘__all__‘,
ac: ‘wap‘,
count: 20,
format: ‘json_raw‘,
as: ‘A1B57B7E600F6A7‘,
cp: ‘5BE0AFC5FDAEAE1‘,
min_behot_time: 1541469897,
_signature: ‘A6d5hAAAWEyp4NHR.YRHRAOneZ‘,
i: 1541469650
})
}
}
}
</script>
注意：nav和wrapper这两个class的css定位属性
<style scoped lang="stylus">
.nav
z-index: 999
position: fixed
display: block
box-sizing: border-box
height: 74px
width: 100%
text-align: center
line-height: 74px
font-size: 20px
color: #f85959
background: #f4f5f6
.wrapper
position: fixed
top: 74px
left: 0
bottom: 0
right: 0
overflow: hidden
.content
list-style: none
.has_action
position: relative
margin: 0 30px
border-bottom: 1px solid rgba(221, 221, 221, 0.6)
.item-detail
padding: 32px 0px;
.dotdot
overflow: hidden
text-overflow: ellipsis
line-height: 42px
font-size: 34px
font-weight: normal
color: #222
.item-info
margin-top: 12px
overflow: hidden
font-size: 0
color: #999
.space
display: inline-block
margin-right: 10px
vertical-align: middle
line-height: 30px
font-size: 28px
.stick_label
border-radius: 4px
border: 1PX solid rgba(248,89,89,.5)
width: 60px
text-align: center
color: #f85959
</style>
结果如下：
原文地址：https://www.cnblogs.com/Jiangchuanwei/p/9919825.html