vue-awesome-swiper 设置autoHeight，最后不满一页也占了一页

最新推荐文章于 2023-10-26 15:07:07 发布
最新推荐文章于 2023-10-26 15:07:07 发布
阅读量749 收藏
点赞数
分类专栏： swiper 文章标签： js jquery vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangzixiansheng/article/details/121477752
版权

坑多多，做兼容和自适应想死的那种

类似底部导航，是放在swiper里的slide

不满一页，但是在进行页面缩放时就会占满一页 不好看

将autoHeight取消，然后设置除导航栏以外的height: calc(100vh) !important;

这样缩放都不会自动

弑天落羽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue插件之vue-awesome-swiper轮播之全屏滚动
zssd980210的博客
04-10 2209
1.安装vue-awesome-swiper npm install vue-awesome-swiper --save 2.在mian.js文件中引入插件 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) 3.html骨...
前端vue-awesome-swiper实现上下两级相互联动
12-02
前端vue-awesome-swiper实现上下两级相互联动，绝对优秀！！！
Vue vue-awesome-swiper 的坑
dicha7140的博客
02-07 228
1、在vertical的场景模式下，默认的高度很奇怪，非常非常的大。完全没有规律。后来使用autoHeight好了一点。但依然有问题，问题在于它会根据swiper-slide内元素的高度自动变化叠加。依然会非常非常大。最后才知道。手动设置height即可解决。由于我的场景是fullpage页面，所以只需要设置height : window.innerHeight 即可。完整代码如下： ...
swiper.js（自适应高度autoHeight）做鼠标滚轮整屏滑动功能
Janice_97的博客
02-27 2457
swiper.js利用自适应高度autoHeight做鼠标滚轮整屏滑动功能
swiper高度自适应
zoepriselife316的博客
08-24 2985
swiper高度自适应
mpvue： swiper组件实现选项卡功能 高度自适应
weixin_40877092的博客
12-29 2912
遇到的困难：swiper组件有一个默认高度，因此无法自动高度自适应，商品详情里的大量图片无法显示 解决：因图片height固定，可以在获取数据时，得到图片数量。数量x高度即为swiper的height。 把图片数量存在2个变量里 设置swiper高度：h为图片数量，400rpx为每张图片高度 注意：因为选项卡是动态的，每个卡片的高度应由内容决定，h变量用于动态控制swiper高度；而...
vue引入新版 vue-awesome-swiper插件填坑问题
08-28
Vue-Awesome-Swiper 是一个基于 Swiper 的 Vue 组件库，它提供了许多有用的功能，如滑块、分页、自动播放等。本文将解决以下三个问题：为什么 Vue-Awesome-Swiper 组件的分页小圆点不显示？为什么 Vue-Awesome-...
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome...
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
12-12
当时用的是vue-cli-3 + ant-design-vue实现的页面，发现ant-design-vue里头有现成的Carousel组件可用，由于排期比较急，先暂时用这个实现了第一版，没有特效没有其他花里胡哨的展示。验收完第一版后，发现ant-design...
解决 Swiper 插件autoHeight问题 建议
weixin_34056162的博客
09-15 1850
var mySwiper=$(".swiper-container").swiper({ autoHeight: true, onSlideChangeStart: function() { var H = $(".swiper-slide").eq(mySwiper.activeIndex).find(".bigbox").height(); ...
swiper autoheight选项卡嵌套出现空白问题
yemuxia_sinian的博客
10-24 3720
swiper的autoheight设置可以用来解决tab切换时内容高度不一致而出现的空白问题。但是没想到今天做项目时，又出现了这个问题。 我的问题是这样的：用swiper3.1制作了一个tab选项卡（就叫swiper选项卡吧，设置了autoheight），里面又嵌套了一个jq写的一般选项卡（叫jq选项卡），jq选项卡内容高度也是不一致的。如果jq选项卡一开始显示的是高内容的，那么切换到低内容时，
swiper中加了autoheight后swiper-wrapper的高度显示不正确的解决方法
热门推荐
老虎帅呆了的博客
12-02 2万+
前段时间在做项目的时候用到了swiper来做Tab切换，但是却遇到了下面的问题： swiper中加了autoheight后swiper-wrapper的高度显示不正确， function changeQuestion(){ //问答的滑动区域       var mySwiper = new Swiper ('.questions .swiper-container', {
swiper高度自适应autoHeight出现元素消失问题
qq_42396791的博客
10-26 438
swiper高度设置自适应autoHeight出现元素消失问题
vue+nuxtjs中使用swiper( vue-awesome-swiper)缩略图(双向控制)
勋染的博客
09-06 807
效果 npm安装 npm install swiper@5.2.0 vue-awesome-swiper@4.1.1 --save main.js全局安装 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) 组件里调用 import { Swiper, SwiperSlide } fro
swiper 高度自适应 子元素高度改变 父元素高度自适应
Khun_HWJ的博客
07-11 2859
由于swiper-container的高度问题，会让盒子自动找最高的盒子来撑开内容，高度不一的情况下会导致有部分空白 解决方法：添加autoHeight:'auto', 就可以自适应了 但是，如果盒子里面需要点击展开新内容时，不会完整的加载好内容，第二次点击仍是会撑开盒子，初始化一下 解决方法： observer: true,//修改swiper自己或子元素时，自动初始化swiper obser...
footer不满一屏时在最底部，超出一屏时在页面最下部
weixin_30530339的博客
01-02 468
1.对footer的底部，一般不满一屏时要固定在页面的最底部，超出一屏时随着页面的高度来 最近发现公司的同事又遇到了这个问题 自己一直用的解决方法是 在主内容外加一层div 设为min-height:100%; 加上后发现没用，这时需要给html,body设置height:100%;需要两个都设为height:100%; footer设为绝对定位，bottom:0; 最后div要用pa...
vue swiper的插件
曲小强
05-15 670
首先我们要用到swiper,所以要安装它，通过npm安装安装npm install swiper然后好麻烦直接贴代码了   ↓↓↓<template> <div id="banner"> <div class="swiper-container"> <div class="swiper-wrapper">
vue分页的设置
Heartnottowake的博客
06-29 1681
1，在vue.config.js中添加如下代码 2，在.eslint.js中注释掉重新启动项目，大功告成
vue中使用swiper swiper-slide高度不同 高度自适应
周18的碎碎念
03-05 3718
需求： swiper-slide里是组件，俩组件高度不一样，正常写的话，会取最高的组件的高度，这样另一个组件底部就会出现大片空白 解决： autoHeight: true <swiper ref="mySwiper" :options='swiperOptions'> <swiper-slide>1</swiper-slide> <swiper-slide>2</swiper-slide> &lt
vue-awesome-swiper swiper-slide点击事件
最新发布
03-02
vue-awesome-swiper是一个基于Vue.js的轮播组件，它是对Swiper的封装和扩展。swiper-slide是vue-awesome-swiper中的一个组件，用于展示轮播项。要给swiper-slide添加点击事件，可以通过以下步骤实现： 1. 首先，在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值