追格圈子小程序中如何调整自定义icon展示形式及展示效果

07月/22日/小程序/浏览 392

追格圈子小程序首页的自定义icon模块,官方为大家提供了两种展示形式


1、横向滚动模式

2、自动换行模式


默认为滚动模式,因为两种形式实现的程序代码结构不一致,在切换展示形式时需要用户自己编辑模板文件index.vue,在文件的第54行,65行分别是两个展示结构的代码。


如果需要使用滚动模式,保持源文件不动即可


如果需要使用自动换行模式,注释54-62行,然后解开65-72行的注释就可以了


如果用户需要调整图标大小及每个图标所占区域宽度,修改main.scss中的以下css即可


 /* --- 此处修改单一图标块所占宽度,用rpx,px,百分比均可 --- */
.jiangqie-custom-icon {
	width: 20%;
	text-align: center;
	padding-bottom: 10rpx;
}
/* --- 此处修改单一图标宽高,建议rpx --- */
.jiangqie-custom-icon image {
	height: 90rpx;
	width: 90rpx;
}

/* --- 此处修改图标下文字相关,字号,颜色(需要增加color属性),粗细(需要增加font-weight) --- */
.jiangqie-custom-icon text {
	display: block;
	line-height: 1.2rem;
	font-size: $Q-sub-info-size;
}

发表评论

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

客服 工单