# 微信小程序开发之-基本UI
# 微信小程序开发之-基本UI
GuangdongQi
发布于 2018-05-24 17:50:35
发布于 2018-05-24 17:50:35
1.view 属性如下：
image.png
wxml
<view class="jx_card" id="tapTest">
</view> wxss
.jx_card{
width: 100%;
height: 250rpx;
background-color:#f3f3f3;
position: relative
}调试面板
image.png
- image
属性：
image.png
image组件默认宽度300px、高度225px
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
image.png
image.png
具体样式可查看 官方文档
- 展示本地图片（类似于
[UIImage imageNamed:icon_imageName]）
<image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill">
</image> - 展示网络图片
<image class="jxlogo" src="http://otoxzxreo.bkt.clouddn.com/icon_home_nearby.png"/>
</image> 还可以调用js中得url连接
<image class="image_frame" src="{{imageUrl}}" mode="aspectFill">
</image> js中数据
data:{
imageUrl:"http://otoxzxreo.bkt.clouddn.com/icon_home_nearby.png""
}, 调试面板
image.png
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.07.27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录