最终效果图:

一、轮播图中图片自适应宽高; 


                                        <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问题;的更多相关文章

  1. UILabel实现自适应宽高需要注意的地方(三)

        一.需求图如下所示    UILabel 的高度自适应 UILabel中的段落间距可设置   图片效果如下:   调整段落适应长宽高方式:         需求:   保证"游戏玩法 ...

  2. 小程 序swiper自适应宽高

    https://blog.csdn.net/qq_31604363/article/details/73715944 小程 序swiper自适应宽高 小程 序swiper自适应宽高

  3. OpenGL ES学习笔记(二)——平滑着色、自适应宽高及三维图像生成

    首先申明下,本文为笔者学习<OpenGL ES应用开发实践指南(Android卷)>的笔记,涉及的代码均出自原书,如有需要,请到原书指定源码地址下载. <Android学习笔记--O ...

  4. iOS - web自适应宽高(预设置的大小)

    //web自适应宽高 -(void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"wessd"); [ webView s ...

  5. js和php计算图片自适应宽高算法实现

    js Code: <script> $width = $(imgobj).width(); //图原始宽 $newheight = $(imgobj).height(); //图原始高 $ ...

  6. UILabel 自适应宽高

    #import <UIKit/UIKit.h> @interface UILabel (UILabel_LabelHeighAndWidth) + (CGFloat)getHeightBy ...

  7. css background-image 自适应宽高——转载

    就是这么简单的一句话,设置背景图,并让它100%的适应导航栏宽高,并设置不重复,大小100%就OK了 .zjhn-nav li.active a{ background-image:url(../im ...

  8. jquery easyui datagrid 空白条处理 自适应宽高 格式化函数formmater 初始化时会报错 cannot read property 'width'||'length' of null|undefined

    1---表格定义好之后右侧可能会有一个空白条 这个空白条是留给滚动条的,当表格中的一页的数据在页面中不能全显示时会自动出现滚动条,网上有很多事要改源码才可以修改这个,但是当项目中多处用到时,有的需要滚 ...

  9. css自适应宽高等腰梯形

    t1是梯形, ct是梯形里面的内容. 梯形的高度会随着内容的高度撑高.宽度随着浏览器窗口变宽. 梯形上窄下宽或上宽下窄可以通过 transform 的大小来修改. <div class=&quo ...

随机推荐

  1. Facets:一款Google开源机器学习数据集可视化工具

    Homepage/演示网站:https://pair-code.github.io/facets/ Pypi:https://pypi.org/project/facets-overview/ Git ...

  2. word/wps 制作下拉列表

    准备: 1.数据页 2.项目名称sheet 3.问题类型sheet 开始制作: 数据 --- 有效性 --- 允许“序列” --- 来源 -- 其他sheet页“单元格”选择范围 回车.确定 即可

  3. 常见的 35 个 Python 面试题及答案

    1. Python 面试问题及答案 作为一个 Python 新手,你必须熟悉基础知识.在本文中我们将讨论一些 Python 面试的基础问题和高级问题以及答案,以帮助你完成面试.包括 Python 开发 ...

  4. matlab-数组取值

    一起来学matlab-数组取值 觉得有用的话,欢迎一起讨论相互学习~Follow Me MATLAB中的字符串符号 :冒号 s1=['I am sad';'you are ';'interest'] ...

  5. Python - Django - AJAX 实现 POST 请求

    index.html: <input type="text" id="i1">+ <input type="text" i ...

  6. git用法汇总

    使用了一年多的git命令了,昨晚竟然又出现了问题.虽然解决了,不过还是被罚了... 总结下自己常用的git命令和遇到的一些坑. 1)常用的命令 1. 从git远程分支clone代码: git clon ...

  7. [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 ...

  8. [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 ...

  9. django:下拉框二级联动实现

    注意:只列举核心部分代码 前台模板: 第一级下拉菜单: <div class="col-sm-4"> <select data-placeholder=" ...

  10. 湖南省第6届程序大赛 Repairing a Road

    Problem G Repairing a Road You live in a small town with R bidirectional roads connecting C crossing ...