vue滚动插件更好的滚动使用详解

本文实例为大家分享了某视频剪辑软件滚动插件更好的滚动的具体代码，供大家参考，具体内容如下

1.概述

1.1 说明

更好的滚动是一款重点解决移动端（已支持个人电脑)各种滚动场景需求的插件。例如淘宝聚划算中的类型选择（女装/家纺/生鲜美食等),没有滚动条显示却实现了滚动功能。

1.2更好-滚动安装

新公共管理安装更好-滚动-保存安装至项目中1.3更好-滚动使用

更好的滚动常见应用场景（列表滚动)的超文本标记语言结构：

李./li li./li./ul！-这里可以放一些其它的多姆，但不会影响滚动- /div备注：更好的滚动是作用在外层包装材料容器上的，滚动的部分是内容元素。并且更好的滚动只处理容器（包装材料)的第一个子元素（内容)的滚动，其他的元素都会被忽略。

更好的滚动初始化代码：

更好的滚动提供了一个类，实例化的第一个参数是一个原生的数字正射影像图对象，如果不是传递的对象，而是传递的字符串（类名或者id)，更好-滚动内部会尝试调用选择器去获取这个数字正射影像图对象。

-直接传递数字正射影像图对象

从"更好滚动“让包装=文档。queryselector('导入全部.包装器)让滚动=新的二传递字符串，使更好的滚动内部去获取数字正射影像图对象

从"更好滚动"中导入"滚动"让滚动=新的"滚动"。包装材料)2。代码

2.1 代码示例

2.1 子组件scrollChild(横向滚动组件)

模板div class=' move-tab ' div class=' tab-wrapper ' ref=' tabsWrapper ' ul ref=' tab ' Li v-for='(项目，索引)在tab ' :键=' index ' div class=' tab-item ' div class=' expand-block ' { item。名称| | '无} }/div/div/Li/ul/div/div/模板脚本从更好的卷轴导入BScroll导出默认值{ props: { data: Array，}，data(){ return { tab 3360[]，MX : 0 0，tabWidth: 300，}，mounted() { this .$ NextTick(()={ console。日志(这个。数据)这个。tab=这个。这个数据._initMenu() }) }，方法： { _ init Menu(){ const Tabswidth=this。Tabwidth常量宽度=这个。选项卡。长度* Tabswidth这个.参考文献。选项卡。风格。width=`$ { width } px ` this .$nextTick(()={ if(！这个。卷轴){这个。滚动=新的滚动(这.$ refs.tabsWrapper，{ scrollX: true，eventPassthrough: '竖排，})else { this。卷轴。refresh()} })}，}，} }/script style作用域。相对于{ position : top : 0；底部： 0；宽度： 100%;} .制表符-包装{高： 120像素宽度： 100%;盒子尺寸：边框盒子；飞越：隐藏；空白： nowrap} .选项卡-项目{左侧浮动：宽度： 280像素；高度： 120像素；padding: 10px右边距： 20px背景# f5f 5 box-shadow : 0 4px 0 rgba(0，0，0，0.1)；边界半径： 4px} .expand-block { font-size : 30px；字体粗细：粗体；color: # 333333}/style2.1父组件scrollParent(调用子组件)

模板设计子滚动-:数据=' scrollit '/div/模板脚本导入子滚动自'./components/scroll child ' export default { name : ' scroll parent。vue '，components: { ChildScroll，}，data(){ return { scrollit :[{ name : }北京}，{name: '上海}，{name: '杭州}，{name: '广州}，{name: '郑州}，{name: '深圳}，{name: '合肥}，{name: '徐州}，{name: '西安}，{name: '石家庄}，{name: '呼和浩特}，{name: '兰州}，{name: '包头}，{name: '重庆}，] } }，}/scriptstyle作用域/style2.2结果展示

可左右滑动出所需要展示的列表集合

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。