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

说到h5中的翻页，可以肯定的是首先想到的是swiper。但是我当时想的是，vue里面的swiper怎么用？

Vue-awesome-swiper是其中一个前辈的结晶。只要看看第一个和最后一个字，你就会知道他是vue和swiper的爱子。

vue-awesome-官网是中文文档，我妈再也不用担心我看api了。“基于Swiper4的Vue转盘组件”。在产品推动进步的紧张环境下，在到处寻找解决方案的情况下，这句话简直大放异彩。

官方文件很清楚怎么用，但我还是想记录下来，以便再次推广。

第一，天才的第一步，这里没有尿布( ﹏ )，这似乎暴露了年龄.)

准备一个基于vue-cli(或者你自己的脚手架，无论什么)的项目。如果您没有准备好，请转到vue-cli教程：

https://www.jb51.net/article/150412.htm

第二，在项目目录中，在node_modules中安装插件vue-awesome-wiper(可以在项目目录中移动鼠标右键，选择‘在此打开命令窗口’)。

注意：我是在这里的窗口电脑上安装的。所有右侧按钮可能与未安装的按钮不同。找不到这个教程：大口安装过程，使用方法和CMD常用命令导航

然后在下面输入安装插件命令

npm i - s vue-awesome-swiper

3.第三步我们还是没有天才裤，要一步一步稳步走。

1.安装插件后，会引用插件，main.js有三个步骤：

(1)参考插件：mainjs注册vas

(2)注册插件

注册后，我没有使用控制台就发出警告

您可以通过全局方法Vue.use()来使用该插件

使用后控制台没有任何问题

(3)插件风格(也可以自己写，不可以别人写)

2.用于2.vue项目：

(1)准备-模板

新建项目准备一个空项目

初始化html-空结构

(2)介绍-导入

(3)注册组件-组件

(4)配置-js(具体配置和swiper完全一样，看看swiper官网就知道了。我只说我这次使用的配置的意义)

Swiper官方网站参数

(5)美化-css

wan~

效果：

代码：

main.js

从' vue-awesome swiper-swiper ' import ' swiper/dist/CSS/swiper . CSS ' vue . use(vue awesome swiper)zujian . vue导入vue

模板div class='hello-world '！h3https://github.com/surmon-china/vue-awesome-swiper/h3！h3http://www.swiper.com.cn/api/index2.html/h3！-http://www.swiper.com.cn/api/parameters/21.html-过渡名称=' fade ' swiper id=' swiper box ' v-bind : options=' swiperOption ' ref=' MySwifer '！-第一页-雨刷器-幻灯片='雨刷器-幻灯片1 ' div class=' page第一页/H3/H3/div/swiper-幻灯片！-第2页-Swiper-Slide Class=' Swiper-Slide 2 ' div Class=' Page ' H3第2页/h3 /div /swiper-slide！-第3页-Swiper-Slide Class=' Swiper-Slide 3 ' div Class=' Page ' H3第3页/H3/div/Swiper-Slide/Swiper/Transition/div/template script Post { Swiper，swiperSlide }从' vue-awesome-swiper '导出默认{ name: ' HelloWorld，组件3360 { swiper，swiperSlide }，Data(){ return { swiperoption : } {//Swiper configs所有配置与Swiper官方api配置相同not//notnexttick是组件自己的属性。如果notnexttick设置为true，Components将不会通过nexttick实例化雨刷，这意味着您可以在第一时间获得雨刷对象。如果需要加载并使用获得的wiper对象做一些事情，那么这个属性必须是true direction : '垂直'，//在水平方向移动grabcursor://当鼠标覆盖雨刮器时，指针会变成手掌形状，拖动时，指针会变成手柄形状setWrappersize:true。//Swiper使用flexbox布局(display3360flex)。打开此设置将增加一个宽度或高度，该宽度或高度等于包装上添加的幻灯片，这可能是不太支持flexbox布局的浏览器所需要的。AutoHeight: true，//自动高度。当设置为true时，包装和容器将随着当前幻灯片的高度而变化。幻灯片查看： 1。//设置滑块容器可以同时显示的幻灯片数量(转盘模式)。它可以设置为数字(十进制，十进制不能循环)，或者“自动”根据幻灯片的宽度自动设置数字。在循环模式下，如果设置为“自动”，则需要设置另一个参数“循环滑动”。Mousewheel : false。//打开鼠标滚轮控制Swiper开关。可以设置鼠标选项，默认值为false鼠标滚轮控制： false，//同高度： window.innerheight，//高度设置，占用设备高度阻力操作： 0，//阻力率。边际阻力比。数值越小，阻力越大，越难将滑块拖离边缘。当为0时，它根本不能被拖走。这项业务需要家长遵守：的真实。//对Swiper的父元素应用观察。Swiper的父元素发生变化时，比如window.resize，Swiper update//如果插件是自己设计的，那么插件的一些配置相关参数也应该出现在这个对象中，比如Debugger Debugger : True，//Swiper的各种回调函数也可以出现在这个对象中。像swiper一样正式，转换开始(Swiper){控制台。log (Swiper)}}，Computed : { Swiper(){返回此。参考文献。我的雨刷。swiper}}，Mounted(){//当前Swiper实例//然后您可以在当前上下文中使用Swiper对象来执行您想要执行的操作console.log('这是当前Swiper实例对象'，this . Swiper)this . Swiper . slide to(3，1000，false) }}/scriptstyle作用域。淡入激活。淡入淡出激活{过渡：不透明度. 5s }。淡入。淡入淡出到{ opacity: 0 }。swiper-wrapper { height : 100 px；} .swiper-slide 1 { background : sky blue；} .swiper-slide2{ background:黄绿色；} .swiper-slide 3 { background : blanchedalmond；}/样式摘要

以上是边肖推出的基于vue实现h5滑动翻页效果的vue-awesome-swiper[推荐]。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！