vue-better-scroll 的使用实例代码详解

2023-09-05 00:06:05 73

首先安装better-scroll

npmibetter-scroll-S

goods页面模板


/*eslint-disable*/

importBScrollfrom'better-scroll'
exportdefault{

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=newBScroll(this.$refs.menuWrapper,{});
this.foodsScroll=newBScroll(this.$refs.foodsWrapper,{});
}

}
}

先用ref绑定事件，在vue中用$.refs注册

在钩子函数create中用vue-resource请求数据，并异步调用方法

this.$nextTick(()=>{
this._initScroll();
}

注册方法

_initScroll(){
this.meunScroll=newBScroll(this.$refs.menuWrapper,{});
this.foodsScroll=newBScroll(this.$refs.foodsWrapper,{});
}

better-scroll用法

我们先来看一下better-scroll常见的html结构：

当content的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是better-scroll的滚动原理。

importBScrollfrom'better-scroll'
letwrapper=document.querySelector('.wrapper')
letscroll=newBScroll(wrapper,{})

better-scroll对外暴露了一个BScroll的类，我们初始化只需要new一个类的实例即可。第一个参数就是我们wrapper的DOM对象，第二个是一些配置参数。

better-scroll的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动，那就是初始化的时机不对。

饿了么是这样处理的：

mounted(){
this.$nextTick(()=>{
this.scroll=newBscroll(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=newBScroll(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 的使用实例代码详解

热门推荐

随机推荐