利用Vue实现移动端图片轮播组件的方法实例


Posted in Javascript onAugust 23, 2017

前言

轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:

wc-swiper

基于 Vue 的移动端的图片轮播组件.

Why

  • 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大.
  • 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的.

特点

  • 支持自动播放 & 无限轮播 (loop) 效果
  • 支持用户滑动
  • 压缩后大概 ~6k 大小. (包含 js & css)

Install

npm i wc-swiper --save
import wcSwiper from 'wc-swiper'
import 'wc-swiper/style.css'
Vue.use(wcSwiper);

或者可以在单个组件中引入:

import {wcSwiper, wcSlide} from 'wc-swiper'

export default {
 components: {
  wcSwiper,
  wcSlide
 }
}

Usage

<wc-swiper>
 <wc-slide v-for="(v, k) in list" :key="k">
  // 这里放具体类容
 </wc-slide>
</wc-swiper>

配置说明

1.wc-swiper 上存在两个配置选项, duration & interval.

  • duration: 配置每一次滑动持续的时间
  • interval: 配置两次滑动的间隔时间

2.控制 swiper 的样式: 给 wc-swiper 设置样式即可. (wc-swiper 的默认高度为 200px).

3.异步数据的渲染: 建议在 wc-swiper 上面添加 v-if 判断条件, 比如 v-if="slidesList.length",
以防止在数据返回之前, swiper 已经渲染执行完毕.

4.wc-slide 上面可以监听两个事件: touchstart & click, 所以用户可以直接在 wc-slide 上监听事件

<wc-slide @click="fa" @touchstart="fb"></wc-slide>

5.关于 pagination

目前暂时没有提供相关的接口去修改 pagination 的样式。如果有需要可以直接覆盖默认样式.

pagination 的实现结构:

.wc-pagination
 .wc-dot
 .wc-dot.wc-dot-active

覆盖上面 3 个class 即可.

项目地址

github地址:helicopert/wc-swiper

本地下载地址:http://xiazai.3water.com/201708/yuanma/wc-swiper(3water.com).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 #Javascript
vue中页面跳转拦截器的实现方法
Aug 23 #Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 #Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 #Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 #jQuery
浅谈vue-lazyload实现的详细过程
Aug 22 #Javascript
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP Pear 安装及使用
2009/03/19 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
记录一次websocket封装的过程
2020/11/23 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
Python读取网页内容的方法
2015/07/30 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python实现图片识别汽车功能
2018/11/30 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
国家励志奖学金获奖感言
2014/01/09 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
煤矿安全生产标语
2014/06/06 职场文书
酒店端午节活动方案
2014/08/26 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
永远是春天观后感
2015/06/12 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android