vue,vant,使用過程中 Swipe 輪播自定義大小遇到的坑

2020-4-17    前端達(dá)人

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

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

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


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

微信截圖_20200417142351.png

微信截圖_20200417142429.png

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



這時(shí)我們?cè)偃ant的文檔查看一下控件

微信截圖_20200417142821.png


剛好有一個(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">家中有事,申請(qǐng)請(qǐng)假一天</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">放假申請(qǐng)</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)的情況,

微信截圖_20200417143329.png

微信截圖_20200417143349.png


簡(jiǎn)單來說,我們把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">家中有事,申請(qǐng)請(qǐng)假一天</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">放假申請(qǐng)</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á)人





分享本文至:

日歷

鏈接

個(gè)人資料

存檔