在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。 实现上面的效果,思路一定很重要,还有需求 1. 左边一级分类和右边二级分类形成联动 2. 当滑动右侧分类列表时, 更新左侧分类选中 3. 点击左侧 ...
说明 最近想做一个vue商城小项目,练习一下vue的语法,刚刚好碰到了需要左右菜单实现联动,因此就接触了 better scroll。 github地址 中文文档。 代码 页面结构以及数据 渲染结果 左边菜单栏 goodMenu 。 右边菜单栏 goodList ,每一项有一个标题:name,以及菜单数据: data数组。再结合 v for指令及相关样式即可完成页面简单布局 不是重点 其他数据先不 ...
2019-04-25 21:31 0 2353 推荐指数:
在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。 实现上面的效果,思路一定很重要,还有需求 1. 左边一级分类和右边二级分类形成联动 2. 当滑动右侧分类列表时, 更新左侧分类选中 3. 点击左侧 ...
1.创建vue-cli3项目 指令 vue create 项目名 2.要想使用better-scroll 需要先引入 better-scroll的插件 这里采用 npm的方式 指令 npm install better-scroll -- save (项目依赖 ...
1.安装better-scrool且在组件中引用 (1) (2) 2.使用 dom结构 另外还要说一下:dom结构中的ref="scroll"和mounted里的this.$refs.wscroll ...
npm install better-scroll --save-dev 下载了这个插件 在页面里 import BScroll from 'better-scroll' 引入了这个插件 在template里 css里: 在方法里面: 感觉 ...
格式:var obj = new BScroll(object,{[option1,],.,.}); 注意: 1、要确保object元素的高度比其父元素高 2、使用时,一定要确保object所在的dom渲染后,再用上面的语句,或者obj.refresh() Options 参数 ...
1.安装 2.引入 3.初始化 获取这个 DOM 对象 这行代码就是来获取dom 的 链接:https://better-scroll.github.io/docs/zh-CN/plugins/#%E4%BD%BF ...
better-scroll 的基本使用 1、去 GitHub 下载 bscroll.js 文件 2、引入 HTML ...
better-scroll,移动端滚动场景需求的插件 例: 做一个上下滚动,左右两边关联(滑动右侧左侧对应的类别显示高亮,点击左侧的类别名称右侧滑动到对应的位置) 如图: 分析:滑动右侧的时候左侧对应的类高亮,高亮显示是通过current类来控制的,当右边滑动到不同个类 ...