van-swipe__track------Vant轮播图使用时遇到的一个坑

在做仿网易云移动端Vue项目时，有一个手动拖动轮播图切换展示图片和文字的需求。于是，我就使用了vant组件库里的Swipe轮播组件来做，选取了自定义滑块的代码。（下面为模板代码）

1234

用Swipe轮播组件设置好样式后的效果：

但是，当我设置好图片和文本样式后，我发现拖动轮播图到底部无法显示完整的数据，只能显示到倒数第二个数据，而且图片还不完整，有一部分未显示。

也就是说，总共10组数据，但轮播图只给我显示了9组，而且显示不完整。

那问题出在了哪？

一开始，我审查页面的DOM元素，发现了van-swipe__track宽度只有1500px，于是我就觉得是轮播图的容器宽度不够，从而无法展示所有数据。然后，我就想着改大它的宽度，但无论我怎么尝试都无法修改van-swipe__track的宽度，它始终是1500px。

后来，我静下心想了下上面另一个轮播图组件的van-swipe__track宽度又是另外一个数值，那这里的1500px到底是怎么定义出来的？

突然，我想到了问题所在。每组数据显示的滑块我给设置的宽度是150px，所以van-swipe__track的宽度1500px显然就是10组滑块的累加，正常情况下是能刚好装下所有滑块。但是，我之前给每组滑块添加了左右的margin值，使得这个1500px的容器装不下被撑大且宽度不止150px的滑块。如此简单的问题，困扰了我许久。

所以解决办法就是，把margin换成padding来充当间隔效果，再把滑块的自定义宽度改成170px（因为我是在全局设置了怪异盒模型，如果没设置的话，自定义宽度还是150px即可）

解决问题后的效果图：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！