vue滚动轴插件better-scroll使用详解


Posted in Javascript onOctober 17, 2017

跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧menu栏对应右侧foods栏相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用:

一、项目中下载,并引入

在配置文件package.json中引入版本

"dependencies": {
 "better-scroll": "^0.1.7"
 }

然后进入项目目录,打开cmd更新配置

npm i (i是install缩写)

最后引入,比如我在项目goods组件中使用则:

import BScroll from 'better-scroll';

二、举个栗子

需求是处于当前比如热销榜栏目,则菜单栏高亮。滚动到下一栏高亮栏目则下一栏菜单高亮。点击菜单中某一栏菜单该栏目高亮并且跳转到对应食物区。

下面是foods组件中的代码

template:

<template>
 <div class="goods">
 <div class="menu-wrap" ref="menuWrap">//菜单栏
  <ul>
  <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
   <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-wrap" ref="foodsWrap">//食物栏
 </div>
 </div>
</template>

script

<script type="text/ecmascript-6">
 import Vue from 'vue';
 import BScroll from 'better-scroll';
 import shopcart from '@/components/shopcart/shopcart';
 export default {
 props: {//接收父组件传的数据
  seller: {
  type: Object
  }
 },
 data () {
  return {
  goods: [],
  listHeight: [],//菜单中一个菜单栏目的高度
  scrollY: 0//定义的Y滚动轴及初始值
  };
 },
 computed: {//计算属性
  currentIndex () {//当前菜单栏在整个菜单中的下标index
  for (let i = 0; i < this.listHeight.length; i++) {//遍历菜单中每个栏目的高度
   let height1 = this.listHeight[i];//第i个栏目的高度
   let height2 = this.listHeight[i + 1];//第i+1个栏目的高度
   if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {//根据当前滚动轴的位置得出index(如果第二个栏目不存在即第一个栏目是最后一个)或者(当前栏目高度大于等于第一个并且当前滚动轴小于第二个栏目高度)
   return i;//如果满足则返回index
   }
  }
  return 0;//初始值0
  }
 },
 created () {
  Vue.prototype.$http.get('/api/goods')
  .then(res => {
   this.goods = res.data.data;
   this.$nextTick(() => {//
   this._initScroll();
   this._calculateHeight();
   });
  });
  this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
 },
 methods: {
  selectMenu (index, event) {
  if (!event._constructed) {
   return;
  }
  let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook');
  let el = foodList[index];
  this.foodsScroll.scrollToElement(el, 300);
  },
  _initScroll () {
  this.menuScroll = new BScroll(this.$refs.menuWrap, {
   click: true
  });
  this.foodsScroll = new BScroll(this.$refs.foodsWrap, {probeType: 3
  });
  this.foodsScroll.on('scroll', (pos) => {
   this.scrollY = Math.abs(Math.round(pos.y));
   console.log(this.scrollY);
  });
  },
  _calculateHeight () {
  let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook');
  let height = 0;
  this.listHeight.push(height);
  for (let i = 0; i < foodList.length; i++) {
   let item = foodList[i];
   height += item.clientHeight;
   this.listHeight.push(height);
  }
  }
 }
 };
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
js调用css属性写法
Sep 21 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
react中的ajax封装实例详解
Oct 17 #Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 #Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 #Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 #Javascript
Vue中封装input组件的实例详解
Oct 17 #Javascript
js获取文件里面的所有文件名(实例)
Oct 17 #Javascript
Vue中之nextTick函数源码分析详解
Oct 17 #Javascript
You might like
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中的with...as用法介绍
2015/05/28 Python
详解Python发送邮件实例
2016/01/10 Python
安装Python的教程-Windows
2017/07/22 Python
python requests 使用快速入门
2017/08/31 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
wxPython实现绘图小例子
2019/11/19 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
什么是数组名
2012/05/10 面试题
大学生优秀团员事迹材料
2014/01/30 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书