vue2.0使用swiper组件实现轮播效果
轻松实现vue2.0轮播效果,供大家参考,具体内容如下
1、安装swiper
npm install swiper@3.4.1 --save-dev
2、引用组件
import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css';
3、html页面代码
<div class="swiper-container" id="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,$index) in detail.imgs"> <a v-on:click="showPreview($index,detail.imgs,swiperObj)"> <figure class="wp-avatar banner"> <img v-cloak :src="item | toQiNiuImg"/> </figure> </a> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div>
4、初始化组件,并设置参数
setTimeout(function () { state.swiperObj = new Swiper('#swiper', { loop: true, pagination: '.swiper-pagination', autoplay: 2000, paginationClickable: true }); }, 100)
5、搞定,ok
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
VUE开发一个图片轮播的组件示例代码
本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考.希望此文章对各位有所帮助. 完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden"> <div class="slide
-
基于vue2.0实现简单轮播图
因为之前一直在忙公司的项目,vue这块就生疏了不少,正好借这个小demo复习下vue的知识. 先来个效果图: 如图所示,实现的就是一个间隔2.5s自动向左切换下一张的轮播图,同时鼠标移入停止轮播,移出回复轮播: 而下方按钮会根据当前图片自动变红且可以手动控制当前图片. 思路: 整个demo分为轮播图片和控制span两个部分. 按照前端工程化的需求来说,这两个部分应该解耦成两个component最后再导入页面比较合理,但由于demo较为简单, 作为练手就不搞那么复杂了,对项目有追求[强迫症]的童鞋
-
基于vue.js轮播组件vue-awesome-swiper实现轮播图
一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u
-
基于vue实现swipe轮播组件实例代码
项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper. 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个110k的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图 当当当当~~~ 我们今天的主角登场了,thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有14.2k,真真的轻量级 啊.还有,还有 翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器.此
-
利用Vue实现移动端图片轮播组件的方法实例
前言 轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点 支持自动播放 & 无限轮播 (loop) 效果 支持用户滑
-
vue.js实现简单轮播图效果
学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&
-
基于vue.js实现图片轮播效果
轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$
-
vue轮播图插件vue-awesome-swiper
Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR. 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var
-
Vue 过渡实现轮播图效果
Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过渡 下面例子中我们用到列表过渡,可以先学习一下官方的例子 要同时渲染整个列表,比如使用 v-for,我们需要用到 <transition-group> 组件 Vue 轮播图 我们先看这样一个列表 <ul> <li v-for="list in slideList"> <i
-
vue利用better-scroll实现轮播图与页面滚动详解
前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码
随机推荐
- C++面试题之进制转换的实例
- 还原sql server数据库的处理方法
- BAT 参数去引号(各种去引号的奇葩方式)
- mvc file控件无刷新异步上传操作源码
- js取消单选按钮选中示例代码
- React学习笔记之条件渲染(一)
- 微信小程序中post方法与get方法的封装
- js 图片上传前大小长宽验证代码
- javascript格式化日期时间方法汇总
- 微信小程序 动态绑定事件并实现事件修改样式
- Linux下安装MariaDB数据库问题及解决方法(二进制版本的安装)
- C#在子线程中更新窗口部件的写法
- Android自定义控件ViewFipper实现竖直跑马灯效果
- 使用Python通过win32 COM打开Excel并添加Sheet的方法
- node 命令方式启动修改端口的方法
- layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
- C++利用两个栈实现队列的方法
- 微信小程序webview 脚手架使用详解
- Ubuntu18.04 中tomcat9安装图文教程
- 微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)