uniapp小程序系列-08首页多个小图标开发

实现结果:

注释掉

创建Banner.vue

引入

放图片

写Banner.vue的样式

index.vue中再创icons.vue

Icons记得大写,我这里忘了,你们要记得大写

日常三引入icons

在icons.vue中写icons的样式,边写边调试

代码:

<style scoped>
.icons{
	display: flex;
	flex-wrap: wrap;
}
.icons-item{
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 20rpx;
}

.icons-img{
	width: 110rpx;
	height: 110rpx;
}
	
</style>

多复制几个icons-item,我们一共有8个小icon

选中相同词

【 Ctrl + E】

f-color为我们之前设定的默认颜色:

最后运行结果: