当前位置:首页 > 日记 > 正文

在vue2.0商品购物列滚动算法的实现代码

在vue2.0商品购物列滚动算法的实现代码
不太多,直接代码,以便它可以在未来重复使用。
进口bscroll from'better-scroll;
const err_ok = 0;
出口默认{
道具:{
销售:{
类型:对象
}
},
数据(){
返回{
Ods:{ },
该:{ },
scrolly:0
};
},
计算机:{
currentindex(){
为了(让我= 0;i < this.listheight.length;i++){
让height1 =这该{我};
让身高2 =这。该{我+ 1 };
如果(身高2 | |!(this.scrolly this.scrolly < height1 > =身高2){)
还我;
};
}
返回0;
}
},
创建(){
this.classmap = { 'decrease ','discount ',特别的,'invoice ','guarantee};
这http.get美元( / / ODS API)。然后((响应)= > {
response.body响应=;
如果(response.errno = err_ok){
this.ods = response.data;
((这nexttick美元)= > {
这_initscroll();
这_calculateheight();
});
}
});
},
方法:{
_initscroll(){
this.menuscroll =新bscroll(这refs.menuwrapper美元,{。
点击:真实
});
this.foodscroll =新bscroll(这refs.foodswrapper美元,{。
probetype:3
});
This.foodScroll.on('scroll(POS)= > {
this.scrolly = math.abs(math.round(pos.y));
});
},
_calculateheight(){
让foodlist =这refs.foodswrapper.getelementsbyclassname美元('food-list-hook);
让高度= 0;
This.listHeight.push(高度);
为了(让我= 0;i < foodlist.length;i++){
让项目组foodlist {我};
高度= item.clientheight;
This.listHeight.push(高度);
}
},
SelectMenu(索引、事件){
如果(!事件。_constructed){
返回;
};
console.log(指数);
让foodlist =这refs.foodswrapper.getelementsbyclassname美元('food-list-hook);
让EL = foodlist {指数};
this.foodscroll.scrolltoelement(EL,300);
}
}
};
以上是ODS柱在购物vue2.0滚动算法的实现代码,我想帮你。如果你有任何问题,请给我留言,萧边会及时给您回复。谢谢您支持网站。

相关文章

AI是如何绘制一个小灯图标的

AI是如何绘制一个小灯图标的

绘制,图标,小灯,电脑软件,AI,简单地画台灯的ai小图标 软件名称:Adobe Illustrator CS6(AI CS6)简化绿色中文版(32位+ 64位)软件大小:205mb更新时间:2014-05-11 1。在Ai软件中,创建一个新的800 * 800文档,选择一个矩形工具,绘制两个矩形形状,并填充颜…

CSS3的角架和边界的画面效果的例子

CSS3的角架和边界的画面效果的例子

边界,例子,画面,效果,电脑软件,本研究的主要内容如下: 圆角半径 阴影框阴影 边界图像边界图像 1。圆角半径 xml代码将内容复制到剪贴板。 边框半径属性允许您将角边框添加到元素中! { div 宽度:200px; 身高:100px; 填料:20px; border: 1px soli…

varchar长度在MySQL的设置方法

varchar长度在MySQL的设置方法

方法,设置,长度,电脑软件,varchar,如果其中一个项目是由varchar(50) 所以,当然,英语是50。 那么中国人呢 UTF-8的中文占3个字节 所以,这个varchar(50)只能保存16个汉字 MySQL varchar(50)是50人中英文 mysql5的文档,它描述了varchar字段类型:VARCHAR(米…

Javascript判断数组是否有键的一个简单示

Javascript判断数组是否有键的一个简单示

数组,示例,简单,电脑软件,Javascript,js复合数组关联数组和对象是相同的,无论数组中是否存在一个键(或者这个对象是否包含一个属性),你不能使用未定义的元素,因为可能有一个键:未定义的};正确的方法应该是: ary.hasownproperty(重点);或obj.hasownpro…

excel表格中单元格数的快速统计

excel表格中单元格数的快速统计

统计,单元格,表格,快速,电脑软件,当我们使用excel来处理数据时,有时我们需要计算指定的范围单元格的数量,如果一个太难,实际上,我们可以通过简单地设置excel表中的指定范围单元格的数量来快速计算。 打开excel文件,然后右键单击Excel窗口下面的…

水墨画风格的PS图象处理软件墨竹图

水墨画风格的PS图象处理软件墨竹图

墨竹,水墨画,图象,处理软件,风格,PS图象处理软件的绘图功能很强大,有时多种风格可以通过简单的操作而产生的。在这篇文章中,我们介绍了如何使用渐变功能,过滤等功能画水墨竹。 最终效果 制作方法: 1,创建一个新的文档,创建一个新的层,使用椭圆选框…

如何保持高对比度的过滤器的皮肤

如何保持高对比度的过滤器的皮肤

过滤器,高对比度,电脑软件,你可能已经知道一个高对比度的滤镜可以用来锐化滤镜,但是你知道高对比度的滤镜也可以用来打磨皮肤吗 原图与效果图的比较 现在让我们看看它是如何工作的。 首先,复制背景层以创建一个新层。如果你有一个或一些其他…

代码折叠的Javascript实现

代码折叠的Javascript实现

折叠,代码,电脑软件,Javascript,首先,我们首先定义一个Javascript函数,如下所示: 功能puckermenu(水平){ 无功levellength =('row +水平长度); VaR做= '0'; 对于(VAR ICOUNT = 0;多 如果(文件。所有{多}。id.indexof('row +水平)> 1(文件。所有{多}。id.leng…

PPT布局最常见的七种布局

PPT布局最常见的七种布局

布局,最常见,七种,电脑软件,PPT,我们在过去完成的项目中对PPT布局的设计做了很好的总结,并与大家分享! 1标准型 最常见的简单的规则和布局类型,一般从上到下的顺序为:图片、图表、标题、说明文、图形符号,从上到下的心理秩序人们的认识和思维…

PS图象处理软件过滤器使迷人的雪景

PS图象处理软件过滤器使迷人的雪景

过滤器,雪景,图象,处理软件,迷人,先看最后效果比较。 步骤一:打开绘图文件并执行函数菜单选择颜色范围。首先,我们应该使用滴管吸收颜色的中间部分,然后调整模糊的比例。雾的大小将决定雪的范围。 第二步:使前景颜色变白,添加新图层,按Alt + del…

AI是一个户外广告架,带有金属材料。

AI是一个户外广告架,带有金属材料。

是一个,金属材料,户外广告,电脑软件,AI,今天,我想和大家分享一种用金属材料制作AI户外广告架的方法。这个教程很基础。很适合初学者学习和推荐。 步 首先给出参考样品。 打开AI软件到地图上,锁定。防止移动。 新建一层,画1条直线,轮廓不,然后是…

HTML5画布绘制五星级红旗

HTML5画布绘制五星级红旗

红旗,绘制,电脑软件,The Canvas drawing API is not defined on the element itself, but is defined in a ldquo obtained by the getContext () method of the canvas; the drawing environment ; the object. 画布API也使用路径表示。…