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。