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;
            }

        },

也可以用css样式：  <div  style="height:calc(100vh - 380px);width:100%" ></div> 

 

五、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。