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


Posted in Javascript onDecember 03, 2018

首先安装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 的使用实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 图片缩放(按比例)控制代码
May 27 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 #Javascript
Vue.js 图标选择组件实践详解
Dec 03 #Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 #Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 #Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 #Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 #Javascript
You might like
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
javascript中常用编程知识
2013/04/08 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python 实现屏幕录制示例
2019/12/23 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
学校大课间活动方案
2014/01/30 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
Python中super().__init__()测试以及理解
2021/12/06 Python