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 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
拖拉表格的JS函数
2008/11/20 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python异常处理知识点总结
2019/02/18 Python
python装饰器常见使用方法分析
2019/06/26 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python socket服务常用操作代码实例
2020/06/22 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
服务宗旨标语
2014/07/01 职场文书
运动会加油稿20字
2014/11/15 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
团结主题班会
2015/08/13 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis