8
收藏
评论

【小程序学习记录】- image组件

【小程序学习记录】—image组件

前言


不知不觉到第四篇了,回看前面几篇写的好像没有一点深度,总感觉自己是厚着脸皮在写,但是再想想自己也不是要写多么好,给多少人看,其实就是自己学习的一个总结,巩固自己的知识。顺便如果可以帮到一些同学那就更好,这就是我的初衷啊!所以我还会继续,今天就要讲讲 <image> 组件了。


<image>的作用


我好像很喜欢拿HTML里面的标签来做对比,🆗,可能已经猜到我要说什么了,没错其实<image>标签对应的就是HTML里的<img>标签嘛!它们的功能和作用基本没什么变化,都是在页面上显示一张图片。但是也有一些不同,那就是<image>的功能更加的强大,微信小程序提供了很多的属性给它,赋予了它很强的功能,比如:懒加载、图片缩放、裁剪等。详情见 文档


如何使用


这里强调的是wxml里面所有的标签  都是两两成对的,有开始标签就要有闭合标签,不然会报错的, (ps:除了<icon>)所以正确用法是这样的<image src= “图片路径”></image>,图片的路径,可以是相对路径也可以是绝对路径,看一段代码


wxml代码


<image src='https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png' ></image>


运行结果



这里还是贴个图吧!因为有个对比好明白一点,😂。欧克,可以看到<image>是有默认宽高的!默认的宽度为300px、高度为225px 我们肯定是不能用默认的宽高的,因为我们需要的是一个美观的界面,所以…


高度自适应


<image>的高度自适应很简单就可以实现,因为只需要用到它的一个mode属性就可以完成这件事,这个属性有很多的值,而用到最多的就是mode=“widthFix”,这就是高度自适应了,来和上面对比一下吧


wxml代码


<image src='https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png' mode="widthFix"></image>


运行结果



可以看到高度的明显变化,自适应是很有用的一个东西,其他的一些属性,可以看看文档,文档很详细,文章的上面有个传送门。当然只靠着肯定是不够的,还需要借助WXSS改变image的样式,使你的页面更加美观。


结束语


欢迎评论,也欢迎大佬提出意见。


最后一次编辑于  08-04  (未经腾讯允许,不得转载)
复制链接赞 8收藏投诉评论

7 个评论

  • 不想动
    不想动
    03-19

    加油哦

    03-19
    赞同
    回复 1
    • Killer Irving
      Killer Irving
      03-19

      谢谢

      03-19
      回复
  • 七彩服饰定制
    七彩服饰定制
    03-20

    您好大师,方便加个微信吗

    03-20
    赞同
    回复 4
    • Killer Irving
      Killer Irving
      03-20

      不敢!现在我还是个弟弟哈!大佬社区月突出贡献者栏哟

      03-20
      回复
    • Killer Irving
      Killer Irving
      03-20

      如果觉得文章对你有帮助的话,欢迎关注我的这个系列文章哦!

      03-20
      1
      回复
    • 七彩服饰定制
      七彩服饰定制
      03-20

      我是想和您谈一下其他事,这里不方便说

      03-20
      回复
    • I-S
      I-S
      03-27

      大师偶遇贵人?(紫色滑稽)。。。

      03-27
      回复