利用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 相关文章推荐
优化 JavaScript 代码的方法小结
Jul 16 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
vuex实现购物车功能
Jun 28 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
smarty自定义函数用法示例
2016/05/20 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
python3爬虫怎样构建请求header
2018/12/23 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python保留小数位的三种实现方法
2020/01/07 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
总经理岗位职责描述
2014/02/08 职场文书
自我鉴定书
2014/03/24 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
优秀团队申报材料
2014/12/26 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js