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 相关文章推荐
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
利用JS实现数字增长
Jul 28 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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中如何将数组变量写入文件
2013/06/06 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
浅析PHP开发规范
2018/02/05 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
python获取网页状态码示例
2014/03/30 Python
Python selenium如何设置等待时间
2016/09/15 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python实现自动登录后台管理系统
2018/10/18 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
体育教师自荐信范文
2013/12/16 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
升职自我推荐信范文
2015/03/25 职场文书
企业百日安全活动总结
2015/05/07 职场文书
一般纳税人申请报告
2015/05/18 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
求职信如何撰写?
2019/05/22 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL