uni-app 页面样式与布局

王杺勃 發表於 2021-3-16 17:07:00

<p>官方文档</p>
<p>https://uniapp.dcloud.io/frame?id=页面样式与布局</p>
<h2 id="rpx单位">rpx单位</h2>
<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>例</p>
<pre><code><template>
<view>
<view>
样式的学习
</view>
<view class="box1">
测试文字
<text>123</text>
</view>
<view class="iconfont icon-tupian"></view>
</view>
</template>

<script>
</script>

<style lang="scss">
.box1{
width: 375rpx;
height: 375rpx;
background: #0000FF;
font-size: 30rpx;
color: #fff;
}
</style>
</code></pre>
<p>自适应的效果</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621809-348840382.png" alt="image-20210316155310945" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621785-1801394227.png" alt="image-20210316155341515" loading="lazy"></p>
<p>可以明显的看到宽高自动变化</p>
<h2 id="import导入外联样式表"><code>@import</code>导入外联样式表</h2>
<p>使用<code>@import</code>语句可以导入外联样式表，<code>@import</code>后跟需要导入的外联样式表的相对路径，用<code>;</code>表示语句结束。</p>
<p>例：</p>
<p>创建一个<code>a.css</code>,内容如下</p>
<pre><code>view{
color: green;
}
</code></pre>
<p>页面中引入</p>
<pre><code>@import url("./a.css");
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621821-848351675.png" alt="image-20210316160009298" loading="lazy"></p>
<h2 id="选择器">选择器</h2>
<p>https://uniapp.dcloud.io/frame?id=选择器</p>
<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 style="text-align: left">.class</td>
<td style="text-align: left">.intro</td>
<td style="text-align: left">选择所有拥有 class="intro" 的组件</td>
</tr>
<tr>
<td style="text-align: left">#id</td>
<td style="text-align: left">#firstname</td>
<td style="text-align: left">选择拥有 id="firstname" 的组件</td>
</tr>
<tr>
<td style="text-align: left">element</td>
<td style="text-align: left">view</td>
<td style="text-align: left">选择所有 view 组件</td>
</tr>
<tr>
<td style="text-align: left">element, element</td>
<td style="text-align: left">view, checkbox</td>
<td style="text-align: left">选择所有文档的 view 组件和所有的 checkbox 组件</td>
</tr>
<tr>
<td style="text-align: left">::after</td>
<td style="text-align: left">view::after</td>
<td style="text-align: left">在 view 组件后边插入内容，<strong>仅微信小程序和App生效</strong></td>
</tr>
<tr>
<td style="text-align: left">::before</td>
<td style="text-align: left">view::before</td>
<td style="text-align: left">在 view 组件前边插入内容，<strong>仅微信小程序和App生效</strong></td>
</tr>
</tbody>
</table>
<p><strong>注意：</strong></p>
<ul>
<li>
<p>在 <code>uni-app</code> 中不能使用 <code>*</code> 选择器。</p>
</li>
<li>
<p>微信小程序自定义组件中仅支持 class 选择器</p>
</li>
<li>
<p><code>page</code> 相当于 <code>body</code> 节点，例如：</p>
<pre><code class="language-css">
page {
background-color:#ccc;
}
</code></pre>
</li>
</ul>
<h2 id="全局样式与局部样式">全局样式与局部样式</h2>
<p>https://uniapp.dcloud.io/frame?id=全局样式与局部样式</p>
<p>定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。</p>
<p><strong>注意：</strong></p>
<ul>
<li>App.vue 中通过 <code>@import</code> 语句可以导入外联样式，一样作用于每一个页面</li>
</ul>
<p>例：</p>
<p><code>app.vue</code>中写入样式</p>
<pre><code><script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>

<style>
/*每个页面公共css */
.box1{
background-color: pink;
}
</style>
</code></pre>
<p>页面局部样式</p>
<pre><code><template>
<view>
<view>
样式的学习
</view>
<view class="box1">
测试文字
<text>123</text>
</view>
<view class="iconfont icon-tupian"></view>
</view>
</template>

<script>
</script>

