首页 › uni-app论坛 › uni-app选择器

崔敏 發表於 2021-8-30 20:25:00

uni-app选择器

<h2 id="页面样式与布局">页面样式与布局</h2>
<p>uni-app的css与web的css基本一致。本文没有讲解css的用法。在你了解web的css的基础之上，本文讲述一些样式相关的注意事项。</p>
<p>uni-app有vue页面和nvue页面。vue页面是webview渲染的、app端的nvue页面是原生渲染的。在nvue页面里样式比web会限制更多，</p>
<p>本文重点介绍vue页面的样式注意事项。</p>
<h3 id="尺寸单位">尺寸单位</h3>
<p><code>uni-app</code> 支持的通用 css 单位包括 px、rpx</p>
<ul>
<li>px 即屏幕像素</li>
<li>rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx计算配置 。</li>
</ul>
<p>vue页面支持下面这些普通H5单位，但在nvue里不支持：</p>
<ul>
<li>rem 根字体大小可以通过 page-meta 配置</li>
<li>vh viewpoint height，视窗高度，1vh等于视窗高度的1%</li>
<li>vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%</li>
</ul>
<p>nvue还不支持百分比单位。</p>
<p>App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。<strong>注意此时不支持 rpx</strong></p>
<p>nvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：</p>
<ul>
<li>px:，以750宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）</li>
<li>wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同</li>
</ul>
<p>下面对 <code>rpx</code> 详细说明：</p>
<p>设计师在提供设计图时，一般只提供一个分辨率的图。</p>
<p>严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。</p>
<p>而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。</p>
<p>微信小程序设计了 rpx 解决这个问题。<code>uni-app</code> 在 App 端、H5 端都支持了 <code>rpx</code>，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx计算配置。</p>
<p>rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。<code>uni-app</code> 规定屏幕基准宽度 750rpx。</p>
<p>开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：</p>
<p><code>设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx</code></p>
<p>换言之，页面元素宽度在 <code>uni-app</code> 中的宽度计算公式：</p>
<p><code>750 * 元素在设计稿中的宽度 / 设计稿基准宽度</code></p>
<p><strong>举例说明：</strong></p>
<ol>
<li>若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 <code>uni-app</code> 里面的宽度应该设为：<code>750 * 100 / 750</code>，结果为：100rpx。</li>
<li>若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 <code>uni-app</code> 里面的宽度应该设为：<code>750 * 100 / 640</code>，结果为：117rpx。</li>
<li>若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 <code>uni-app</code> 里面的宽度应该设为：<code>750 * 200 / 375</code>，结果为：400rpx。</li>
</ol>
<p><strong>Tips</strong></p>
<ul>
<li>注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。</li>
<li>如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。</li>
<li>rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向</li>
<li>设计师可以用 iPhone6 作为视觉稿的标准。</li>
<li>如果设计稿不是750px，HBuilderX提供了自动换算的工具，详见：https://ask.dcloud.net.cn/article/35445。</li>
<li>App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。</li>
<li>早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了，详见</li>
</ul>
<h3 id="样式导入">样式导入</h3>
<p>使用<code>@import</code>语句可以导入外联样式表，<code>@import</code>后跟需要导入的外联样式表的相对路径，用<code>;</code>表示语句结束。</p>
<p><strong>示例代码：</strong></p>
<div class="cnblogs_code">
<pre>&lt;style&gt;<span style="color: rgba(0, 0, 0, 1)">
    @import </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">../../common/uni.css</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">;

    .uni</span>-<span style="color: rgba(0, 0, 0, 1)">card {
      box</span>-<span style="color: rgba(0, 0, 0, 1)">shadow: none;
    }
</span>&lt;/style&gt;</pre>
</div>
<p>&nbsp;</p>
<h3 id="内联样式">内联样式</h3>
<p>框架组件上支持使用 style、class 属性来控制组件的样式。</p>
<ul>
<li>style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<div class="cnblogs_code">
<pre>&lt;view :style=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">{color:color}</span><span style="color: rgba(128, 0, 0, 1)">"</span> /&gt;</pre>
</div>
<p>&nbsp;</p>
</li>
<li>class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<div class="cnblogs_code">
<pre>&lt;view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">normal_view</span><span style="color: rgba(128, 0, 0, 1)">"</span> /&gt;</pre>
</div>
<p>&nbsp;</p>
</li>
</ul>
<h3 id="选择器">选择器</h3>
<p>目前支持的选择器有：</p>
<table>
<thead>
<tr><th style="text-align: left">选择器</th><th style="text-align: left">样例</th><th style="text-align: left">样例描述</th></tr>
</thead>
<tbody>
<tr>
<td>.class</td>
<td>.intro</td>
<td>选择所有拥有 class="intro" 的组件</td>
</tr>
<tr>
<td>#id</td>
<td>#firstname</td>
<td>选择拥有 id="firstname" 的组件</td>
</tr>
<tr>
<td>element</td>
<td>view</td>
<td>选择所有 view 组件</td>
</tr>
<tr>
<td>element, element</td>
<td>view, checkbox</td>
<td>选择所有文档的 view 组件和所有的 checkbox 组件</td>
</tr>
<tr>
<td>::after</td>
<td>view::after</td>
<td>在 view 组件后边插入内容，<strong>仅 vue 页面生效</strong></td>
</tr>
<tr>
<td>::before</td>
<td>view::before</td>
<td>在 view 组件前边插入内容，<strong>仅 vue 页面生效</strong></td>
</tr>
</tbody>
</table>
<p><strong>注意：</strong></p>
<p>&nbsp;</p>
<ul>
<li>在 <code>uni-app</code> 中不能使用 <code>*</code> 选择器。</li>
<li>微信小程序自定义组件中仅支持 class 选择器</li>
<li>
<p><code>page</code> 相当于 <code>body</code> 节点，例如：</p>
<div class="cnblogs_code">
<pre>&lt;!-- 设置页面背景颜色，使用 scoped 会导致失效 --&gt;<span style="color: rgba(0, 0, 0, 1)">
page {
background</span>-<span style="color: rgba(0, 0, 0, 1)">color:#ccc;
}</span></pre>
</div>
<p>&nbsp;</p>
</li>
</ul>
<div>
<div>
<h4>express</h4>
<p>基于Nodejs Web 的开发框架（老框架了 目前无人维护）</p>
<p>其他框架：Koa、egg</p>
<h4>express快速入门</h4>
<p>1.创建一个空的文件夹，作为项目</p>
<p>2.初始化这个项目 npm init -y （生成版本库）</p>
<p>3.安装项目的依赖模块 npm install --save express</p>
<p>4.git管理</p>
<div class="_2Uzcx_">&nbsp;</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/wenkangIT/p/15207649.html

查看完整版本: uni-app选择器