uni-app 简单粗暴自己手写Steps 步骤条

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/阿里/百度/头条/QQ）等多个平台。说多了都是泪，官方的组件只有横的和竖的，你说魔改嘛，等会样式就炸了，不如自己手写一个简单粗暴的方式学会。基础教程，介绍一个我们需要了解的知识点，首先我们看下效果图

以下内容可以在CSS 选择器参考手册中查询

1.p:after

在每个 <p> 元素的内容之后插入内容

2.p:before

在每个 <p> 元素的内容之前插入内容

3.p:last-child

选择属于其父元素最后一个子元素每个 <p> 元素

4.阿里矢量图标

阿里图标引入的方式有很多，下载文件引入，在线引入。因为我们要做after和before所有我们不能直接下载图片

了解以上东西后我们开始

首先我们建立一个空的uni-app项目（万恶的老图）

1.打开首页编辑

为了方便我提现写好了头部的样式，我们主要说明以下步骤条的写法，我们画view，最大的一个包裹住里面的步骤块

<!-- 步骤条 -->
<view class="set-1">
	<view class="set-2" ></view>
	<view class="set-2" ></view>
	<view class="set-2" ></view>
</view>

随后我们给他们都上样式灰色背景，圆角，定位等

.set-1 {
	margin: 30upx;
}

.set-2 {
	background-color: #c6c6c6;
	height: 300upx;
	border-radius: 10upx;
	width: 600upx;
	margin-left: 100upx;
	margin-top: 60upx;
	position: relative;
}

2.引入阿里图标文件

直接在线方式引入，H5下是可以的，但是在小程序下回报错，TM的

@import url("//at.alicdn.com/t/font_1337773_robb7hmlk9o.css");

复制地址到浏览器打开得到文件，直接复制到style中i，或者下载图标文件，因为就一点枫瑞就直接复制了

@font-face {
	font-family: "iconfont";
	src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395');
	/* IE9 */
	src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395#iefix') format('embedded-opentype'),
	/* IE6-IE8 */
	url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB8QAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCRIIjATYCJAMUCwwABCAFhG0HZhvNBsiemjwJqJERRCC3tX4YOM4iqNbCnr29uw8wKGBUsUAKqDyCjY5HcEzCALron1wr8wDk8hKBFpIc5yaXfWZJoIBIQkF1KlvVqWuFfZ3c/CBw0p8fcMJJsQY6uIuEMk8188LgXgfHTJceiXlrm0tGajTgaMCz2T6yyf5BXh+Ef9BdxMSIS9cTaKmvYGbzFhRXA1sZ2C0QO7cRAdhadnmkNTSEqufYLM4qNdKx9AJn+M/Hb2OiQVIWwL6rNufIIP1bj29voaZspAiK/byITqLAaEAmdvX6d7KQ+dEstCw2tjQL0FJDkvZald8e//3y+WglCIaW0E/e5R8vERWvuTWY5RYy3/ywXBtKXBEF395EBN++FCQ8V5CWsmEt4CBgHMz1Ad8rde7s2LbD7oUhT3l+eWHbhxwOB+LFrfkVL7I3FIAWdpdWvfHiYt8FltYWdzy1Pz/WfPhQ/elT7efPvUJiVlRsIj8+18X3az7+5Wb48vVrbnvo7OndVe1cPc55k2ebWG7OmMgYX01bT3vJnNlJWtemes0mn3vI/PJl80NQQqVErfcH/Ys5Fy3evrVoyyZNDLSq/cp5EyYsKTbb69bD/+5fmPs/cFwxG9ABoCNdTY+AKrwdi2npHk0Xu4vMH/Q7Wl+4+Yftkv83kMHXTiVutOlsnh68ZYPZit+hmDmRSxVwlDnvxvI8WOq3gz4VCy3xE8Id/d7H2GV2M6Ghi4ak1gcKDYORGTsaSq2Mg0rDTGhplLyTW+mEsRC5BUYadyC0dwpJWw+h0N53ZMb+glJX/6DSPgpoaUN4nLOVobGtZdYuJHAkQ7EbqiVqwMjF7UVrJSKKTmCmitNrETOpUzAiNLxZykMGxPY4wNRBIjnHEDOqh7nOzZBOR6GRUQ2SeKiKc2NiWBju+6JQieqBvbkYRMAhMkjUDVKTUAaYzufsW99fCSEUOgI20rMQr4UwJurloQihwmcg8/SGWT3v8hKTDkQkjsMgjKH0oFzHi+hgnoKM/VtpIBIulGpF1ihRmDcLz9WHnm/Uv0BZNAD40zJSFJGjjEq77dsEg1ahKoF2qbupYvP0KNS2e69WbmucSNZAOpEa5XpUagAAAA==') format('woff2'),
	url('//at.alicdn.com/t/font_1337773_f06f5a7las.woff?t=1565581133395') format('woff'),
	url('//at.alicdn.com/t/font_1337773_f06f5a7las.ttf?t=1565581133395') format('truetype'),
	/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	url('//at.alicdn.com/t/font_1337773_f06f5a7las.svg?t=1565581133395#iconfont') format('svg');
	/* iOS 4.1- */
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-yuandian:before {
	content: "\e64d";
}

.icon-dingweiweizhi:before {
	content: "\e619";
}

3.写头部位置图标

.set-2::before {
	content: "\e619";/* 必须存在如果没有图标就留空 */
	color: #c6c6c6;/* 设置颜色 */
	position: absolute;/* 定位 */
	left: -108upx;/* 移动到左边 */
	font-weight: bold;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	font-family: "iconfont" !important;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	font-size: 54upx;/* 图标大小 */
	font-style: normal;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	-webkit-font-smoothing: antialiased;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	-moz-osx-font-smoothing: grayscale;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
}

4.中间的横线

.set-2::after {
	content: '';/* 必须存在如果没有图标就留空 */
	top: 24%;/* 定位 距离*/
	border-left: #c6c6c6 1px solid;/* 横线颜色 */
	left: -82upx;/* 定位 距离*/
	height: 90%;/* 高度 */
	position: absolute;/* 定位 */
}

5.设置末尾最后一个的时候删除横线

.set-2:last-child::after {
	display: none;
}

如果需要删除图标也在需写一个before就好

uni-app 简单粗暴自己手写Steps 步骤条

1.p:after

2.p:before

3.p:last-child

4.阿里矢量图标

发表回复

评论列表（2条）

uni-app 简单粗暴自己手写Steps 步骤条

1.p:after

2.p:before

3.p:last-child

4.阿里矢量图标

相关推荐

发表回复

评论列表（2条）