今天講一下使用vant Swipe 輪播控件過(guò)程中遇到的問(wèn)題
主要是使用swiper自定義的大小的時(shí)候，寬度適應(yīng)不同分辨率的移動(dòng)設(shè)備
適應(yīng)寬度的同時(shí)還需控件的正常使用
先看一下需要實(shí)現(xiàn)的功能，
一個(gè)簡(jiǎn)單的輪播圖，但是每個(gè)輪播的寬度需要低于100%，使第二個(gè)輪播的van-swipe-item可以展示到第一個(gè)位置一部分
這時(shí)我們?cè)偃ant的文檔查看一下控件
剛好有一個(gè)自定義控件大小的可以使用，完美解決了我們的問(wèn)題
當(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 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)的情況，
簡(jiǎn)單來(lái)說(shuō)，我們把van-swipe-item寬度控制在了80% 第二個(gè)van-swipe-item自然可以展示出來(lái)一部分
但是當(dāng)滑到第二頁(yè)的時(shí)候 由于第一頁(yè)的寬度還是80% 所以就出現(xiàn)了這樣的情況，所以我打算采用
監(jiān)聽 change 事件
動(dòng)態(tài)的改變 滑動(dòng)到第幾頁(yè)的時(shí)候 把當(dāng)頁(yè)的寬度變?yōu)?0% 其他頁(yè)保持不變，
于是
<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 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)到第幾頁(yè) 更改當(dāng)前頁(yè)面的寬度，
這樣就解決了
Swipe自定義寬度下，同時(shí)適應(yīng)不同分辨率的情況
蘭蘭設(shè)計(jì)：前端達(dá)人
