利用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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 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入门的学习方法
2007/01/02 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python放大图片和画方格实现算法
2018/03/30 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
对标管理实施方案
2014/03/12 职场文书
医德医风演讲稿
2014/05/20 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
写给医生的感谢信
2015/01/22 职场文书
教学督导岗位职责
2015/04/10 职场文书
七年级话题作文之执着
2019/11/19 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
python语言中pandas字符串分割str.split()函数
2022/08/05 Python