追格资讯小程序Free热榜界面修改教程

11月/18日/小程序/浏览 234

追格资讯小程序开源版(又称酱茄free),实现WordPress网站数据与小程序同步共享,简单的配置就能搭建自己的资讯/博客小程序。一套代码多端适用(微信端、百度端、QQ端、H5端),近期更新到了v2.0.8,对部分代码进行了优化和重构,特别是热榜的结构进行了重构。


如何仅通过修改css,快速调整追格资讯小程序Free版的热榜展示呢,本教程基于v2.0.8,请各位同学更新后再结合本教程操作。


下载和更新地址:




如图所示,通过修改css就可以将现有的热榜列表改为左图和底部大图的形式

打开文件/pages/hot/hot.vue,搜索.timeline-single进行修改


1.右图改左图


	.timeline-single {
		padding-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		// 开启该参数,可以调整图片,文字的左右浮动方式
		// flex-direction: row-reverse;
	}


2.右图改大图


	.timeline-single {
		padding-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		
		// 增加换行控制参数flex-wrap
	}

	.timeline-single .jiangqie-timeline-image {
		height: 180rpx;
		width: 100%;
		padding-top: 20rpx;
		// 图片容器宽度改为100%,增加上边距,图片高度可以结合自己需求进行调整
		
	}

发表评论

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

客服 工单