vue实现整屏滚动切换


Posted in Javascript onJune 29, 2020

本文实例为大家分享了vue实现整屏滚动切换的具体代码,供大家参考,具体内容如下

1、下载vue-awesome-swiper

npm i vue-awesome-swiper -S

2、在main.js引入

import vueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(vueAwesomeSwiper);

3、直接上案例,新建一个路由页面

<template>
 <div class="hello-world">
 <swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
  <swiper-slide class="swiper-slide" v-for="(item, index) in list" :key="index">
  <div class="page">
   <h3>第{{item}}页</h3>
  </div>
  </swiper-slide>
 </swiper>
 </div>
</template>
 
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
 name: "HelloWorld",
 data() {
 return {
  list: [], //轮换列表
  swiperOption: {
  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: true, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项,默认值false
  mousewheelControl: true, //同上
  height: window.innerHeight, // 高度设置,占满设备高度
  resistanceRatio: 0, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘,0时完全无法拖离。本业务需要
  observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新
 
  // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger
  //debugger: true,
 
  // swiper的各种回调函数也可以出现在这个对象中,和swiper官方一样
  on: {
   //监听滑动切换事件,返回swiper对象
   slideChange: () => {
   let swiper = this.$refs.mySwiper.swiper;
   console.log(swiper.activeIndex); //滑动打印当前索引
   if (swiper.activeIndex === this.list.length - 1) {
    //到最后一个加载更多数据
    let newList = [];
    let listLength = this.list.length;
    for (let i = 0; i < 10; i++) {
    newList.push(listLength + i);
    }
    this.list = this.list.concat(newList);
   }
   }
  }
  }
 };
 },
 created() {
 //从后台获取数据
 this.list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 },
 // 如果你需要得到当前的swiper对象来做一些事情,你可以像下面这样定义一个方法属性来获取当前的swiper对象,同时notNextTick必须为true
 computed: {
 swiper() {
  return this.$refs.mySwiper.swiper;
 }
 },
 mounted() {
 // this.swiper.slideTo(3, 1000, false); //手动跳到指定页
 },
 components: {
 swiper,
 swiperSlide
 }
};
</script>
 
<style scoped>
.swiper-slide {
 font-size: 24px;
 text-align: center;
 line-height: 100px;
}
.swiper-slide:nth-child(2n) {
 background: skyblue;
}
.swiper-slide:nth-child(2n-1) {
 background: seashell;
}
</style>

4、电脑浏览器可能有问题,请使用真机测试

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
javascript的理解及经典案例分析
May 20 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
vue实现页面切换滑动效果
Jun 29 #Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 #Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 #Javascript
vue实现列表滚动的过渡动画
Jun 29 #Javascript
element跨分页操作选择详解
Jun 29 #Javascript
vue实现数字滚动效果
Jun 29 #Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 #Javascript
You might like
提问的智慧
2006/10/09 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
javascript网页随机点名实现过程解析
2019/10/15 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python标准库内置函数complex介绍
2014/11/25 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
大学活动策划书范文
2014/01/10 职场文书
励志演讲稿800字
2014/08/21 职场文书
个人廉政承诺书
2015/04/28 职场文书
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技