vue2.0中goods选购栏滚动算法的实现代码


Posted in Javascript onMay 17, 2017

不多说,直接代码,以便以后重复利用:

<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
const ERR_OK = 0;
export default {
 props: {
  sell: {
   type: Object
  }
 },
 data() {
  return {
   goods: [],
   listHeight: [],
   scrollY: 0
  };
 },
 computed: {
  currentIndex() {
   for (let i = 0; i < this.listHeight.length; i++) {
    let height1 = this.listHeight[i];
    let height2 = this.listHeight[i + 1];
    if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
     return i;
    };
   }
   return 0;
  }
 },
 created() {
  this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
  this.$http.get('/api/goods').then((response) => {
   response = response.body;
   if (response.errno === ERR_OK) {
    this.goods = response.data;
    this.$nextTick(() => {
     this._initScroll();
     this._calculateHeight();
    });
   }
  });
 },
 methods: {
  _initScroll() {
   this.menuScroll = new BScroll(this.$refs.menuwrapper, {
    click: true
   });
   this.foodScroll = new BScroll(this.$refs.foodswrapper, {
    probeType: 3
   });
   this.foodScroll.on('scroll', (pos) => {
    this.scrollY = Math.abs(Math.round(pos.y));
   });
  },
  _calculateHeight() {
   let foodList = this.$refs.foodswrapper.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);
   }
  },
  selectMenu(index, event) {
   if (!event._constructed) {
    return;
   };
   console.log(index);
   let foodList = this.$refs.foodswrapper.getElementsByClassName('food-list-hook');
   let el = foodList[index];
   this.foodScroll.scrollToElement(el, 300);
  }
 }
};
</script>

以上所述是小编给大家介绍的vue2.0中goods选购栏滚动算法的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery对表单操作2
Apr 06 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 #Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 #jQuery
AngularJS使用拦截器实现的loading功能完整实例
May 17 #Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 #Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 #Javascript
bootstrap轮播图示例代码分享
May 17 #Javascript
bootstrap警告框示例代码分享
May 17 #Javascript
You might like
PHP中的加密功能
2006/10/09 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
详解webpack babel的配置
2018/01/09 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
深入理解python函数递归和生成器
2016/06/06 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
pycharm安装和首次使用教程
2018/08/27 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
自学python用什么系统好
2020/06/23 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
程序员机试试题汇总
2012/03/07 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
家长学校培训材料
2014/08/20 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
护士年终考核评语
2014/12/31 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL