今天讲一下使用vant Swipe 轮播控件过程中遇到的问题

主要是使用swiper自定义的大小的时候，宽度适应不同分辨率的移动设备

适应宽度的同时还需控件的正常使用

先看一下需要实现的功能，

一个简单的轮播图，但是每个轮播的宽度需要低于100%，使第二个轮播的van-swipe-item可以展示到第一个位置一部分

这时我们再去vant的文档查看一下控件

刚好有一个自定义控件大小的可以使用，完美解决了我们的问题

当我们使用控件之后

 <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>部门经理核审中</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>

发现功能可以使用，但是再 iPhone8/7 plus  以及iPhone5/se 等分辨率下出现了宽度固定而不适应的情况，

简单来说，我们把van-swipe-item宽度控制在了80% 第二个van-swipe-item自然可以展示出来一部分

但是当滑到第二页的时候 由于第一页的宽度还是80% 所以就出现了这样的情况，所以我打算采用

监听 change 事件

动态的改变 滑动到第几页的时候 把当页的宽度变为80% 其他页保持不变，

于是

 <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>部门经理核审中</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>

首先 我们为每个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('当前 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');
                }
            },

此外，监听滑动事件，根据滑动到第几页 更改当前页面的宽度，

这样就解决了

Swipe自定义宽度下，同时适应不同分辨率的情况

兰兰设计：前端达人