追格圈子小程序或追格资讯小程序(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;
-
小站点评更新发布自动获取产品icon和首页弹窗广告功能小站点评V1.5.0更新发布自动获取产品icon和首页弹窗广告功能
-
WordPress是干什么的WordPress是一款开源的CMS,也就是常说的内容管理系统,它基于PHP开发,并使用MySQL作为数据库管理系统。
-
WordPress教程菜鸟教程之WordPress主题和插件开发追格小编同学已经撰写并分享过一些相关的教程,包括WordPress主题开发教程和WordPress插件开发教程。
-
追格小程序V2.2.0两大亮点来袭,你准备好了吗?追格小程序终于迎来了两大全新功能模块的华丽登场!它们分别是圈子(圈主)管理模块和付费推广模块。
-
WordPress新手必学的10个实用小技巧WordPress新手必学的10个实用小技巧,让你轻松驾驭建站之旅!为了让新手朋友在使用WordPress时更加得心应手,追格特意整理了这些实用技巧。掌握了它们,你的WordPress之旅将会更加顺畅无阻,快来一起学习吧!
-
如何通过链接进入小程序如何通过链接进入小程序
暂无评论,抢个沙发...