追格圈子/资讯小程序 调整轮播图(单图/多图)带间距的方法

09月/30日/小程序/浏览 439

追格圈子小程序追格资讯小程序(uniapp版)中,轮播图有单图展示,也有多图带间距展示两种形式。为了方便用户自由调整,我们将这种调整方式做以下简单介绍。


通过调整以下参数及css,即可变为多图带间距轮播,以追格圈子小程序中的“资讯模块”为例,如下图:



1、打开:/pages/cms/index/index.vue


代码部分在原有轮播标签中增加以下参数,设置轮播间距模式(间距可自由控制)


previous-margin="20rpx" next-margin="20rpx"


<swiper indicator-dots="true" autoplay="autoplay" circular="ture"
					previous-margin="20rpx" next-margin="20rpx"
					indicator-color="rgba(255,255,255, 0.3)" indicator-active-color="rgba(255,255,255, 0.8)"
					interval="5000" duration="150" easing-function="linear">


2、在css部分,增加新样式(用于调整轮播间距,该间距可以自由调整)


.jiangqie-article-swiper view {
		padding: 0 5rpx;
	}


反过来,即可将带间距的改为单图模式,如下图:



previous-margin="20rpx" next-margin="20rpx"


改为:


previous-margin="0rpx" next-margin="0rpx"


图片外容器的左右间距改为0 即可,参考之前例子


padding: 0 5rpx;


改为:


padding: 0 0rpx;


发表评论

暂无评论,抢个沙发...

客服 工单