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 相关文章推荐
js中的前绑定和后绑定详解
Aug 01 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
JS setTimeout与setInterval的区别
Apr 20 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
php实现监听事件
2013/11/06 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
使用js画图之饼图
2015/01/12 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
详谈Python基础之内置函数和递归
2017/06/21 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
应届毕业生个人自我评价
2013/09/20 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
业务部主管岗位职责
2014/01/29 职场文书
档案保密承诺书
2014/06/03 职场文书
大学生实习介绍信
2015/05/05 职场文书
跑吧孩子观后感
2015/06/10 职场文书
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android