element-ui中轮播图自适应图片高度
哈哈,久违了各位。我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码。
那个axios的使用不重要,大致思路就是页面渲染前拿到当前窗口的宽度*图片比例给轮播图一个初始的高度,当窗后大小发生变化时,监听事件里将轮播图高度重新赋值即可,再次感谢两位博友的帮助
<template>
<div v-if="imgurl">
<el-carousel :height="imgHeight+'px'" trigger="click">
<el-carousel-item v-for="(item,index) in imgurl" :key="index">
<img ref="image" style="width:100%;" :src="item" alt="轮播图" />
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
// 引入axios
import axios from "axios";
export default {
name: "First",
data() {
return {
imgurl: [],
imgHeight: ""
};
},
methods: {
imgLoad() {
this.$nextTick(function() {
// 获取窗口宽度*图片的比例,定义页面初始的轮播图高度
this.imgHeight = document.body.clientWidth*1/4
});
},
getImgUrl() {
axios
.get("/carousel")
.then(res => {
for (var i = 0; i < res.data.message.length; i++) {
const imgurl = `../../static/${res.data.message[i].imgurl}`;
this.imgurl.push(imgurl);
}
// 获取到图片后,调用this.imgLoad()方法定义图片初始高度
this.imgLoad();
})
.catch(error => {
console.log(error);
});
}
},
mounted() {
this.getImgUrl();
// 监听窗口变化,使得轮播图高度自适应图片高度
window.addEventListener("resize", () => {
this.imgHeight = this.$refs.image[0].height;
});
}
};
</script>
element-ui中轮播图自适应图片高度的更多相关文章
- Bootstrap中轮播图
Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...
- jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;
最终效果图: 一.轮播图中图片自适应宽高: <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...
- javascript效果:手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...
- 【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片
业务需求: 3个图片轮番播放,可以左右滑动,点击指示点可以切换图片 index.wxml: 这里使用小程序提供的<swiper>组件autoplay:自动播放interval:自动切换时 ...
- vue-cli中轮播图vue-awesome-swiper使用方法
1 npm 安装 npm install vue-awesome-swiper --save 2在所用的组件中引入 import 'swiper/dist/css/swiper.css' import ...
- iOS中 轮播图放哪最合适? 技术分享
我们知道,轮播图放在cell或collectionViewCell上会影响用户层级交互事件,并且实现起来比较麻烦,现在推出一个技术点:答题思路是:将UIScrollView放在UIView或UICol ...
- react-native-swiper设定高度的方法(设置rn轮播图所占高度)
效果图: 直接上解决方案: 1.在Swiper标签外套一层View <View style={styles.container}> <Swiper style={styles.wra ...
随机推荐
- opengl实现直线扫描算法和区域填充算法
总体介绍 1. 使用线性扫描算法画一条线,线性离散点 2. 利用区域填充算法画多边形区域,区域离散的点 开发环境VS2012+OpenGL 开发平台 Intel core i5,Intel H ...
- 经典面试编程题--atoi()函数的实现(就是模拟手算,核心代码就一句total = 10 * total + (c - '0'); 但是要注意正负号、溢出等问题)
一.功能简介 把一个字符串转换成整数 二.linux c库函数实现 /*** *long atol(char *nptr) - Convert string to long * *Purpose: * ...
- Objective
1.NSSet 1.是一个无序的,管理多个对象的集合类,最大特点 是集合中不允许出现重复对象,和数学上的集合含义是一 样的 2.除了无序.不许重复之外,其它功能和NSArray是一样的 2.NSArr ...
- 2018-4-25-- 2.在sublime3里安装git插件并连接GitHub
1.配置全局参数 Git的主要配置包括用户名.邮箱的设置.以及生成SSH密钥公钥等. 首先运行一下的命令设置git提交代码时自己的用户信息. 2.在sublime3里使用时需要配置push.defau ...
- VS2012 调试Web项目 遭遇 HTTP 错误 500.23 - Internal Server Error
原文:VS2012 调试Web项目 遭遇 HTTP 错误 500.23 - Internal Server Error 在使用vs2012 调试Web站点时 报错 500.23,详细如图 此错误是因为 ...
- 八荣八耻 IT版
八荣八耻 IT版以可配置为荣,以硬编码为耻:以系统互备为荣,以系统单点为耻:以随时可重启为荣,以不能迁移为耻:以整体交付为荣,以部分交付为耻:以无状态为荣,以有状态为耻:以标准化为荣,以特殊化为耻:以 ...
- GIS基础软件及操作(十一)
原文 GIS基础软件及操作(十一) 练习十一.3D 可视分析 1.对地理数据进行透视观察.三维浏览:2.制作飞行动画 GIS数据三维显示 (1) 运行程序:[开始菜单]>>[所有程序]&g ...
- HTML 滚动条实现
##在对应的div中,添加overflow,固定高度为400px<div class="panel-body" style="height: 400px; over ...
- UWP入门(二) -- 基础笔记
原文:UWP入门(二) -- 基础笔记 不错的UWP入门视频,1092417123,欢迎交流 UWP-04 - What i XMAL? XAML - XML Syntax(语法) ,create i ...
- Qt使用windows API获取程序运行时占用内存 good
使用的是psapi.h中的GetProcessMemoryInfo函数,但是运行到该函数时就强制退出了. 后来,百度到原因是 原来Qt编译时加了-mthread,createprocess时要使的Ha ...