今天講一下使用vant Swipe 輪播控件過程中遇到的問題

主要是使用swiper自定義的大小的時(shí)候，寬度適應(yīng)不同分辨率的移動(dòng)設(shè)備

適應(yīng)寬度的同時(shí)還需控件的正常使用

先看一下需要實(shí)現(xiàn)的功能，

一個(gè)簡單的輪播圖，但是每個(gè)輪播的寬度需要低于100%，使第二個(gè)輪播的van-swipe-item可以展示到第一個(gè)位置一部分

這時(shí)我們再去vant的文檔查看一下控件

剛好有一個(gè)自定義控件大小的可以使用，完美解決了我們的問題

當(dāng)我們使用控件之后

 <van-swipe :loop="false"  @change="onChange" :width="350">
        <van-swipe-item v-bind:id="item0"><div class="swipe0">
            <div class="contion">

                <p class="title">家中有事，申請請假一天</p>
                <p class="title1"><span class="rice"></span>部門經(jīng)理核審中</p>
                <p class="time">03.8 &nbsp;&nbsp;&nbsp; 14.25</p>
                <p class="type">放假申請</p>
            </div>
            <img src="../../assets/images/index/xx/fangjia.png">

        </div></van-swipe-item>
        <van-swipe-item ><div class="swipe1"></div></van-swipe-item>
        <van-swipe-item ><div class="swipe2"></div></van-swipe-item>
        <template #indicator>
            <div class="custom-indicator">
                {{ current + 1 }}/3
            </div>
        </template>
    </van-swipe>

發(fā)現(xiàn)功能可以使用，但是再 iPhone8/7 plus  以及iPhone5/se 等分辨率下出現(xiàn)了寬度固定而不適應(yīng)的情況，

簡單來說，我們把van-swipe-item寬度控制在了80% 第二個(gè)van-swipe-item自然可以展示出來一部分

但是當(dāng)滑到第二頁的時(shí)候 由于第一頁的寬度還是80% 所以就出現(xiàn)了這樣的情況，所以我打算采用

監(jiān)聽 change 事件

動(dòng)態(tài)的改變 滑動(dòng)到第幾頁的時(shí)候 把當(dāng)頁的寬度變?yōu)?0% 其他頁保持不變，

于是

 <van-swipe :loop="false"  @change="onChange" >
        <van-swipe-item v-bind:id="item0"><div class="swipe0">
            <div class="contion">

                <p class="title">家中有事，申請請假一天</p>
                <p class="title1"><span class="rice"></span>部門經(jīng)理核審中</p>
                <p class="time">03.8 &nbsp;&nbsp;&nbsp; 14.25</p>
                <p class="type">放假申請</p>
            </div>
            <img src="../../assets/images/index/xx/fangjia.png">

        </div></van-swipe-item>
        <van-swipe-item v-bind:id="item1"><div class="swipe1"></div></van-swipe-item>
        <van-swipe-item v-bind:id="item2"><div class="swipe2"></div></van-swipe-item>
        <template #indicator>
            <div class="custom-indicator">
                {{ current + 1 }}/3
            </div>
        </template>
    </van-swipe>

首先 我們?yōu)槊總€(gè)swipe-item添加id

 data(){
            return {
                android: true,
                ios: true,
                iphoneX: true,
                current: 0,
                item0:'item0',
                item1:'item1',
                item2:'item2',
            }
        },
        mounted(){

        },
        methods: {
            onChange(index){
                console.log('當(dāng)前 Swipe 索引：' + index);
                if(index==1){
                    var div =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
                    var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
                    var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
                } else  if(index==2){
                    var div1 =document.getElementById("item1").style.setProperty('width', '10rem', 'important');
                    var div0 =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
                    var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
                } else  if(index==0){
                    var div =document.getElementById("item2");
                    var div0 =document.getElementById("item0").style.setProperty('width', '9.3333333rem', 'important');
                    var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
                }
            },

此外，監(jiān)聽滑動(dòng)事件，根據(jù)滑動(dòng)到第幾頁 更改當(dāng)前頁面的寬度，

這樣就解決了

Swipe自定義寬度下，同時(shí)適應(yīng)不同分辨率的情況

蘭蘭設(shè)計(jì)：前端達(dá)人