微信小程序-动态设置图片的高度

1.在index.wxml文件中：给图片绑定一个图片加载完成的方法：
<image bindload=“onImageLoad” class=“img” src="{{data.img}}">
2.index.js文件中实现onImageLoad方法动态获取图片的高度
methods: {
onImageLoad:function (event) {
const {height,width}=event.detail
this.setData({
w:340,
h:height/width*340
})
}
}
3.在index.wxml中给image控件设置style属性：
<image bindload=“onImageLoad” style=“width: {{w}}rpx;height: {{h}}rpx” class=“img” src="{{data.img}}">

微信小程序-动态设置图片的高度相关推荐

微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序--动态设置导航栏颜色
微信小程序--动态设置导航栏颜色既然要动态设置导航栏颜色,估计自定义导航栏也跑不了关于动态设置导航栏颜色,微信小程序官方文档给出了一个API: wx.setNavigationBarColor ...
微信小程序动态计算图片大小
微信小程序动态计算图片大小方法一使用图片的mode属性手动计算给图片绑定事件bind:load,回调函数名为onImgLoad 编写回调函数,width为340是图片容器的宽度 method ...
微信小程序动态设置 tabBar
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 使用微信提供的API wx.setTabBarItem(Object object) 动态设置 tabBar ...
[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言 navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景:比如说商城,商品详情页面的标题,会根据获取到的数据动态修改 ...
微信小程序动态设置背景
wx.setBackgroundColor(Object object) 支持版本 >= 2.1.0 动态设置窗口的背景色 wx.setBackgroundColor({backgroundCo ...
微信小程序动态修改图片并将图片实时更新
适用范围:在处理含有多张图片上传/修改时如图:在数组中存在object类型的图片,我目标是进行修改ChapPicture[i].ChapPicture的值(动态绑定) 因此i是变量,需要从前端拿值: ...
微信小程序 - 动态背景图片实现
很简单-就两步 wxml(遍历style的background-image路径即可) wxss(.ab)
微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...

微信小程序-动态设置图片的高度

微信小程序-动态设置图片的高度相关推荐

最新文章

热门文章