利用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的日期联动实现代码
Feb 24 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
vue中实现图片压缩 file文件的方法
May 28 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
PHP之sprintf函数用法详解
2014/11/12 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
vue实现微信获取用户信息的方法
2019/03/21 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python语言的变量认识及操作方法
2018/02/11 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
使用tensorflow实现线性回归
2018/09/08 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
美国精油公司:Plant Therapy
2019/05/17 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
物业公司采购员岗位职责
2013/12/31 职场文书
安全生产先进个人材料
2014/02/06 职场文书
保健品市场营销方案
2014/03/31 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
人民调解员培训方案
2014/06/05 职场文书
计划生育个人总结
2015/03/02 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript