利用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 页面编码与浏览器类型判断代码
Jun 03 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 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 stripos()函数及注意事项的分析
2013/06/08 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
用js实现in_array的方法
2013/11/05 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python交换两个变量的值方法
2019/01/12 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
个人求职信范文分享
2013/12/13 职场文书
商务会议邀请函
2014/01/09 职场文书
高中生的自我评价
2014/03/04 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
董事长秘书工作总结
2015/08/14 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript