vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】


Posted in Javascript onNovember 08, 2018

说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper?!

vue-awesome-swiper就是其中一个前辈们产出的结晶。就看首尾两个单词,就知道他是vue和swiper的爱情之子了。

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

二、在项目目录下,往node_modules里安装插件vue-awesome-swiper(可以在项目目录内,shift+鼠标右键,选择"在此处打开命令窗口"),

 vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

注释:我这里window电脑安装了,所有右键出现的可能和没安装的不一样,实在找不到的看这一篇教程:gulp安装流程、使用方法及CMD常用命令导览

然后输入下边的安装插件命令

npm i --s vue-awesome-swiper

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

三、第三步我们依旧没有天才牌裤子,所以还是自己一步一步稳稳走。

1.插件安装后就是引用插件了,main.js内部分三步走:

(1) 引用插件:mainjs注册vas

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

(2) 注册插件

注册后未use控制台就警告了

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

通过全局方法 Vue.use() 使用插件后可以了

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

使用后控制台无错了

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

(3) 插件样式(也可以自己写,不用人家的)

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

2.vue项目中使用:

(1) 准备-template

new a project准备一个空项目

 vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

初始化html-空结构

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

(2) 引入-import

 vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

(3) 注册组件-components

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

(4) 配置-js(具体配置和swiper的一摸一样,看swiper官网即可。我这里只说下我本次使用的配置的含义)

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

swiper官网参数

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

(5)美化- css

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

wan~

效果:

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

代码:

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

zujian.vue

<template>
 <div class="hello-world">
 <!-- <h3>https://github.com/surmon-china/vue-awesome-swiper</h3> -->
 <!-- <h3>http://www.swiper.com.cn/api/index2.html</h3> -->
 <!-- http://www.swiper.com.cn/api/parameters/21.html -->
 <transition name="fade">
 <swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
 <!-- 第一页 -->
 <swiper-slide class="swiper-slide1">
 <div class="page">
 <h3>第一页</h3>
 </div>
 </swiper-slide>
 <!-- 第二页 -->
 <swiper-slide class="swiper-slide2">
 <div class="page">
 <h3>第二页</h3>
 </div>
 </swiper-slide>
 <!-- 第三页 -->
 <swiper-slide class="swiper-slide3">
 <div class="page">
 <h3>第三页</h3>
 </div>
 </swiper-slide>
 </swiper>
 </transition>
 </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 name: 'HelloWorld',
 components: {
 swiper,
 swiperSlide
 },
 data () {
 return {
 swiperOption: {
 // swiper configs 所有的配置同swiper官方api配置
 notNextTick: true,//notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
 direction: 'vertical',//水平方向移动
 grabCursor: true,//鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
 setWrapperSize: true,//Swiper使用flexbox布局(display: flex),开启这个设定会在Wrapper上添加等于slides相加的宽或高,在对flexbox布局的支持不是很好的浏览器中可能需要用到。
 autoHeight: true,//自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化
 slidesPerView: 1,//设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字(可为小数,小数不可loop),或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
 mousewheel: false,//开启鼠标滚轮控制Swiper切换。可设置鼠标选项,默认值false
 mousewheelControl: false,//同上
 height: window.innerHeight, // 高度设置,占满设备高度
 resistanceRatio: 0,//抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘,0时完全无法拖离。本业务需要
 observeParents: true,//将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新
 // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger
 debugger: true,
 // swiper的各种回调函数也可以出现在这个对象中,和swiper官方一样
 onTransitionStart(swiper){
 console.log(swiper)
 }
 }
 },
 computed: {
 swiper() {
 return this.$refs.mySwiper.swiper
 }
 },
 mounted() {
 // current swiper instance
 // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
 console.log('this is current swiper instance object', this.swiper)
 this.swiper.slideTo(3, 1000, false)
 }
}
</script>
<style scoped>
 .fade-enter-active, .fade-leave-active {
 transition: opacity .5s
 }
 .fade-enter, .fade-leave-to{
 opacity: 0
 }
 .swiper-wrapper{
 height: 100px;
 }
 .swiper-slide1{
 background: skyblue;
 }
 .swiper-slide2{
 background: yellowgreen;
 }
 .swiper-slide3{
 background: blanchedalmond;
 }
</style>

总结

以上所述是小编给大家介绍的vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
input的focus方法使用
Mar 13 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
Vue实现简易翻页效果源码分享
Nov 08 #Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 #Javascript
详解如何创建并发布一个 vue 组件
Nov 08 #Javascript
webpack开发环境和生产环境的深入理解
Nov 08 #Javascript
webpack 开发和生产并行设置的方法
Nov 08 #Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 #Javascript
深入解析ES6中的promise
Nov 08 #Javascript
You might like
缅甸的咖啡简史
2021/03/04 咖啡文化
把PHP安装为Apache DSO
2006/10/09 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
为Python程序添加图形化界面的教程
2015/04/29 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python配置文件处理的方法教程
2019/08/29 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
关于Python错误重试方法总结
2021/01/03 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
白酒市场开发计划书
2014/01/09 职场文书
年度考核评语
2014/01/19 职场文书
党员干部承诺书
2014/03/25 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
实习指导教师评语
2014/12/30 职场文书
大学生村官工作心得体会
2016/01/23 职场文书