微信小程序如何获取图片宽度与高度

起源

最近在做A需求, 其中有个小功能点描述如下: 从配置端返回张图片, 期望宽度不变(750)、高度根据图片自适应.

我以为的

// 为便于讲解, 将css作为style属性绑定[实际不推荐]&& src的值先写死[后期改成接口返回的即可]
<view style="width:100%;">
 <image src="{{src}}"></image>
</view>

我一开始想到的就是: 设置内容区的width: 100%会自动占满屏幕宽度, 高度就会自适应.

实际效果: image占据空间为: 屏幕宽度 x 0

解决方案

核心: 解决如何获取图片的高度

初级方案

重点: 在图片加载完成后获取对应的图片信息.

经查小程序开发文档后发现, 有提供加载成功的回调, 如下:

演示Demo如下:

// wxml
<view style="width:100%;" >
 <image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" style="width:{{imageWidth}}px; height:{{imageHeight}}px"></image>
</view>

//js
Page({
 data: {
 imageHeight: 0,
 imageWidth: 0
 },
 loadSuccess(e){
 const { detail: {width, height} } = e
 this.setData({
  imageWidth: width,
  imageHeight:height
 })
 }
})

先来看看效果:

思考个问题:  假设我有100张图片都需要做自适应, 那么是不是多了很多繁琐的setData(), 同时也会导致性能问题.

进阶方案

经朋友提醒后发现, 小程序image还有个属性叫做mode, 可以去设置图片的裁剪&缩放等形式.

关于mode属性的取值可选项如下图:

话不多说, 我们看看实际效果如何:

// 750x110的图片
<view style="width:100%;" >
 <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></image>
</view>

// 750x480的图片
<view style="width:100%;" >
 <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></image>
</view>

看看750x110的效果图:

再看看750x480的效果图:

到了这里, 只需要把src的值改为接口返回的, 是不是就实现了宽度固定、高度自适应的需求了~

最后

该属性主要是为了实现图片的自适应、换个角度来讲, 主要是确保图片不失真。

到此这篇关于微信小程序如何获取图片宽度与高度的文章就介绍到这了,更多相关微信小程序获取图片宽高度内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序 动态的设置图片的高度和宽度详解及实例代码

    微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具

  • 微信小程序 图片宽度自适应的实现

     微信小程序 图片宽度自适应的实现 实例代码: wxml 代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="image&

  • 微信小程序 图片宽高自适应详解

    微信小程序 图片宽高自适应 1.以前将小程序图片宽度设置为屏幕宽度: imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth }) } 2.现在: .imgClass{ width: 100vw; } 解析: CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小 "vw"="view width"&qu

  • 微信小程序实现image组件图片自适应宽度比例显示的方法

    微信小程序实现image组件图片自适应宽度比例显示的方法

    本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法.分享给大家供大家参考,具体如下: 一. 了解image组件 由于image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了.下面就来一起解决下 二. 方法 (一).使用mode:widthFix widthFix:宽度不变,高度自动变化,保持原图宽高比不变. 首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx. 这样图片也可以自适应了..因为小程序的r

  • 微信小程序图片宽100%显示并且不变形

    微信小程序图片宽100%显示并且不变形

    微信小程序图片宽100%显示并且不变形 按照HTML习惯进行写,代码: <view class="meiti"> <image src="http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg" style="width:100%;"></image> </view> 效果如下: 很明显变形了 找到一篇关于微

  • 微信小程序实现富文本图片宽度自适应的方法

    微信小程序实现富文本图片宽度自适应的方法

    引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确 思路 把图片的宽度改为手机屏幕对应的宽度 微信小程序需要知道的知识 需要知道微信小程序里有自己的宽度标准,单位为rpx: 针对所有不同尺寸的浏览器,微信小程序里规定屏幕宽为750rpx: 解决 WXML <view class='html_detail'> <rich-text nodes='{{artical}}

  • 微信小程序如何获取图片宽度与高度

    微信小程序如何获取图片宽度与高度

    起源 最近在做A需求, 其中有个小功能点描述如下: 从配置端返回张图片, 期望宽度不变(750).高度根据图片自适应. 我以为的 // 为便于讲解, 将css作为style属性绑定[实际不推荐]&& src的值先写死[后期改成接口返回的即可] <view style="width:100%;"> <image src="{{src}}"></image> </view> 我一开始想到的就是: 设置内容区

  • 微信小程序之判断页面滚动方向的示例代码

    微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll. 2.获取页面实际高度 <!--WXML--> <view id="box"> <view class="list" wx:for="{{List}}" wx:key="List{{index}

  • 微信小程序之swiper轮播图中的图片自适应高度的方法

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度. 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}

  • 微信小程序中使元素占满整个屏幕高度实现方法

    微信小程序中使元素占满整个屏幕高度实现方法 在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值 但是显然通过js来进行的,

  • 微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

    微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

    本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="width:{{view.Width}}px;height:{{view.Height}}px;" >我是view标签,我现在的宽度是{{view.Width}}px,高度是{{view.Height}}px</view> <inpu

  • 微信小程序完美解决scroll-view高度自适应问题的方法

    第一种情况,scroll-view占据整屏 scroll-view { height: 100vh; } 第二种情况,scroll-view自适应页面剩余高度 xml文件 <view class="box"> <view class="box-head"></view> <scroll-view class="box-scroll"></scroll-view> </view>

  • 详解微信小程序开发之下拉刷新 上拉加载

    详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • 微信小程序自定义toast实现方法详解【附demo源码下载】

    本文实例讲述了微信小程序自定义toast实现方法.分享给大家供大家参考,具体如下: 一.微信官方默认toast toast最常见了,几乎每个App都有这样的特效,先看下小程序自带的toast效果,立马想死的心都有了~~ 微信自带toast的效果: js文件: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 用法超级简单,但官方小程序有几个问题: 只能显示success.loading两种icon 且icon不可去除 持

  • 微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

    微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo 利用swiper组件可简单快速编写仿抖音短视频的功能  自动播放当前页视频  翻页停止播放当前页视频 并自动播放下页视频 有其他需求也可用 cover-view 添加 收藏 点赞 评论等功能 效果图: video官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/video.html swiper官方介绍: https://developer

随机推荐