<style lang="scss">
@import url("./a.css");
/* .box1{
width: 375rpx;
height: 375rpx;
background: #0000FF;
font-size: 30rpx;
color: #fff;
} */
</style>
</code></pre>
<p>可以看到上面暂时把 box1的局部样式注释了，看看效果</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621805-285264221.png" alt="image-20210316161018175" loading="lazy"></p>
<p>将注释打开</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621796-1404712565.png" alt="image-20210316161049597" loading="lazy"></p>
<p>可以看到样式被覆盖了</p>
<h2 id="字体图标">字体图标</h2>
<p>https://uniapp.dcloud.io/frame?id=字体图标</p>
<p><code>uni-app</code> 支持使用字体图标，使用方式与普通 <code>web</code> 项目相同，需要注意以下几点：</p>
<ul>
<li>
<p>支持 base64 格式字体图标。</p>
</li>
<li>
<p>支持网络路径字体图标。</p>
</li>
<li>
<p>小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3编译模式起支持直接使用本地背景图和字体。</p>
</li>
<li>
<p>网络路径必须加协议头 <code>https</code>。</p>
</li>
<li>
<p>从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。</p>
</li>
<li>
<p>从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫iconfont，安装字体文件时可以看到），在nvue内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。</p>
</li>
<li>
<p>使用本地路径图标字体需注意：</p>
<ol>
<li>
<p>为方便开发者，在字体文件小于 40kb 时，<code>uni-app</code> 会自动将其转化为 base64 格式；</p>
</li>
<li>
<p>字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；</p>
</li>
<li>
<p>字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。</p>
<pre><code class="language-css"> @font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
</code></pre>
</li>
</ol>
</li>
</ul>
<h3 id="使用示例">使用示例</h3>
<h4 id="将字体图标复制到项目的static目录中">将字体图标复制到项目的<code>static</code>目录中</h4>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621798-458246514.png" alt="image-20210316163950962" loading="lazy"></p>
<h4 id="在appvue中引入在这里引入相当于全局引入">在<code>app.vue</code>中引入，在这里引入相当于全局引入</h4>
<pre><code>@import url("./static/fonts/iconfont.css");
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621786-660763160.png" alt="image-20210316164113742" loading="lazy"></p>
<h4 id="修改字体的引入路径要符合这个">修改字体的引入路径，要符合这个</h4>
<blockquote>
<p>字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。</p>
</blockquote>
<p>如</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621830-2081740776.png" alt="image-20210316164249233" loading="lazy"></p>
<h4 id="在页面中使用">在页面中使用</h4>
<p>例：</p>
<pre><code><view class="iconfont icon-tupian"></view>
</code></pre>
<p>完整页面</p>
<pre><code><template>
<view>
<view class="iconfont icon-tupian"></view>
</view>
</template>

<script>
</script>

<style>
</style>
</code></pre>
<h4 id="效果">效果</h4>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621811-843080772.png" alt="image-20210316164433303" loading="lazy"></p>
<h2 id="如何使用scss或者less">如何使用scss或者less</h2>
<p>scss使用文档：https://www.sass.hk/docs/</p>
<h3 id="hbuilderx的配置">HBuilderX的配置</h3>
<p>首先要确保，你安装了相关的编译插件如scss插件</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621775-249346323.png" alt="image-20210316165351858" loading="lazy"></p>
<h3 id="页面使用">页面使用</h3>
<p>在vue文件下的style标签添加lang="scss"属性即可使用</p>
<h3 id="例使用uniscss中的变量设置样式">例：使用<code>uni.scss</code>中的变量设置样式</h3>
<h4 id="在uniscss文件中加入变量">在<code>uni.scss</code>文件中加入变量</h4>
<pre><code>$global-color: red;
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621797-179505309.png" alt="image-20210316170208068" loading="lazy"></p>
<h4 id="style标签添加langscss属性">style标签添加lang="scss"属性</h4>
<pre><code><style lang="scss">
</code></pre>
<h4 id="页面使用-1">页面使用</h4>
<pre><code>background: $global-color;
</code></pre>
<p>完整的页面</p>
<pre><code><template>
<view>
<view>
样式的学习
</view>
<view class="box1">
测试文字
<text>123</text>
</view>
<view class="iconfont icon-tupian"></view>
</view>
</template>

<script>
</script>

<style lang="scss">
@import url("./a.css");
.box1{
width: 375rpx;
height: 375rpx;
background: $global-color;
font-size: 30rpx;
color: #fff;
text{
color: pink;
}
}
</style>
</code></pre>
<p>效果</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210316170621802-156230345.png" alt="image-20210316170438566" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/makalochen/p/14544606.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 页面样式与布局