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 ...
随机推荐
- Facets:一款Google开源机器学习数据集可视化工具
Homepage/演示网站:https://pair-code.github.io/facets/ Pypi:https://pypi.org/project/facets-overview/ Git ...
- word/wps 制作下拉列表
准备: 1.数据页 2.项目名称sheet 3.问题类型sheet 开始制作: 数据 --- 有效性 --- 允许“序列” --- 来源 -- 其他sheet页“单元格”选择范围 回车.确定 即可
- 常见的 35 个 Python 面试题及答案
1. Python 面试问题及答案 作为一个 Python 新手,你必须熟悉基础知识.在本文中我们将讨论一些 Python 面试的基础问题和高级问题以及答案,以帮助你完成面试.包括 Python 开发 ...
- matlab-数组取值
一起来学matlab-数组取值 觉得有用的话,欢迎一起讨论相互学习~Follow Me MATLAB中的字符串符号 :冒号 s1=['I am sad';'you are ';'interest'] ...
- Python - Django - AJAX 实现 POST 请求
index.html: <input type="text" id="i1">+ <input type="text" i ...
- git用法汇总
使用了一年多的git命令了,昨晚竟然又出现了问题.虽然解决了,不过还是被罚了... 总结下自己常用的git命令和遇到的一些坑. 1)常用的命令 1. 从git远程分支clone代码: git clon ...
- [LeetCode] 121. Best Time to Buy and Sell Stock 买卖股票的最佳时间
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- [LeetCode] 138. Copy List with Random Pointer 拷贝带随机指针的链表
A linked list is given such that each node contains an additional random pointer which could point t ...
- django:下拉框二级联动实现
注意:只列举核心部分代码 前台模板: 第一级下拉菜单: <div class="col-sm-4"> <select data-placeholder=" ...
- 湖南省第6届程序大赛 Repairing a Road
Problem G Repairing a Road You live in a small town with R bidirectional roads connecting C crossing ...