vue-better-scroll 的使用实例代码详解
程序员文章站
2024-01-21 20:50:46
首先安装better-scroll
npm i better-scroll -s
goods页面模板
首先安装better-scroll
npm i better-scroll -s
goods页面模板
<template> <div class="goods"> <div class="menu-wrapper" ref="menuwrapper"> <ul> <li v-for="item in goods" class="menu-item"> <span class="text border-1px"> <span v-show="item.type>0" class="icon" :class="classmap[item.type]"></span>{{item.name}} </span> </li> </ul> </div> <div class="foods-wrapper" ref="foodswrapper"> <ul> <li v-for="item in goods" > <h1 class="title">{{item.name}}</h1> <ul> <li v-for="food in item.foods" class="food-item border-1px"> <div class="icon"> <img :src="food.icon" alt="" width="57" height="57"> </div> <div class="content"> <h2 class="name">{{food.name}}</h2> <p class="desc">{{food.description}}</p> <div class="extra"> <span class="food-number">月售{{food.sellcount}}份</span> <span>好评率{{food.rating}}%</span> </div> <div class="price"> <span class="nowprice">¥{{food.price}}</span> <span class="oldprice">¥{{food.oldprice}}</span> </div> </div> </li> </ul> </li> </ul> </div> </div> </template>
js
<script type="text/ecmascript-6"> /* 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,{}); } } } </script>
先用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 结构:
<div class="wrapper"> <ul class="content"> <li></li> <li></li> <li></li> <li></li> </ul> </div>
当 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()
方法里回调这个方法,数据改变后再来计算滚动轴就会出错
上拉刷新功能
<div class="wrapper" ref="wrapper"> <ul class="content" ref="content"> <li v-for="(item,key) in detail" :key="key" v-if="detail.length > 0"> <row type="flex" justify="start" align="middle"> <col :span="8" class="detail-item"> <span :class="{'color-red':item.is_delay === 1}">{{item.order_sn}}</span> </col> <col :span="8" class="detail-item"> <span>{{item.date}}</span> </col> <col :span="8" class="detail-item"> <span>¥ {{item.partner_profit | number2}}</span> </col> </row> </li> <li v-if="!scrollfinish"> <row type="flex" justify="center" align="middle"> <col :span="6" v-if="loadingtext"> <p>{{loadingtext}}</p> </col> <col :span="2" v-else> <spin size="large"></spin> </col> </row> </li> </ul> </div> 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 的使用实例代码详解,希望对大家有所帮助