大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关vue-better-scroll怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联建站2013年开创至今,先为晋城等服务建站,晋城等地企业,进行企业商务咨询服务。为晋城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
首先安装better-scroll
npm i better-scroll -S
goods页面模板
- 0" class="icon" :class="classMap[item.type]">{{item.name}}
{{item.name}}
{{food.name}}
{{food.description}}
月售{{food.sellCount}}份 好评率{{food.rating}}%¥{{food.price}} ¥{{food.oldPrice}}
js
先用ref 绑定事件, 在vue中 用$ .refs注册
在钩子函数 create中 用vue-resource 请求数据,并异步调用方法
this.$nextTick(()=>{ this._initScroll(); }
注册方法
_initScroll(){ this.meunScroll=new BScroll(this.$refs.menuWrapper,{}); this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{}); }
better-scroll用法
我们先来看一下 better-scroll 常见的 html 结构:
当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理。
import BScroll from 'better-scroll' let wrapper = document.querySelector('.wrapper') let scroll = new BScroll(wrapper, {})
better-scroll 对外暴露了一个 BScroll 的类,我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象,第二个是一些配置参数。
better-scroll 的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动,那就是初始化的时机不对。
饿了么是这样处理的:
mounted() { this.$nextTick(() => { this.scroll = new Bscroll(this.$refs.wrapper, {}) }) }
this.$nextTick()
这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来
如果不在下面的this.$nextTick()
方法里回调这个方法,数据改变后再来计算滚动轴就会出错
上拉刷新功能
mounted() { // 设置wrapper的高度 this.$refs.wrapper.style.height = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop + "px"; // better-scroll 的content高度不大于wrapper高度就不能滚动,这里的问题是,当一页数据的高度不够srapper的高度的时候,即使存在n页也不能下拉 // 需要设置content的min-height大于wrapper高度 this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px"; this._initScroll(); this.getIncomeDetail(this.nextPage); // 设置scroll的高度 // this.scrollHeight = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop ; }, methods:{ _initScroll() { this.orderScroll = new BScroll(this.$refs.wrapper, { probeType: 3, click:true, pullUpLoad: { // 配置上啦加载 threshold: -80 //上拉80px的时候加载 }, mouseWheel: { // pc端同样能滑动 speed: 20, invert: false }, useTransition:false, // 防止iphone微信滑动卡顿 }); // 上拉加载数据 this.orderScroll.on('pullingUp',()=>{ this.scrollFinish = false; // 防止一次上拉触发两次事件,不要在ajax的请求数据完成事件中调用下面的finish方法,否则有可能一次上拉触发两次上拉事件 this.orderScroll.finishPullUp(); // 加载数据 this.getIncomeDetail(this.nextPage); }); }
- 0">
|
{{item.order_sn}} {{item.date}} ¥ {{item.partner_profit | number2}} |
{{loadingText}}
关于“vue-better-scroll怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。