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 相关文章推荐
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
JavaScript实现Tab选项卡切换
Feb 13 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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汉字转换拼音的类
2013/06/18 PHP
php实现登陆模块功能示例
2016/10/20 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
常用的javascript function代码
2008/05/23 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python 可爱的大小写
2008/09/06 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
python3将变量输入的简单实例
2020/08/19 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
教师推荐信范文
2013/11/24 职场文书
标准毕业生自荐信
2014/06/24 职场文书
教师暑期培训感言
2014/08/15 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
数学备课组工作总结
2015/08/12 职场文书
中学总务处工作总结
2015/08/12 职场文书
python和anaconda的区别
2022/05/06 Python