玩转微信小程序8:如何设置小程序中的图片?
最编程
2024-01-24 19:35:22
...
注释很详细,直接上代码
上一篇
新增内容:
1.图片的三种常见缩放形式
2.图片全屏预览
源码:
testImg.wxml
<!-- 默认状态,不保证缩放比,完全拉伸填满容器 -->
<image class="pic" mode="scaleToFill" src="/static/uploads/slide_1.jpg"></image>
<!-- 保证缩放比,完全显示长边 -->
<image class="pic" mode="aspectFit" src="/static/uploads/goods_1.jpg"></image>
<!-- 保证缩放比,完全显示短边 -->
<image class="pic" mode="aspectFill" src="/static/uploads/goods_2.jpg"></image>
<!-- 实现全屏预览 -->
<image class="picOverall" mode="aspectFit" src="/static/uploads/goods_1.jpg"></image>
testImg.wxss
.pic{
//页面横向总长度为750rpx
width: 300rpx;
height: 300rpx;
background-color: aqua;
}
.picOverall{
//高度设为100%以实现全图预览的效果
height: 100vh;
//长度占满屏幕长度
width: 750rpx;
background-color: palegoldenrod;
}
演示效果:
下一篇
推荐阅读
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
如何使用 PHP 实现微信小程序的报名系统?
-
Uniapp踩中的坑]--微信小程序转发&保存图片--base64流形式的图片转发和保存
-
golang]为微信小程序动态生成二维码的实践:golang 为小程序生成二维码图片,并通过 s3 协议上传到对象存储桶 | 腾讯云 cos
-
微信小程序 - 设置单个页面/导航栏/标签栏等的背景颜色。
-
如何解决 uniapp 开发中按需注入启用组件的问题 微信小程序 - 问题解决方案
-
微信小程序内拖动图片实现移动、缩放、旋转的方法
-
微信小程序中WXSS无法获取pages/card/card.wxss中的本地资源图片 - [渲染层网络层错误] - 解决方案
-
微信小程序开发学习笔记——3.5bindtap小程序中的事件触发
-
如何在微信小程序中实现计时倒数功能