uni-app引入官方的css样式库、动画库和自定义图标库_uniapp官方css-程序员宅基地

技术标签： uni-app修炼之路 css样式库 uni-app

uni-app修炼之路（三）

导语
引入官方css样式库
- 从官方演示模板项目复制过来

导语

上次我记录一下如何使用uni-app创建项目，并讲解uni-app的结构。隔了一个星期在准备ACM就没有写，今天来介绍一下如何引入官方的css样式库。

引入官方css样式库

从官方演示模板项目复制过来

1.创建官方演示模板Hello-uniapp

在这里插入图片描述

2.打开Hello uni-app项目中的App.vue文件，复制以下内容到我们自己需要引入CSS样式库的项目中的App.vue文件。

/* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
    @import './common/uni.css';

3.在Hello uni-app项目中把上面引入的uni.css文件复制到我们的项目中，同样自己新建一个common目录，把它放到里面。

在这里插入图片描述

4.使用实例

首先我们打开uni-app官网查看高效开发技巧，里面为我们提供了很多快捷键

在这里插入图片描述

以uList为例，输入ulist按回车键，便出现了如下代码

在这里插入图片描述

这里与官方文档给出的结果不同，官方文档给出的如下

在这里插入图片描述

这里我们可以自定义去更改我们的代码块

在这里插入图片描述
在右边的自定义代码块中的大括号里面添加以下代码，保存即可

"ulist":{
		"body":[
			"<view class=\"uni-list\">",
			    "\t<view class=\"uni-list-cell\">",
			        "\t\t<view class=\"uni-list-cell-navigate uni-navigate-right\" v-for=\"(item,index) in list\" :key=\"index\">",
			            "\t\t\t{
   {item.value}}",
			        "\t\t</view>",
			    "\t</view>",
			"</view>"
		],
		"prefix": "ulist",
		"project": "uni-app",
		"scope": "source.vue.html"	
	}

可以看到，这个ulist中的样式，便是使用了官方样式库中的uni-list样式
例如下面的代码展示了列表的使用

<template>
	<view>
		
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right">
					列表一
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right">
					列表一
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right">
					列表一
				</view>
			</view>
		</view>
		
	</view>
</template>

本文链接：https://blog.csdn.net/star_of_science/article/details/100191739

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

三、购物车案例_17(笔记)_购物车案例请求数据地址-程序员宅基地

文章浏览阅读332次。购物车_购物车案例请求数据地址

在unity中DOTween 使用方法_tween number-程序员宅基地

文章浏览阅读603次。DOTween 使用方法_tween number

DSP之TMS320F28335学习总结与笔记（二）————ADC模块_dsp2833x_adc.c-程序员宅基地

文章浏览阅读1.2w次，点赞13次，收藏138次。F28335 ADC模块ADC转换模块A/D转换器（ADC）将模拟量转换为数字量通常要经过四个步骤：采样、保持、量化和编码。采样：将一个时间上连续变化的模拟量转化为时间上离散变化的模拟量。保持：将采样结果存储起来，直到下次采样，这个过程称作保持。一般，采样器和保持电路一起总称为采样保持电路。量化：将采样电平归化为与之接近的离散数字电平，这个过程称作量化。ADC关键指标分辨率：指数字量变化一个最小量时模拟信号的变化量，定义为满刻度与2^n的比值。分辨率又称为精度，通常以数字信号的位_dsp2833x_adc.c

V-rep学习笔记：机器人路径规划2-程序员宅基地

文章浏览阅读1.8k次。　　路径规划问题是机器人学研究的一个重要领域，它是指给定操作环境以及起始和目标的位置姿态，要求选择一条从起始点到目标点的路径，使运动物体(移动机器人或机械臂)能安全、无碰撞地通过所有的障碍物而达到目标位置。路径规划从研究对象上可分为关节式机械臂和移动机器人。一般来讲前者具有更多的自由度，而后者的作业范围要更大一些，这两类对象具有不同的特点，因此在研究方法上略有不同。在V-rep学习笔记：机器人路..._collision pairs

问题：U8的存货同步到本地时，报“数据库可能存在相同的编码”_数据库可能已经存在相同的编码等-程序员宅基地

文章浏览阅读1.5k次。1.环境：U8与本地某程序。跨服务器、跨数据库。2.问题：U8的存货同步到本地时，报“数据库可能存在相同的编码”。3.原因：在确认了U8程序正常、本地程序正常、U8数据库正常、本地数据库正常、链接服务器正常、触发器本身正常后，回到了问题的本身：为何原来的同步执行正常，但是现在的存货保存却异常，怀疑是最新的存货有问题。所以先停了触发器，然后用U8做了一个存货，正常保存后。启用触发器，直接用刚_数据库可能已经存在相同的编码等

EOS与ESD的区别_eos和esd的区别-程序员宅基地

文章浏览阅读7.9k次。摘要：什么是EOS？EOS与ESD的区别是什么？EOS为ELectrical Over Stress的缩写，指所有的过度电性应力。当外界电流或电压超过器件的最大规范条件时，器件性能会减弱甚至损坏。一、什么是EOS？EOS为ELectrical Over Stress的缩写，指所有的过度电性应力。当外界电流或电压超过器件的最大规范条件时，器件性能会减弱甚至损坏。EOS通常产生于：1.电源(AC/DC) 干扰、电源杂讯和过电压。2.由于测试程序切换（热切换）导致的瞬变电流..._eos和esd的区别