2020-4-17 前端達人
今天講一下使用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 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% 所以就出現了這樣的情況，所以我打算采用
動態的改變 滑動到第幾頁的時候 把當頁的寬度變為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 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');
}
},
此外，監聽滑動事件，根據滑動到第幾頁 更改當前頁面的寬度，
這樣就解決了
蘭蘭設計：前端達人