专栏首页Guangdong Qi# 微信小程序开发之-基本UI

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React Native 系列(九) -- Tab标签组件

    Scott_Mr
  • 我是怎样在微信小游戏-跳一跳上得分上万的JumpJump成果跳一跳思路源码使用方法

    iOSDevLog
  • 小程序 - 效果处理之技巧合集(更新中...)

    xing.org1^
  • 升级xcode7.0 第三方库不能用的解决方法(bitcode是什么鬼?)

    王大锤
  • 用Kotlin破解Android版微信小游戏-跳一跳成果跳一跳思路源码使用方法参考来源Android 插件 免PC

    iOSDevLog
  • [海豚区块链] 中本聪大战美联储,这下有好戏看了

    这是纽约证券交易所主席jeffrey Sprecher不久前的言论。是啊,美联储作为世界上第一大经济体的央行,在世界经济体系中有着呼风唤雨的作用。现在却被一个自...

    海豚区块链
  • 小程序日志监控工具

    今天一个活动要写个H5,明天一个功能要用小程序,天天都在写bug。用户反馈小程序用起来有问题还特么还不知道到底出了啥bug,反馈多了,老板要扣工资了!看来挖了太...

    Fundebug
  • 「知识」语音搜索将是SEO新的挑战与机遇

    黄伟SEO
  • 「动图」SEO必知负面case网页广告说明

    黄伟SEO
  • 海豚扒问IPFS中国区布道人董天一:IPFS为什么可以超越HTTP

    亲爱的粉丝们,今天又到了【海豚扒问】的深扒时间啦。萌主我一直很感谢大家一路对海豚区块链全新推出的【海豚扒问】栏目的支持,这一次我们请来最重量的嘉宾,他是谁?他为...

    海豚区块链

扫码关注云+社区

领取腾讯云代金券