Vue大屏自适应--响应式盒子

Posted 2023-05-03

参考技术A 1、在Vue项目 src文件夹内新建 utils文件夹=>index.js。

2、在utils文件夹内的index.js内获取可视窗口宽高

1、在store仓库中创建自定义模块 modules

2、配置仓库
在modules文件夹内的model.js文件内引入Util文件
存储页面宽高及配置修改页面宽高函数

3、在index.js文件内引入自定义模块

main.js 配置 window.onresize 修改页面宽高

swiper插件怎么设置响应式高度自适应？

html样式和调用插件的函数都在图上，图片我是用background设置url，但是弄完发现width好像可以自适应屏幕宽度，height却没高度，这个是怎么弄的？新手刚用这个插件，有些搞不懂。。谁能帮我看看哪里错了

参考技术A onSlideChangeStart: function()
var H = $(".content-slide").eq(tabsSwiper.activeIndex).height();
$(".swiper-slide").css('height', H + 'px');
$(".swiper-wrapper").css('height', H + 'px');

这段放里面试试追问

不行

本回答被提问者采纳 参考技术B 修改Swiper.css中的css即可，即：
.swiper-container
/* Specify Swiper's Size: */
width: 100%;
height: 5rem;

.swiper-slide
/* Specify Slides's Size: */
width: 100%;
height: 100%;
参考技术C .swiper-container
width: 100vw;
height: 100vh;

.swiper-slide
width: 100vw;
height: 100vh;