全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[搜索seo优化外包公司]微信小程序实现image图片自适应宽度

  本文主要和大家分享微信小程序实现image图片自适应宽度,希望能帮助到大家,首先我们先来了解一下image组件。

  一.了解image组件

  

  由于image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了。下面就来一起解决下

  
二.方法

  (一).使用mode◁…:widthFix

  widthFix▼■▲□:宽度不变,高度自动变化,保持原图宽高比不变。
首先我们先设置image的mode为widthFix◆○●,[搜索seo优化外包公司]然后给图片加一个固定rpx的宽度○◇•☆,比如:730rpx。邓州市小程序开发哪家好
这样图片也可以自适应了。□=-=。因为小程序的rpx本身就是一个自适应显示的单位

  
(二)▷▽.使用bindload绑定函数动态自适应。
我们可以给image绑定一个函数★•,这个函数,如上面的bindload说明一样,11 2020.10 [深圳专业做网站和SEO的公司]php 整除取整的方法总结 php整除取整的方法:1、使用intval方法,对变数转成整数型态;2、武穴市小程序开发哪家好使用round方法进行四舍五入;3、使用ceil方法向上取整;4、使用floor方法向下取整。 推荐:《PHP视频教程》 PHP取整数函。我们可以获取到原图的宽度和高度…=•▽。
然后计算他们的宽高比率。●◆▼。然后设置一个宽度大小(rpx),最后通过style动态设置image的宽高。代码如下:

 

  1..编写页面结构index.wxml●☆:

  

<image src="../uploads/2.jpg" bindload="imageLoad"▷▼•;
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx□■;"…△-;></image>

 

  2…■.设置数据index.js
 

  

//获取应用实例 
var app = getApp()
Page({
	data: {
		screenWidth: 0,
		screenHeight:0,
		imgwidth●▽-:0,
		imgheight◆△▼:0,
	},
	onLoad: function() {
		var _this = this☆☆;
		wx.getSystemInfo({
			success▽★: function(res) {
				_this.setData({
					screenHeight○○▽◆: res=…◆●.windowHeight•★■◁,
					screenWidth: res.windowWidth,
				});
			}
		});
	},
 	imageLoad: function(e) {
 		var _this=this•…;
		var $width=e□▲◁◁.detail.width, //获取图片真实宽度
		 $height=e.detail…▲▽.height,
		 ratio=$width/$height◆△☆; //图片的真实宽高比例
		var viewWidth=500, //设置图片显示宽度▷▪●,
 viewHeight=500/ratio•=; //计算的高度值 
		this.setData({
			imgwidth:viewWidth,
		 imgheight:viewHeight
		})
 	}
})

 

  
相关推荐--…△:

  10款image图片库实例汇总

  以上就是微信小程序实现image图片自适应宽度的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[搜索seo优化外包公司]微信小程序实现image图片自适应宽度

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。