# 微信小程序开发之-基本UI

广告

欢迎大家一起交流 QQ群 转战小程序 132762067 公众号

我是jpg

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

2. 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

广告

欢迎大家一起交流 QQ群 转战小程序 132762067 公众号

我是jpg