微信小程序swiper前后边距的使用

您所在的位置:网站首页 微信小程序swiper左右切换总感觉咔咔的 微信小程序swiper前后边距的使用

微信小程序swiper前后边距的使用

2024-07-03 18:59| 来源: 网络整理| 查看: 265

微信小程序swiper前后边距的使用 小程序有一个滑动视图容器swiper提供了两个属性:

(1)previous-margin:前边距,可用于露出前一项的一小部分,支持px和rpx (2)next-margin:后边距,可用于露出后一项的一小部分,支持px和rpx 假如需要做一个效果,如下图所示,图片左右滑动,每次滑动都居中显示。 在这里插入图片描述 在这里插入图片描述 注:1.图片的宽度不能和swiper-item的宽度一致,否则不生效 2.想要图片居中滑动,需要设置前后间距一致 1.确认想要显示的图片的宽度是610rpx,而屏幕的总宽度是750rpx 2.屏幕总宽度-图片宽度:750-610=140rpx(显示一张图剩下的屏幕宽度) 3.确定两张图片之间的间距,假设为10rpx 4.将屏幕剩余宽度均分,减去两张图之间的间距 140➗2-10=60rpx 60rpx就是前后间距 代码如下



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3