微信小程序媒体组件image组件详解(裁剪模式)

 时间:2024-10-22 15:29:29

1、先百度搜索查看 image 图片组件的官方文档,其比较常用的属性有 src (图片资源地址,支持本地图片),mode(图片显示模式,包括裁剪和缩放)等。

微信小程序媒体组件image组件详解(裁剪模式)

2、在工程根目录中新建一个子目录 resources , 其下再创建 images 子目录,并拷贝一张图片,用于后面的演示。

微信小程序媒体组件image组件详解(裁剪模式)

3、在 wxml 中通过 <image> 标签创建图片显示组件,设置其 src 属性(本地路径)和 mode 属性,裁剪模式不泞枵脚蟥裁剪图片,只会根据模式显示部分图片:1. top:不裁剪图片,只显示图片上部内容;2. bottom:不裁剪图片,只显示图片底部内容;3. center:不裁剪图片,只显示图片中部内容;4. right:不裁剪图片,只显示图片右部内容;5. left: 不裁剪图片,只显示图片左部内容;

微信小程序媒体组件image组件详解(裁剪模式)

4、在小程序工程 wxss 文件中声明上述 wxml 文件中使用的样式定义。

微信小程序媒体组件image组件详解(裁剪模式)

5、保存编译后,在模拟器中可以查看所有图片的显示效果,符合预期,所有图片都没有发生缩放,只是根据模式显示了部分图片。

微信小程序媒体组件image组件详解(裁剪模式)
  • 如何谈一场不分手的恋爱
  • 怎么手动升级更新ubuntu系统到最新版
  • 生死狙击蜘蛛女王怎么打
  • stp如何提供无环网络
  • 金铲铲之战小小英雄李青怎么获得
  • 热门搜索
    背上长痘痘怎么治疗 下巴长痘是怎么回事 送结婚红包怎么写 伊莱克斯空调怎么样 微商怎么加人 阿司匹林肠溶片怎么样 炖鱼怎么做 西南科技大学怎么样 公式编辑器怎么用 ck手表怎么样