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 相关文章推荐
javascript使用location.search的示例
Nov 05 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
jQuery插件开发汇总
May 15 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jQuery入门知识简介
2010/03/04 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
JS实现横向轮播图(初级版)
2020/06/24 Javascript
详解Python装饰器由浅入深
2016/12/09 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
深入浅析Python的类
2018/06/22 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python的sorted用法详解
2019/06/25 Python
Python tkinter模版代码实例
2020/02/05 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
党员公开承诺践诺书
2014/03/25 职场文书
学风建设主题班会
2015/08/17 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
Python实现双向链表
2022/05/25 Python