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

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

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

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

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

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

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

当我们使用控件之后

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

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

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

监听 change 事件

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

于是

首先 我们为每个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自定义宽度下，同时适应不同分辨率的情况

兰兰设计：前端达人

您可以选择一种方式赞助本站支付宝转账赞助

分享到各大网站