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

hsluoyz 发布于2019-08-20 18:52 / 750人阅读

摘要：基于的移动端的图片轮播组件之前一直在用功能很齐全但是唯一的问题就是体积比较大我只是想要一个简单的图片轮播但是却要引入多大小的文件这样是不对的特点支持自动播放无限轮播效果支持用户手动滑动压缩后大概使用在入口文件中引入暂时不支持单组

wc-swiper

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

why

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

特点

支持自动播放 & 无限轮播 (loop) 效果

支持用户手动滑动

压缩后大概 ~8k

使用

npm i wc-swiper --save

// 在入口文件中引入(暂时不支持单组件引入的方式):
import wcSwiper from "wc-swiper"
import "wc-swiper/style.css"
Vue.use(wcSwiper);

// 在需要使用的 view 里面引入:

    
        // 这里放你需要轮播的内容, 比如一张图片
    


// 循环列表

   
   


// 异步获取 slides 的时候, 需要在 wc-swiper 上面添加 v-if 判断

   
   


// 带配置选项

    
        // 这里放你需要轮播的内容, 比如一张图片

配置

在 wc-swiper 上面暴露了一些配置选项:

duration:    一次滑动的时间 | default: 500ms
interval:    两次滑动间隔时间 | default: 2500ms
autoplay:    是否自动播放 | default: true
therehold:    用户滑动多少距离之后自动翻页 | default: 110
curSlide:   默认显示第几个 slide | default: 0

事件

在 wc-swiper 上可以监听一些事件:

transitionend 事件
每一次滑动结束(不论用户手动滑动, 还是自动滑动) 都会触发 transitionend 事件. 
transtionend 携带唯一一个参数:currentSlide, 用来表明, 当前 slide 是第几个 slide.
并且要注意: slide 从 0 开始计数.

在 wc-slide 上面可以监听 click 事件.

方法

有些时候, 你可能想要实现这样一种操作: 点击一个按钮, 让 swiper 跳转到指定的 slide, 或者点击按钮, 让

swiper 跳转到上一个或者下一个. 对此, 你可以这样操作:

1. 在  标签上添加 ref 属性, 例如: 
2. 通过 this.$refs.swiper 来引用预先提供的 3 个方法:

slideTo (index) 跳转至指定索引 (index 从 0 开始)
next () 跳转到下一个
previous () 跳转到上一个

例如:
this.$refs.swiper.slideTo(3) // 跳转到索引为 3 的 slide

问题描述

1. 如何设置轮播图的高度

通过设置 wc-swiper 的高度即可. 比如:

.swiper {
    height: 200px;
}

2. 如何渲染异步数据

一般情况下, 轮播的数据可能通过接口请求得来, 此时, 需要在 wc-swiper 上面加上 v-if 判断, 从而延迟 wc-swiper 的渲染时机:

3. 点击 slide 的时候如果需要跳转新的页面该怎么办

可以为 wc-slide 的内容包裹一层 a 标签


    
        
           //content

或者可以在 wc-slide 上面监听 click 事件:

4. 怎么添加 pagination 或者左右箭头?

个人认为, pagination 以及 arrow-left, arrow-right, 都只是 swiper 的配套设施, 而不应该是组成的一部分. 所以没有提供默认的 pagination 和 arrow, 而是提供了 slot, 如果你希望

为 swiper 添加 pagination 或者 arrow, 可以通过这样的方式添加:

可以参考这个的写法:

存在的问题

多指触碰的时候, 比如多根手指同时滑动的时候, 就会出现问题, 这种极端情况, 比较复杂和少见, 暂时不考虑.

私有云云服务器 vue轮播组件基于腾讯云实现移动直播 web端基于webrtc实现直播 webrtc 移动端实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84805.html

基于vue实现swipe轮播组件

摘要：项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如。此处应该有掌声，哈哈简而言之，就是当需要一个简单的轮播时，可以选用，自己写一个组件。举个栗子，就是我实现的这个基于实现分页组件，移动端和端均适用哦。项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式，比如这样的showImg(ht...

Enlightenment 2019-08-22 10:42 评论0 收藏0
基于vue实现swipe轮播组件

摘要：项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如。此处应该有掌声，哈哈简而言之，就是当需要一个简单的轮播时，可以选用，自己写一个组件。举个栗子，就是我实现的这个基于实现分页组件，移动端和端均适用哦。项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式，比如这样的showImg(ht...

lavor 2019-08-05 10:19 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

MSchumi 2019-08-02 16:03 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

hatlonely 2019-08-22 18:09 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

褰辩话 2019-08-30 15:53 评论0 收藏0