【Uni-App】循环引用阿里图标/vue子组件添加样式

1循环遍历图片

<view class="uicon" v-for="(item,index) in Uicons":key="index" >

2进行绑定事件 将菜单中图标与文字绑定在一起

<view v-bind:class="bg_icon">
	<view class="iconfont" >{{item.icon}}</view>
	<text class="icontext">{{item.name}}</text>
</view>

3引入阿里图标

将图标添加入库，选好后选择添加至项目

选择添加的项目，生成在线链接，将复制的代码放入<style>中。注意名称的一致性。

@font-face {
  font-family: 'iconfont';  /* project id 1300620 */
  src: url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.eot');
  src: url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.woff') format('woff'),
  url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.svg#iconfont') format('svg');
}
.iconfont{
	padding-top:5upx;
	display: inline-block;
    font-family:"iconfont" !important;
    font-size:32px;
	font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
	vertical-align:middle;
	//border: yellow 1px solid;
	color: #FFFDEF;
}

4在要遍历的Uicons数组中添加相应图标与名字

{
	name:'HTML',
	url:'',
	icon:'\ued2e',
	code:'0'
					},

注意：要将复制的图标代码&#xebe6;改为\uebe6

显示效果如下：

附加：如何给循环的子组件添加不同的样式

将第二步的绑定class改为绑定class样式的数组

<view v-bind:class="bg_icons[index]">
	<view class="iconfont" >{{item.icon}}</view>
	<text class="icontext">{{item.name}}</text>
</view>

此时bg_icons数组如下

bg_icons:[
    "bg_icon bg_icon1",
    "bg_icon bg_icon2",
    "bg_icon bg_icon3",
    "bg_icon bg_icon4",
    "bg_icon bg_icon5",
],

此时可以在数组中添加多个不同样式

实现效果如下：

整体代码如下：

<template>
	<view class="container">
		<view class="uicons">
			<view class="uicon" v-for="(item,index) in Uicons":key="index" >
				<navigator :url="item.url+'?name='+item.name+'&code='+item.code"></navigator>
					<view v-bind:class="bg_icons[index]">
						<view class="iconfont" >{{item.icon}}</view>
						<text class="icontext">{{item.name}}</text>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				bg_icons:[
					"bg_icon bg_icon1",
					"bg_icon bg_icon2",
					"bg_icon bg_icon3",
					"bg_icon bg_icon4",
					"bg_icon bg_icon5",
				],
				Uicons:[
					{
						name:'HTML',
						url:'',
						icon:'\ued2e',
						code:'0'
					},
					{
						name:'JAVA',
						url:'',
						icon:'\uec4e',
						code:'0'
					},
					{
						name:'CSSs',
						url:'',
						icon:'\uebe6',
						code:'0'
					},
					{
						name:'GOoo',
						url:'',
						icon:'\ueb8b',
						code:'0'
					},
					{
						name:'Python',
						url:'',
						icon:'\ueb65',
						code:'0'
					},
				]				
			}
		},
		methods: {
		}
	}
</script>

<style>
@font-face {
  font-family: 'iconfont';  /* project id 1300620 */
  src: url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.eot');
  src: url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.woff') format('woff'),
  url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1300620_4nlxtjdc4pg.svg#iconfont') format('svg');
}
.iconfont{
	padding-top:5upx;
	display: inline-block;
    font-family:"iconfont" !important;
    font-size:32px;
	font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
	vertical-align:middle;
	//border: yellow 1px solid;
	color: #FFFDEF;
}
.uicons{
	display: flex;
	justify-content: space-between;
	border: #A71D5D 3px solids;
}
.uicon{
	display: inline-block;
	width: 19%;
	border: yellow 3px solids;
}
.ublock{
	//border: forestgreen 1px solid;
	//background-color: #228B22;
}
.bg_icon{
	margin: 4upx;
	background: #0077AA;
	display: inline-block;
	border: #A71D5D 1px solid;
	//flex:0 0 auto;
	width: 130upx;
	text-align: center;
//	float:left;
}
.bg_icon1{
	background: red;
}
.bg_icon2{
	background: #228B22;
}
.bg_icon3{
	background: #795DA3;
}
.bg_icon4{
	background: #DF5000;
}
.bg_icon5{
	background: #708090;
}
.icontext{
	display: block;

}
 page{
	width: 100%;
	height: 100%;
	background: #B3D4FC;
} 
</style>