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 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
js仿淘宝放大镜效果
Dec 28 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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实现批量修改文件名称的方法
2016/07/23 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
python破解同事的压缩包密码
2020/10/14 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
台湾良兴购物网:EcLife
2019/12/01 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
《小池塘》教学反思
2014/02/28 职场文书
小学优秀班主任材料
2014/12/17 职场文书
财务会计求职信范文
2015/03/20 职场文书
2015年防汛工作总结
2015/05/15 职场文书