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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
img的onload的另类用法
Jan 10 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
php一个解析字符串排列数组的方法
2015/05/12 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python 正则表达式操作指南
2009/05/04 Python
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python字符串,数值计算
2016/10/05 Python
python list转矩阵的实例讲解
2018/08/04 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
就业推荐表自我鉴定
2013/10/29 职场文书
十八大标语口号
2014/10/09 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS