￥{{food.oldPrice}}
js
/* eslint-disable*/
import BScroll from 'better-scroll'
export default{
props:{
seller:{
type:Object
}
},
data(){
return{
goods:[]
}
},
created(){
this.classMap=['decrease', 'discount', 'special', 'invoice', 'guarantee']
this.$http.get('/api/goods').then((res)=>{
this.goods=res.data.data;
this.$nextTick(()=>{
this._initScroll();
})
console.log(this.$refs.menuWrapper)
})
},
methods:{
_initScroll(){
this.meunScroll=new BScroll(this.$refs.menuWrapper,{});
this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
}
}
}
先用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()方法里回调这个方法，数据改变后再来计算滚动轴就会出错
上拉刷新功能
0">
{{item.order_sn}}
{{item.date}}
￥ {{item.partner_profit | number2}}
{{loadingText}}
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);
});
}
关于“vue-better-scroll怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
当前题目：vue-better-scroll怎么用
网页网址：http://bzwzjz.com/article/pgshep.html
