vue组件-轮播(走马灯效果)
来源:互联网 发布:专业音频测试软件 编辑:程序博客网 时间:2024/06/05 20:37
这是一个在项目中用到的一个轮播效果,前端最难的应该就是动画了,逻辑什么的相比后台来说还是比较简单的(个人觉得),先来看看效果图
拿到设计图时翻遍了所有的轮播插件,发现跟UI要的效果都相差甚远啊,没办法,只能找个相对来说适合的进行整改了,找的是一个jquery写的一个方法,因为项目用的是vue,vue里面使用jquery插件还是有点难用的(谁用谁知道),于是得想办法用自定义指令模拟touch事件,滑动事件需要监听是左划还是右划,这就需要自定义指令的钩子事件,可以携带绑定参数,具体的用法如下
指令钩子函数会被传入以下参数:
el
:指令所绑定的元素,可以用来直接操作 DOM 。binding
:一个对象,包含以下属性:name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。
vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
阅读全文
0 0
- vue组件-轮播(走马灯效果)
- 轮播组件vue
- vue组件-轮播(carousel)
- vue实现图片滚动(类似走马灯效果)
- vue 快捷轮播组件代码实现
- RecyclerView循环轮播和循环走马灯
- 走马灯 (滚动字幕效果)
- 基于vue-strap的轮播组件,下载即用
- 走马灯效果
- 走马灯效果
- 走马灯效果
- vue+swiper 轮播
- Javascript走马灯效果大全(无缝循环)
- 【Android】滚动字幕(走马灯)效果
- js实现走马灯效果(无缝衔接)
- Android App图片轮播效果的组件化
- vue写一个图片轮播的组件,在父组件中引用。用到mui。push。concat。vue
- vue.js+vue-awesome-swiper轮播
- Fragment01
- xlistview
- mysql5.7 数据导入报 Error Code: 2006
- bzoj 4499: 线性函数 线段树
- Retrofit多线程断点下载
- vue组件-轮播(走马灯效果)
- 【Scikit-Learn 中文文档】内核岭回归
- Win32控制台项目添加显示输出窗口
- UrlLib库的相关用法
- 新东方副总裁徐健:人工智能时代如何实现教育升级?
- linux mint中安装远程桌面
- Spring4.X学习笔记——IOC容器
- JavaScript回车事件(兼容火狐)
- 设计原则