uni-app内置基础组件
<p>官方文档：</p><p>概述</p>
<p>https://uniapp.dcloud.io/vue-components?id=uni-app内置基础组件</p>
<p>组件详情</p>
<p>https://uniapp.dcloud.io/component/README</p>
<ul>
<li><code>uni-app</code>为开发者提供了一系列基础组件，类似HTML里的基础标签元素。</li>
<li>但<code>uni-app</code>的组件与HTML不同，而是与小程序相同，更适合手机端使用。</li>
<li>虽然不推荐使用HTML标签，但实际上如果开发者写了<code>div</code>等标签，在编译到非H5平台时也会被编译器转换为<code>view</code>标签，类似的还有<code>span</code>转<code>text</code>、<code>a</code>转<code>navigator</code>等，包括<code>css</code>里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。</li>
<li>开发者可以通过组合这些基础组件进行快速开发。 基于内置的基础组件，可以开发各种扩展组件，组件规范与<code>vue</code>组件相同。</li>
</ul>
<h2 id="text">text</h2>
<p>https://uniapp.dcloud.io/component/text</p>
<p>文本组件。</p>
<p>用于包裹文本内容。</p>
<h3 id="属性说明"><strong>属性说明</strong></h3>
<table>
<thead>
<tr>
<th style="text-align: left">属性名</th>
<th style="text-align: left">类型</th>
<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">selectable</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">文本是否可选</td>
<td style="text-align: left">App、H5</td>
</tr>
<tr>
<td style="text-align: left">user-select</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">文本是否可选</td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">space</td>
<td style="text-align: left">String</td>
<td style="text-align: left"></td>
<td style="text-align: left">显示连续空格</td>
<td style="text-align: left">App、H5、微信小程序</td>
</tr>
<tr>
<td style="text-align: left">decode</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">是否解码</td>
<td style="text-align: left">App、H5、微信小程序</td>
</tr>
</tbody>
</table>
<h3 id="space-值说明"><strong>space 值说明</strong></h3>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">ensp</td>
<td style="text-align: left">中文字符空格一半大小</td>
</tr>
<tr>
<td style="text-align: left">emsp</td>
<td style="text-align: left">中文字符空格大小</td>
</tr>
<tr>
<td style="text-align: left">nbsp</td>
<td style="text-align: left">根据字体设置的空格大小</td>
</tr>
</tbody>
</table>
<h3 id="tips"><strong>Tips</strong></h3>
<ul>
<li>
<p><code><text></code> 组件内只支持嵌套 <code><text></code>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。</p>
</li>
<li>
<p>在app-nvue下，只有<code><text></code>才能包裹文本内容。无法在<code><view></code>组件包裹文本。</p>
</li>
<li>
<p>decode 可以解析的有</p>
<pre><code>&lt; //小于号或显示标记<
&gt; //大于号或显示标记>
&amp; //可用于显示其它特殊字符&
&apos; // 撇号'
&nbsp; //不断行的空白
&ensp; //半个空白位
&emsp; //一个空白位
</code></pre>
</li>
<li>
<p>各个操作系统的空格标准并不一致。</p>
</li>
<li>
<p>除了文本节点以外的其他节点都无法长按选中。</p>
</li>
<li>
<p>支持 <code>\n</code> 方式换行。</p>
</li>
<li>
<p>如果使用 <code><span></code> 组件编译时会被转换为 <code><text></code>。</p>
</li>
</ul>
<h3 id="示例">示例</h3>
<pre><code><template>
<view>
<view>
<text>唱歌吃饭喝奶</text>
</view>
<!-- 长按文本是否可选 App、H5 -->
<view>
<text selectable="true">唱歌吃饭喝奶selectable</text>
</view>
<!-- 长按文本是否可选 微信小程序 -->
<view>
<text user-select="true">唱歌吃饭喝奶user-select</text>
</view>
<!-- 显示连续空格的方式 -->
<view>
<view>
<text space='ensp'>来了 老弟</text>
</view>
<view>
<text space='emsp'>来了 老弟</text>
</view>
<view>
<text space='nbsp' style="font-size: 30px;">来了 老弟</text>
</view>
</view>
<!-- 是否解码 -->
<view>
<text decode='true'>&amp;</text>
</view>
</view>
</template>
<script>
</script>
<style>
</style>
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315175609397-1783271094.png" alt="image-20210315165904305" loading="lazy"></p>
<h2 id="view">view</h2>
<p>https://uniapp.dcloud.io/component/view</p>
<p>视图容器。</p>
<p>它类似于传统html中的div，用于包裹各种元素内容。</p>
<p>如果使用nvue，则需注意，包裹文字应该使用组件。</p>
<h3 id="属性说明-1"><strong>属性说明</strong></h3>
<table>
<thead>
<tr>
<th style="text-align: left">属性名</th>
<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">hover-class</td>
<td style="text-align: left">String</td>
<td style="text-align: left">none</td>
<td style="text-align: left">指定按下去的样式类。当 hover-class="none" 时，没有点击态效果</td>
</tr>
<tr>
<td style="text-align: left">hover-stop-propagation</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">指定是否阻止本节点的祖先节点出现点击态</td>
</tr>
<tr>
<td style="text-align: left">hover-start-time</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">50</td>
<td style="text-align: left">按住后多久出现点击态，单位毫秒</td>
</tr>
<tr>
<td style="text-align: left">hover-stay-time</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">400</td>
<td style="text-align: left">手指松开后点击态保留时间，单位毫秒</td>
</tr>
</tbody>
</table>
<h3 id="示例-1">示例</h3>
<pre><code><template>
<view class="box2" hover-class="box2_active">
<view class='box1' hover-class='box-active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
我是一个盒子
</view>
</view>
</template>
<script>
</script>
<style>
.box1 {
width: 100px;
height: 100px;
background: green;
}
.box2 {
width: 200px;
height: 200px;
background: blue;
}
.box-active {
background: red;
}
.box2-active {
background: pink;
}
</style>
</code></pre>
<p>初始状态</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315175609345-1197776673.png" alt="image-20210315172817890" loading="lazy"></p>
<p>点击状态</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315175609361-428711733.png" alt="image-20210315172835331" loading="lazy"></p>
<p>松开状态</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315175609347-172807264.png" alt="image-20210315172817890" loading="lazy"></p>
<h2 id="button">button</h2>
<p>https://uniapp.dcloud.io/component/button?id=button</p>
<p>按钮。</p>
<h3 id="属性说明-2"><strong>属性说明</strong></h3>
<table>
<thead>
<tr>
<th style="text-align: left">属性名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<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">size</td>
<td style="text-align: left">String</td>
<td style="text-align: left">default</td>
<td style="text-align: left">按钮的大小</td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">type</td>
<td style="text-align: left">String</td>
<td style="text-align: left">default</td>
<td style="text-align: left">按钮的样式类型</td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">plain</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">按钮是否镂空，背景色透明</td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">disabled</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">是否禁用</td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">loading</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">名称前是否带 loading 图标</td>
<td style="text-align: left"></td>
<td style="text-align: left">App-nvue 平台，在 ios 上为雪花，Android上为圆圈</td>
</tr>
<tr>
<td style="text-align: left">form-type</td>
<td style="text-align: left">String</td>
<td style="text-align: left"></td>
<td style="text-align: left">用于 <code><form></code> 组件，点击分别会触发 <code><form></code> 组件的 submit/reset 事件</td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">open-type</td>
<td style="text-align: left">String</td>
<td style="text-align: left"></td>
<td style="text-align: left">开放能力</td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">hover-class</td>
<td style="text-align: left">String</td>
<td style="text-align: left">button-hover</td>
<td style="text-align: left">指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果</td>
<td style="text-align: left"></td>
<td style="text-align: left">App-nvue 平台暂不支持</td>
</tr>
<tr>
<td style="text-align: left">hover-start-time</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">20</td>
<td style="text-align: left">按住后多久出现点击态，单位毫秒</td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">hover-stay-time</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">70</td>
<td style="text-align: left">手指松开后点击态保留时间，单位毫秒</td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">app-parameter</td>
<td style="text-align: left">String</td>
<td style="text-align: left"></td>
<td style="text-align: left">打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效</td>
<td style="text-align: left"></td>
<td style="text-align: left">微信小程序、QQ小程序</td>
</tr>
<tr>
<td style="text-align: left">hover-stop-propagation</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">指定是否阻止本节点的祖先节点出现点击态</td>
<td style="text-align: left"></td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">lang</td>
<td style="text-align: left">string</td>
<td style="text-align: left">'en'</td>
<td style="text-align: left">指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。</td>
<td style="text-align: left"></td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">session-from</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">会话来源，open-type="contact"时有效</td>
<td style="text-align: left"></td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">send-message-title</td>
<td style="text-align: left">string</td>
<td style="text-align: left">当前标题</td>
<td style="text-align: left">会话内消息卡片标题，open-type="contact"时有效</td>
<td style="text-align: left"></td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">send-message-path</td>
<td style="text-align: left">string</td>
<td style="text-align: left">当前分享路径</td>
<td style="text-align: left">会话内消息卡片点击跳转小程序路径，open-type="contact"时有效</td>
<td style="text-align: left"></td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">send-message-img</td>
<td style="text-align: left">string</td>
<td style="text-align: left">截图</td>
<td style="text-align: left">会话内消息卡片图片，open-type="contact"时有效</td>
<td style="text-align: left"></td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">show-message-card</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效</td>
<td style="text-align: left"></td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">@getphonenumber</td>
<td style="text-align: left">Handler</td>
<td style="text-align: left"></td>
<td style="text-align: left">获取用户手机号回调</td>
<td style="text-align: left">open-type="getPhoneNumber"</td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">@getuserinfo</td>
<td style="text-align: left">Handler</td>
<td style="text-align: left"></td>
<td style="text-align: left">用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo</td>
<td style="text-align: left">open-type="getUserInfo"</td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">@error</td>
<td style="text-align: left">Handler</td>
<td style="text-align: left"></td>
<td style="text-align: left">当使用开放能力时，发生错误的回调</td>
<td style="text-align: left">open-type="launchApp"</td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">@opensetting</td>
<td style="text-align: left">Handler</td>
<td style="text-align: left"></td>
<td style="text-align: left">在打开授权设置页并关闭后回调</td>
<td style="text-align: left">open-type="openSetting"</td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">@launchapp</td>
<td style="text-align: left">Handler</td>
<td style="text-align: left"></td>
<td style="text-align: left">从小程序打开 App 成功的回调</td>
<td style="text-align: left">open-type="launchApp"</td>
<td style="text-align: left">微信小程序</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>注1：<code>button-hover</code> 默认为 <code>{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}</code></strong></li>
<li><code>open-type="launchApp"</code>时需要调起的APP接入微信OpenSDK详见</li>
</ul>
<h3 id="size-有效值"><strong>size 有效值</strong></h3>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">default</td>
<td style="text-align: left">默认大小</td>
</tr>
<tr>
<td style="text-align: left">mini</td>
<td style="text-align: left">小尺寸</td>
</tr>
</tbody>
</table>
<h3 id="type-有效值"><strong>type 有效值</strong></h3>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">primary</td>
<td style="text-align: left">微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式</td>
</tr>
<tr>
<td style="text-align: left">default</td>
<td style="text-align: left">白色</td>
</tr>
<tr>
<td style="text-align: left">warn</td>
<td style="text-align: left">红色</td>
</tr>
</tbody>
</table>
<h3 id="form-type-有效值"><strong>form-type 有效值</strong></h3>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">submit</td>
<td style="text-align: left">提交表单</td>
</tr>
<tr>
<td style="text-align: left">reset</td>
<td style="text-align: left">重置表单</td>
</tr>
</tbody>
</table>
<h3 id="open-type-有效值"><strong>open-type 有效值</strong></h3>
<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">feedback</td>
<td style="text-align: left">打开“意见反馈”页面，用户可提交反馈内容并上传日志</td>
<td style="text-align: left">App、微信小程序、QQ小程序</td>
</tr>
<tr>
<td style="text-align: left">share</td>
<td style="text-align: left">触发用户转发</td>
<td style="text-align: left">微信小程序、百度小程序、支付宝小程序、字节跳动小程序、QQ小程序</td>
</tr>
<tr>
<td style="text-align: left">getUserInfo</td>
<td style="text-align: left">获取用户信息，可以从@getuserinfo回调中获取到用户信息，包括头像、昵称等信息</td>
<td style="text-align: left">微信小程序、百度小程序、QQ小程序</td>
</tr>
<tr>
<td style="text-align: left">contact</td>
<td style="text-align: left">打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息</td>
<td style="text-align: left">微信小程序、百度小程序</td>
</tr>
<tr>
<td style="text-align: left">getPhoneNumber</td>
<td style="text-align: left">获取用户手机号，可以从@getphonenumber回调中获取到用户信息</td>
<td style="text-align: left">微信小程序、百度小程序、字节跳动小程序、支付宝小程序</td>
</tr>
<tr>
<td style="text-align: left">launchApp</td>
<td style="text-align: left">小程序中打开APP，可以通过app-parameter属性设定向APP传的参数</td>
<td style="text-align: left">微信小程序、QQ小程序</td>
</tr>
<tr>
<td style="text-align: left">openSetting</td>
<td style="text-align: left">打开授权设置页</td>
<td style="text-align: left">微信小程序、百度小程序</td>
</tr>
<tr>
<td style="text-align: left">getAuthorize</td>
<td style="text-align: left">支持小程序授权</td>
<td style="text-align: left">支付宝小程序</td>
</tr>
<tr>
<td style="text-align: left">contactShare</td>
<td style="text-align: left">分享到通讯录好友</td>
<td style="text-align: left">支付宝小程序</td>
</tr>
<tr>
<td style="text-align: left">lifestyle</td>
<td style="text-align: left">关注生活号</td>
<td style="text-align: left">支付宝小程序</td>
</tr>
<tr>
<td style="text-align: left">openGroupProfile</td>
<td style="text-align: left">呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest中必须配置groupIdList</td>
<td style="text-align: left">QQ小程序基础库1.4.7版本+</td>
</tr>
</tbody>
</table>
<h3 id="示例-2">示例</h3>
<pre><code><template>
<view>
<button>按钮</button>
<button size="mini">按钮</button>
<button type="primary">按钮</button>
<button type="primary" plain>按钮</button>
<button type="primary" disabled>按钮</button>
</view>
</template>
<script>
</script>
<style>
</style>
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315175609367-172627639.png" alt="image-20210315174705216" loading="lazy"></p>
<h2 id="image">image</h2>
<p>https://uniapp.dcloud.io/component/image?id=image</p>
<p>图片。</p>
<h3 id="属性说明-3">属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align: left">属性名</th>
<th style="text-align: left">类型</th>
<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">src</td>
<td style="text-align: left">String</td>
<td style="text-align: left"></td>
<td style="text-align: left">图片资源地址</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">mode</td>
<td style="text-align: left">String</td>
<td style="text-align: left">'scaleToFill'</td>
<td style="text-align: left">图片裁剪、缩放的模式</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">lazy-load</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">图片懒加载。只针对page与scroll-view下的image有效</td>
<td style="text-align: left">微信小程序、App、百度小程序、字节跳动小程序</td>
</tr>
<tr>
<td style="text-align: left">fade-show</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">true</td>
<td style="text-align: left">图片显示动画效果</td>
<td style="text-align: left">仅App-nvue 2.3.4+ Android有效</td>
</tr>
<tr>
<td style="text-align: left">webp</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">默认不解析 webP 格式，只支持网络资源</td>
<td style="text-align: left">微信小程序2.9.0</td>
</tr>
<tr>
<td style="text-align: left">show-menu-by-longpress</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">开启长按图片显示识别小程序码菜单</td>
<td style="text-align: left">微信小程序2.7.0</td>
</tr>
<tr>
<td style="text-align: left">draggable</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">true</td>
<td style="text-align: left">鼠标长按是否能拖动图片</td>
<td style="text-align: left">仅 H5 平台 3.1.1+ 有效</td>
</tr>
<tr>
<td style="text-align: left">@error</td>
<td style="text-align: left">HandleEvent</td>
<td style="text-align: left"></td>
<td style="text-align: left">当错误发生时，发布到 AppService 的事件名，事件对象event.detail =</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">@load</td>
<td style="text-align: left">HandleEvent</td>
<td style="text-align: left"></td>
<td style="text-align: left">当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail =</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<h3 id="tips-1"><strong>Tips</strong></h3>
<ul>
<li><code><image></code> 组件默认宽度 300px、高度 225px；<code>app-nvue平台，暂时默认为屏幕宽度</code></li>
<li><code>src</code> 仅支持相对路径、绝对路径，支持 base64 码；</li>
<li>页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 <code>image{will-change: transform}</code> ,可优化此问题。</li>
<li>自定义组件里面使用 <code><image></code>时，若 <code>src</code> 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。</li>
<li>webp格式的图片在Android上是内置支持的。iOS上不同平台不一样，具体如下：app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，iOS支持。</li>
<li>svg 格式的图片在不同的平台支持情况不同。具体为：app-nvue 不支持 svg 格式的图片，小程序上只支持网络地址。</li>
</ul>
<h3 id="mode-有效值"><strong>mode 有效值：</strong></h3>
<p>mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。</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">缩放</td>
<td style="text-align: left">scaleToFill</td>
<td style="text-align: left">不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</td>
</tr>
<tr>
<td style="text-align: left">缩放</td>
<td style="text-align: left">aspectFit</td>
<td style="text-align: left">保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。</td>
</tr>
<tr>
<td style="text-align: left">缩放</td>
<td style="text-align: left">aspectFill</td>
<td style="text-align: left">保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。</td>
</tr>
<tr>
<td style="text-align: left">缩放</td>
<td style="text-align: left">widthFix</td>
<td style="text-align: left">宽度不变，高度自动变化，保持原图宽高比不变</td>
</tr>
<tr>
<td style="text-align: left">缩放</td>
<td style="text-align: left">heightFix</td>
<td style="text-align: left">高度不变，宽度自动变化，保持原图宽高比不变 <strong>App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3</strong></td>
</tr>
<tr>
<td style="text-align: left">裁剪</td>
<td style="text-align: left">top</td>
<td style="text-align: left">不缩放图片，只显示图片的顶部区域</td>
</tr>
<tr>
<td style="text-align: left">裁剪</td>
<td style="text-align: left">bottom</td>
<td style="text-align: left">不缩放图片，只显示图片的底部区域</td>
</tr>
<tr>
<td style="text-align: left">裁剪</td>
<td style="text-align: left">center</td>
<td style="text-align: left">不缩放图片，只显示图片的中间区域</td>
</tr>
<tr>
<td style="text-align: left">裁剪</td>
<td style="text-align: left">left</td>
<td style="text-align: left">不缩放图片，只显示图片的左边区域</td>
</tr>
<tr>
<td style="text-align: left">裁剪</td>
<td style="text-align: left">right</td>
<td style="text-align: left">不缩放图片，只显示图片的右边区域</td>
</tr>
<tr>
<td style="text-align: left">裁剪</td>
<td style="text-align: left">top left</td>
<td style="text-align: left">不缩放图片，只显示图片的左上边区域</td>
</tr>
<tr>
<td style="text-align: left">裁剪</td>
<td style="text-align: left">top right</td>
<td style="text-align: left">不缩放图片，只显示图片的右上边区域</td>
</tr>
<tr>
<td style="text-align: left">裁剪</td>
<td style="text-align: left">bottom left</td>
<td style="text-align: left">不缩放图片，只显示图片的左下边区域</td>
</tr>
<tr>
<td style="text-align: left">裁剪</td>
<td style="text-align: left">bottom right</td>
<td style="text-align: left">不缩放图片，只显示图片的右下边区域</td>
</tr>
</tbody>
</table>
<h3 id="示例-3">示例</h3>
<pre><code><template>
<view>
<image src="/static/img/avatar.gif"></image>
<image src="/static/img/avatar.gif" mode="aspectFit"></image>
<image src="/static/img/avatar.gif" mode="aspectFill"></image>
</view>
</template>
<script>
</script>
<style>
</style>
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315175609507-981436513.png" alt="image-20210315175514949" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/makalochen/p/14539103.html
頁:
[1]