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 相关文章推荐
node.js中的fs.link方法使用说明
Dec 15 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
JavaScript实现消消乐的源代码
Jan 12 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 构造函数construct的前下划线是双的_
2009/12/08 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
php表单处理操作
2017/11/16 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python友情链接检查方法
2015/07/08 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
运动会广播稿200字
2014/01/15 职场文书
财务主管自我鉴定
2014/01/17 职场文书
八年级数学教学反思
2014/01/31 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
元旦活动感言
2014/03/08 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
2014年信用社工作总结
2014/11/25 职场文书
redis限流的实际应用
2021/04/24 Redis
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python