助力活动轮播图高度修改

后端研发-倪永富
1 parent cb2e462f
Showing 3 changed files with 41 additions and 14 deletions
pages/user/assistance/task_assistance.js
pages/user/assistance/task_assistance.wxml
pages/user/assistance/task_assistance.wxss
@@ -64,7 +64,8 @@ Page({
     djs: "", //定时器的显示
     //*********************************************end
-		Hei: 0, 
+		// Hei: 0, 
+		max_sw_height: 0,
   },
   /**
@@ -1076,16 +1077,34 @@ Page({
   },
-	imgH:function(e){
+	// imgH:function(e){
-	    var winWid = wx.getSystemInfoSync().windowWidth;      //获取当前屏幕的宽度
-	    var imgh = e.detail.height;　　　　　　　　　　　　　　　　//图片高度
-	    var imgw = e.detail.width;
-	    var swiperH = winWid*0.827*imgh/imgw + "px"　　　　　　　　　　//等比设置swiper的高度。  即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度    ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
-	    console.log('imgload',winWid, imgh, imgw, swiperH);
+	//     var winWid = wx.getSystemInfoSync().windowWidth;      //获取当前屏幕的宽度
+	//     var imgh = e.detail.height;　　　　　　　　　　　　　　　　//图片高度
+	//     var imgw = e.detail.width;
+	//     var swiperH = winWid*0.827*imgh/imgw + "px"　　　　　　　　　　//等比设置swiper的高度。  即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度    ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
+	//     console.log('imgload',winWid, imgh, imgw, swiperH);
+	// 		this.setData({
+	//       Hei:swiperH　　　　　　　　//设置高度
+	//     })
+			
+	// 		imgs
+	// },
+	
+	
+	imageLoad: function(e) {
+		var winWid = wx.getSystemInfoSync().windowWidth;
+	  var imgwidth = e.detail.width;
+	  var imgheight = e.detail.height;
+	  //宽高比
+	  var ratio = imgwidth / imgheight;
+	  //计算的高度值
+	  var viewHeight = winWid / ratio * 0.8;
+	  if (this.data.max_sw_height < viewHeight) {
 			this.setData({
-	      Hei:swiperH　　　　　　　　//设置高度
-	    })
+			  max_sw_height: viewHeight
+			});
+		};
 	},
 })
 <wxs module="filter" src="../../../utils/filter.wxs"></wxs>
-<view class="top-back" style="padding-bottom:{{is_user_task!=null&&is_user_task.status==0?50:0}}rpx;background-image: url({{iurl}}/miniapp/images/friendhelp/lumi.png)" bindtap="close">
+<view class="top-back" style="padding-bottom:80rpx;background-image: url({{iurl}}/miniapp/images/friendhelp/lumi.png)" bindtap="close">
+<!-- <view class="top-back" style="padding-bottom:{{is_user_task!=null&&is_user_task.status==0?50:0}}rpx;background-image: url({{iurl}}/miniapp/images/friendhelp/lumi.png)" bindtap="close"> -->
   <!-- 助力活动头部 -->
   <view class="top-frame">
     <view class="flex-center">
@@ -16,15 +17,15 @@
     </view>
   </view>
   <!-- 图片的轮播图 -->
-  <view class="xc-specific-more-frame flex-center" style="height:{{Hei}};">
+  <view class="xc-specific-more-frame flex-center" style="height:{{max_sw_height}}px;">
     <view bindtap="click_pre">
       <view class="bg_left xc-left bcolor"></view>
     </view>
 		<!-- <swiper bindanimationfinish="changeGoodsSwip" current="{{sw_index}}" style='width:82.7%; height:100%' bindchange='onSli' indicator-dots="{{false}}" autoplay="{{false}}"> -->
-    <swiper bindanimationfinish="changeGoodsSwip" current="{{sw_index}}" style='' bindchange='onSli' indicator-dots="{{false}}" autoplay="{{false}}" style='width:82.7%;height: 100%;'>
+    <swiper bindanimationfinish="changeGoodsSwip" current="{{sw_index}}" style='' bindchange='onSli' indicator-dots="{{false}}" autoplay="{{false}}" style='width:80%;height:100%;'>
       <swiper-item class="rel" wx:for="{{aitem}}" wx:for-item="aitem" wx:for-index="pidx">
-        <image class="xc-center-img" bindtap="libao_details" data-taskid="{{aitem.id}}"  src="{{aitem.giftBagUrl!=null&&aitem.giftBagUrl!=''?iurl+aitem.giftBagUrl:swpie_img}}" mode="widthFix" bindload='imgH' style="width: 100%;display: block;"></image>
+        <image class="xc-center-img" bindtap="libao_details" data-taskid="{{aitem.id}}"  src="{{aitem.giftBagUrl!=null&&aitem.giftBagUrl!=''?iurl+aitem.giftBagUrl:swpie_img}}" mode="widthFix" bindload='imageLoad' style="width: 100%;display: block;"></image>
         <view bindtap="libao_details" data-taskid="{{aitem.id}}" class="abs select_details fs26 white">礼包详情</view>
       </swiper-item>
@@ -65,7 +66,8 @@
 </view>
 <!-- 底部列表 -->
-<view style="margin-top:{{is_user_task!=null?52:0}}rpx">
+<view>
+<!-- <view style="margin-top:{{is_user_task!=null?52:0}}rpx"> -->
   <!-- 标题 -->
   <view class="flex-vertical-between fs28 padding head">
@@ -16,6 +16,7 @@ page {
   /* height:65%; */
   background-repead: no-repead;
   background-size: 100% 100%;
+	padding-bottom: 50rpx;
 }
 .top-frame {
@@ -236,4 +237,9 @@ line-height: 48rpx;
 .bottom{
   margin-bottom: 50rpx;
   margin-top: 20rpx;
+}
+
+.rel {
+	display: flex;
+	align-items: center;
 }
 \ No newline at end of file