iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;
最终效果图:
一、轮播图中图片自适应宽高;
<Carousel loop v-bind:height="imgHeight+'px'" v-model="carouselValue" style="text-align:center;">
<div v-for="item in imgData" >
<Carousel-Item> <img ref="imgFirst" v-bind:src="item.src" style="height:inherit;width:auto;cursor:pointer;" /> </Carousel-Item>
</div> </Carousel>
mounted: function () {
var that = this;
that.imgHeight = window.innerHeight -335;
window.onresize = function temp() { that.imgHeight = window.innerHeight - 335;
} },
在data 中定义变量: imgHeight:300
通过 在vue的mounted中,使用 window.onresize 监听浏览器变化,动态改变imgHeight大小。设置图片样式 style="height:inherit;width:auto;"
二、iview 轮播图 图片重叠问题;
发现一个问题:滚动一个轮回后发现,图片会出现叠加!!!
解决:删除 loop属性,关闭循环播放;
核心原因:loop 的情况下(尽管loop默认为false)会记忆上次浏览器调整时的图片,滚动一个轮回后html会同时出现两个图片!
三、vue this问题
为什么 var that = this ?
因为 这里是直接用vue生产的js脚本来开发,常常会出现一个问题: window.onresize 或jquery中使用this,可能会改变this的指向,使它不在指代vue对象。
四、单张图片随浏览器调整宽高;
如果你只想对单张图片随浏览器调整宽高,不需要轮播图,那么这样使用 :
data中定义: tabsHeight: 600,
<div v-bind:style="bindStyle" >
<img v-bind:src="imgData[0].src" style="height:inherit;width:auto" />
</div>
在vue的 computed 生命周期:
computed: {
bindStyle: function () {
return {
'height': '' + vm.tabsHeight + 'px',
'overflowY': 'auto',
'loverflowX': 'hidden'
}
}
},
mounted: function () {
var that = this;
that.tabsHeight= window.innerHeight -335;
window.onresize = function temp() { that.tabsHeight= window.innerHeight - 335;
} },
五、iview tabs 高度互相影响;
上面:'overflowY': 'auto', 'loverflowX': 'hidden' ,是控制滚动条的,如果你不使用iview的 tabs组件,你可以删除该部分。
因为iview tabs有一个bug,tabs之间的高度会互相影响!这样设置可以tabs高度互相影响的解决这个问题。
<Tab-pane label="表格" name="key2"> <div style="height:1000px ">我的高度会影响到我的其它兄弟! </div>
</Tab-pane> <Tab-pane label="图文介绍" name="key3"> <div v-bind:style="bindStyle" >
<img v-bind:src="imgData[0].src" style="height:inherit;width:auto" />
<div>我会被上面的tabs兄弟高度影响到,我很生气! </div>
</div>
</Tab-pane>
六、tabs 的其它问题:
v-show 无法控制Tab-pane 的显示和隐藏,只能用v-if,而v-if为true,浏览器重新渲染v-if中的内容。v-if为false时v-if中的内容不会被渲染。这将会导致一些问题,不过你想给它加一个id通过js控制,会报错因为v-if内容没有被渲染不存在。如果你想用第三方组件,那每次重新渲染时,你都必须重新new这个组件对象来完成初始化。
比如第三方看图组件 viewer。
iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;的更多相关文章
- UILabel实现自适应宽高需要注意的地方(三)
一.需求图如下所示 UILabel 的高度自适应 UILabel中的段落间距可设置 图片效果如下: 调整段落适应长宽高方式: 需求: 保证"游戏玩法 ...
- 小程 序swiper自适应宽高
https://blog.csdn.net/qq_31604363/article/details/73715944 小程 序swiper自适应宽高 小程 序swiper自适应宽高
- OpenGL ES学习笔记(二)——平滑着色、自适应宽高及三维图像生成
首先申明下,本文为笔者学习<OpenGL ES应用开发实践指南(Android卷)>的笔记,涉及的代码均出自原书,如有需要,请到原书指定源码地址下载. <Android学习笔记--O ...
- iOS - web自适应宽高(预设置的大小)
//web自适应宽高 -(void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"wessd"); [ webView s ...
- js和php计算图片自适应宽高算法实现
js Code: <script> $width = $(imgobj).width(); //图原始宽 $newheight = $(imgobj).height(); //图原始高 $ ...
- UILabel 自适应宽高
#import <UIKit/UIKit.h> @interface UILabel (UILabel_LabelHeighAndWidth) + (CGFloat)getHeightBy ...
- css background-image 自适应宽高——转载
就是这么简单的一句话,设置背景图,并让它100%的适应导航栏宽高,并设置不重复,大小100%就OK了 .zjhn-nav li.active a{ background-image:url(../im ...
- jquery easyui datagrid 空白条处理 自适应宽高 格式化函数formmater 初始化时会报错 cannot read property 'width'||'length' of null|undefined
1---表格定义好之后右侧可能会有一个空白条 这个空白条是留给滚动条的,当表格中的一页的数据在页面中不能全显示时会自动出现滚动条,网上有很多事要改源码才可以修改这个,但是当项目中多处用到时,有的需要滚 ...
- css自适应宽高等腰梯形
t1是梯形, ct是梯形里面的内容. 梯形的高度会随着内容的高度撑高.宽度随着浏览器窗口变宽. 梯形上窄下宽或上宽下窄可以通过 transform 的大小来修改. <div class=&quo ...
随机推荐
- 使用nodejs+http(s)+events+cheerio+iconv-lite爬取2717网站图片数据到本地文件夹
源代码如下: //(node:9240) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' ...
- (八)Knockout 组件 Components
概述 :组件和自定义元素 Components 是将UI代码组织成自包含的.可重用的块的一种强大而干净的方法.他们: -可以表示单个控件/窗口小部件或应用程序的整个部分 -包含它们自己的视图,并且通常 ...
- SQLite添加新的字段
通过alter添加新的字段SQL语句 "ALTER TABLE 'DiHKChatMessage' ADD 'phoneNum' varchar"; 但是如果这个字段已经存在的话, ...
- [LeetCode] 117. Populating Next Right Pointers in Each Node II 每个节点的右向指针 II
Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...
- jenkins:新增节点是启动方式没有Launch agent by connecting it to the master
默认在这里的配置是禁用 所以启动方式只有两种,缺少Launch agent by connecting it to the master
- mysql查询之 连续出现的数字,重复出现的邮箱,删除重复的电子邮箱
1.编写一个 SQL 查询,查找所有至少连续出现三次的数字. +----+-----+ | Id | Num | +----+-----+ | 1 | 1 | | 2 | 1 | | 3 | 1 | ...
- QT实现支持加密的Sqlite数据库引擎
Sqlite数据库使用很广泛,我们经常会在发布一些小型软件的时候使用它,因为它不需要安装服务器.QT默认的数据库引擎是支持SQLITE数据库的,但并不支持对数据库加密,不加密的Sqlite数据库任何人 ...
- SpringBoot+MybatisPlus+MySql 自动生成代码 自动分页
一.配置 <!-- Mybatis plus --> <dependency> <groupId>com.baomidou</groupId> < ...
- 影响MySQL的性能(一)磁盘的选择
一.磁盘的选择也是影响MySQL的性能的重大因素之一 1.使用传统的机器硬盘读取数据的过程 2.如何选择传统机器硬盘的因素 二.使用RAID增加传统机器硬盘的性能 1.什么是RAID技术 2.常见的R ...
- spring框架学习(四)——注解方式AOP
注解配置业务类 使用@Component("s") 注解ProductService 类 package com.how2java.service; import org.spri ...