better-scroll的使用

1.首先在页面中要有一个固定高度的容器

注：.wrapper就是这个容器且这个容器只能有一个子容器

 <div class="wrapper"ref="wrapper"><ul class="moviebox"><li v-for="(ele,index) in movieList":key="index"class="movieContainer"><div class="left"><img :src="ele.poster"width="100"alt=""></div><div class="middle"><p>{{ ele.name }}</p><p>观众评分：<i>7.3分</i></p><p>主演</p><p>美国|114分钟</p></div><div class="right"><a href="javascript:;">购票</a></div></li></ul></div>

2.为这个容器设置高度和溢出隐藏

.wrapper {height: vw(1000);overflow: hidden;
}

3.在mounted中使用这个插件

注：当然前提是要下载这个插件并且引入

import BScroll from 'better-scroll'
export default {async mounted () {const options = {scrollY: true, // 因为scrollY默认为true，其实可以省略scrollbar: true,scrollbar: {fade: false},pullDownRefresh: {threshold: 50, // 当下拉到超过顶部 50px 时，触发 pullingDown 事件// stop: 20 // 刷新数据的过程中，回弹停留在距离顶部还有 20px 的位置},pullUpLoad: {threshold: -20 // 在上拉到超过底部 20px 时，触发 pullingUp 事件}}this.$nextTick(() => {this.scroll = new BScroll(this.$refs.wrapper, options)this.scroll.on('pullingDown', async () => {console.log('shang');this.pagenum--// 刷新数据的过程中，回弹停留在距离顶部还有20px的位置this.getmovie(this.pagenum);this.scroll.finishPullDown();//告诉better-scroll上拉已经完成this.scroll.refresh()//刷新});this.scroll.on('pullingUp', async () => {console.log('lalal');this.pagenum++this.getmovie(this.pagenum)this.scroll.finishPullUp();//告诉better-scroll下拉已经完成this.scroll.refresh()//刷新})})// await setTimeout(() => {//   this.scroll = new BScroll(this.$refs.wrapper, options)//   this.scroll.on('pullingDown', async () => {//     console.log('shang');//     this.pagenum--//     // 刷新数据的过程中，回弹停留在距离顶部还有20px的位置//     this.getmovie(this.pagenum);//     this.scroll.finishPullDown();//     this.scroll.refresh()//   });//   this.scroll.on('pullingUp', async () => {//     console.log('lalal');//     this.pagenum++//     this.getmovie(this.pagenum)//     this.scroll.finishPullUp();//     this.scroll.refresh()//   })// }, 1000)},created () {this.getmovie(this.pagenum);},data () {return {cinemaList: [],movieList: [],pagenum: 1}},methods: {async getmovie (pagenum) {const { data } = await axios({url: `https://m.maizuo.com/gateway?cityId=440100&pageNum=${pagenum}&pageSize=10&type=1`,method: 'get',headers: {'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16048932421303221926625281","bc":"440100"}','X-Host': 'mall.film-ticket.film.list'}});// console.log(data.data.films);data.data.films.forEach(item => {this.movieList.push(item)})// this.movieList.push(data.data.films);// this.movieList = data.data.films;// console.log(this.movieList);}},components: {}
}

4.监听滚动事件

在创建betterscrop的实例的时候要加上配置probeType
数值是1 2 3 默认为1就是不监听滚动 2是不包括惯性滑动的距离 3 包括惯性滑动的距离

 this.scroll = new BScroll(this.$refs.wrapper, {click: true,probeType: 3,pullUpLoad: true,})

回调函数中的参数是当前页面的位置
往下滑是负数

//监听滚动事件this.scroll.on('scroll', (position) => {// console.log(position)// this.scrollHeight = positionthis.$emit('scroll', position)})

5.快速到达某一位置一般用于回到顶部

参数1是要到达的横轴位置
参数2是要到达的y轴位置
参数3是滑动过程中执行动画的总时间默认为0

this.scroll.scrollTo(x, y, time)

6.监听上拉事件

在创建betterscrop的实例的时候要加上配置pullUpLoad
默认为false

 this.scroll = new BScroll(this.$refs.wrapper, {click: true,probeType: 3,pullUpLoad: true,})

回调函数里面是上拉的时候触发的事件

 //监听上拉事件this.scroll.on('pullingUp', () => {// console.log('上拉加载更多')this.$emit('pullingUp')})

7.关于一开始没法下滑和加载完新的数据无法下滑的bug

原因：因为better-scroll一开始会根据你设置的wrapper的高度去计算剩下还有多少内容没有展示出来从而得出可以滑动的距离
那么不能滑动就是因为一开始图片之类的资源还没有加载出来 better-scroll计算的时候没有将图片的高度计算下去所以可滑动的距离不足就无法下滑

那么解决方案就是在每次请求完数据之后都加上**refresh()**函数

例子：这是一个请求数据的函数在最后调用了scroll组件中的refresh方法

  async getHomeGoods(type) {const page = this.goods[type].page + 1const result = await getHomeGoods(type, page)console.log(result)this.goods[type].list.push(...result.data.list)this.goods[type].page += 1this.$refs.scroll.refresh()},

better-scroll的使用相关推荐

extjs中滚动条属性_十分钟快速了解 JS 中的 offset、scroll、client
(给前端大全加星标,提升前端技能) 作者:前端下午茶公号 / SHERlocked93 在下开发中经常碰到 offset.scroll.client 这几个关键字,比如 offsetLeft.of ...
react取消监听scroll事件
如果要移除事件addEventListener的执行函数必须使用外部函数而不能直接使用匿名函数错误写法: // 这样写是移除不了滚动事件的 componentDidMount() {// 添加滚动监 ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
javascript + css 利用div的scroll属性让TAB动感十足
做了一个动感十足的TAB不敢独占,写出来大家共享,大家可以到宝宝孕历首页看看效果. 其实现是通过js控制div的scrollLeft属性来实现的,tab分成两个部分tab头部分和tab体部分,tab体 ...
31 元素滚动scroll系列
技术交流 QQ 群:1027579432,欢迎你的加入! 1.元素 scroll 系列属性使用 scroll 系列的相关属性可以动态的得到该元素的大小.滚动距离等. 2.页面被卷去的头部如果浏览器 ...
搜索页面scroll下拉时候进行刷新，显示更多搜索值
1.封装扩展scroll.vue功能: 1 //props传值 pullup:{ 2 type:Boolean, 3 default:false 4 } 5 6 7 _initScroll(){ 8 ...
[转]用 jQuery 实现页面滚动（Scroll）效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
scroll事件实现监控滚动条并分页显示示例（zepto.js）
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
如何在Storyboard中使用Scroll view
本文章环境Xcode 11 在开始使用scroll view之前(storyboard/XIB),我们必须搞清楚两个东西在Storybord/Xib中使用Scroll view,会有哪些结构为什么 ...

better-scroll的使用

1.首先在页面中要有一个固定高度的容器

2.为这个容器设置高度和溢出隐藏

3.在mounted中使用这个插件

4.监听滚动事件

5.快速到达某一位置一般用于回到顶部

6.监听上拉事件

7.关于一开始没法下滑和加载完新的数据无法下滑的bug

better-scroll的使用相关推荐

最新文章

热门文章

better-scroll的使用

1.首先在页面中要有一个固定高度的容器

2.为这个容器设置高度和溢出隐藏

3.在mounted中使用这个插件

4.监听滚动事件

5.快速到达某一位置 一般用于回到顶部

6.监听上拉事件

7.关于一开始没法下滑和加载完新的数据无法下滑的bug

better-scroll的使用相关推荐

最新文章

热门文章

5.快速到达某一位置一般用于回到顶部