swiper小程序轮播图片自适应

思路:
	1.获得屏幕宽度
	2.获得图片宽度和高度
	3.进行比例换算,给swiper高度,图片给widthFix model即可
------------------------------------------------------
代码如下:
	1.app.js中获取屏幕尺寸:
		onLaunch: function () {
			  wx.getSystemInfo({
				success: function (res) {
					console.log(res.windowWidth)
					console.log(res.windowHeight)
					// 进行保存屏幕的高度和宽度
					wx.setStorageSync('phoneattr', res)
					
				}
			  })
		},
	2.index.js中,获取图片尺寸,并作出相应的比例换算:
		Page({
			data: {
				movies: [
					{ url: 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/af23a2a898acc57e15cdeee31145d59a_259_194.jpg' },
					{ url: 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/af23a2a898acc57e15cdeee31145d59a_259_194.jpg' },
				] ,  
			},
			onLoad: function (options) {
				var that = this
				var lunboimg = [
					{ url: 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/af23a2a898acc57e15cdeee31145d59a_259_194.jpg' },
					{ url: 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/af23a2a898acc57e15cdeee31145d59a_259_194.jpg' },
				 ];
				  // 获得一个图片的高度即可
				  wx.getImageInfo({
					  src: lunboimg[0].url,
					  success: function(res){
						  // 获取当前屏幕的宽度
						  var attr = wx.getStorageSync('phoneattr')
						  console.log("获取当前屏幕的宽度");
						  console.log(attr.screenWidth);
						  console.log(res.width);
						  console.log(res.height);
						  var imgHeight = (res.height * attr.screenWidth)/(res.width)
						  that.setData({
							  imgWidth: attr.screenWidth,
							  imgHeight: imgHeight
						  })  
					  }
				  }) 
			  }  
		})
	3.index.wxml 中代码:
		
		
			
			    
				    
					    
						    
					    
				    
			 
		
	4.index.wxss 中代码:	
		/**index.wxss**/
		.swiper{
			padding: 0;
			margin: 0;
		}
		.swiper image {
			width: 100%;
			height: 100%;
		}
		.shopanduser{
			width: 100%;
		}
		.shop,.user{
			width: 50%;
			float: left;
		}
	5.效果图如下:
		
	
		

swiper小程序轮播图片自适应_第1张图片

你可能感兴趣的:(swiper小程序轮播图片自适应)