组合票抖动bug处理

pages/combination/distributionCombiChoose/distributionCombiChoose.vue

@@ -9,7 +9,7 @@
 						</view>
 				</u-swiper>
 			</view>
-			<view class="middle" :style="middleStyle">
+			<view class="middle">
 				<!-- 中间上面部分 -->
 				<view class="middle-top">
 					<view class="merchant-name">
@@ -59,7 +59,7 @@
 					</scroll-view>
 					<!-- 右边滚动条 -->
 					<!-- enhanced和bounces是处理ios系统橡皮筋回弹bug -->
-					<scroll-view class="scroll-right" @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y enhanced :bounces="false">
+					<scroll-view class="scroll-right" @scroll="scrollRight" :style="{height:rightHeight+'px'}" :scroll-into-view="toViewRight" scroll-y enhanced :bounces="false">
 						<view class="middle-right">
 							<checkbox-group @change="checkboxChange" class="checkbox-box" >
 								<view class="merchantlist-wrap" :id="'merchant'+index" v-for="(item, index) in scenicList" :key="index">
@@ -140,7 +140,7 @@
 				
 				
 			</view>
-			<view class="bottom" :style="bottomStyle">
+			<view class="bottom">
 				<view class="bottom-left" @click="showCustomer()">
 					<u-icon name="chat" size="42"></u-icon>
 					客服
@@ -241,7 +241,7 @@ export default {
       showModal2: false, //模态框2，用于联票不能组合购买
       chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
       merchantIndex:0,//选中的商家下标
-      middleHeight:0,//中间列表盒子高度
+      rightHeight:0,//右边列表盒子高度
       heightArr:[],//元素高度数组
       toViewRight:'',//右边滚动到某个元素
       toViewLeft:'',//左边滚动到某个元素
@@ -252,8 +252,6 @@ export default {
       middleTopHeight:0,//中间盒子上部分高度
       topHeight:0,//上面状态栏+上面导航栏总高度
       tabbarOpacity:0,//导航栏透明度
-      bottomStyle:'',//处理苹果手机的横线，单独增加一个样式
-      middleStyle:'',//中间盒子样式，单独增加一个样式
     }
   },
   watch: {
@@ -333,15 +331,9 @@ export default {
     this.channelId=this.$commonjs.getKey(option,'channelId')||''
     this.groupId=this.$commonjs.getKey(option,'groupId')||''
     this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
-    let statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
+    let statusBarHeight = uni.getWindowInfo().statusBarHeight // 状态栏高度
     let capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
     this.topHeight =statusBarHeight+(capsule.top - statusBarHeight) * 2 + capsule.height//整个上部分总高度
-    //处理苹果手机下面有根横线，影响选中产品明细的操作
-    let platform = uni.getSystemInfoSync().platform
-    if(platform=='ios'){
-      this.bottomStyle='height:140rpx;padding-bottom:10rpx;'
-      this.middleStyle='padding-bottom:140rpx;'
-    }
   },
   onShow() {
     //清空之前选中的数据以及状态
@@ -503,20 +495,20 @@ export default {
             //获取中间盒子原本高度
             // #ifdef MP-WEIXIN
             uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
-						  //获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
+						  //获取右边盒子原本高度,默认右边盒子等于原本高度，滚动之后等于滚动高度
 						  if(data){
 						    this.originHeight=data.height
-						    this.middleHeight=data.height
+						    this.rightHeight=data.height
 						  }
             }).exec()
             // #endif
 						
             // #ifdef MP-ALIPAY
             uni.createSelectorQuery().select('.middle-right').boundingClientRect(data => {
-						  //获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
+						  //获取右边盒子原本高度,默认右边盒子等于原本高度，滚动之后等于滚动高度
 						  if(data){
 						    this.originHeight=data.height
-						    this.middleHeight=data.height
+						    this.rightHeight=data.height
 						  }
             }).exec()
             // #endif
@@ -550,27 +542,9 @@ export default {
 						  }).exec()
 						  // #endif
             }
-            uni.getSystemInfo({
-						  complete:(info)=> {
-                let windowHeight=info.windowHeight||844
-                // #ifdef MP-WEIXIN
-                uni.createSelectorQuery().in(this).select('.bottom').boundingClientRect(data => {
-								  if(data){
-								    this.scrollHeight=windowHeight-data.height-this.topHeight
-								  }
-                }).exec()
-                // #endif
-                // #ifdef MP-ALIPAY
-                uni.createSelectorQuery().select('.bottom').boundingClientRect(data => {
-                  if(data){
-                    this.scrollHeight=windowHeight-data.height-this.topHeight
-                  }
-                }).exec()
-                // #endif
-								
-						  }
-            })
-            
+            let windowHeight=uni.getWindowInfo().screenHeight||1000
+            //60为底部高度
+            this.scrollHeight=windowHeight-60-this.topHeight
           })
 		    } else {
 		      uni.showToast({
@@ -639,7 +613,7 @@ export default {
       })
       //点击左边，右边可滚动
       this.merchantIndex=index
-      this.middleHeight=this.scrollHeight
+      this.rightHeight=this.scrollHeight
       //为了让scrollview能检测到滚动数据的变化
       this.toViewRight='aaa'
       // 数据更新后，视图的更新是异步的,防止第一次点击无效
@@ -665,11 +639,11 @@ export default {
             //下面值取整数，防止部分手机取值太多小数，出现抖动的bug
 					  if(parseInt(scrollTop)>=parseInt(height)){
 					    //中间上部分固定，中间下部分可滚动，全屏不滚动
-					    this.middleHeight=this.scrollHeight
+					    this.rightHeight=this.scrollHeight
 					    
 					  }else{
 					    //中间上部分不固定，中间下部分不可滚动，全屏滚动'
-					    this.middleHeight=this.originHeight
+					    this.rightHeight=this.originHeight
 					  }
           }
         }
@@ -709,7 +683,7 @@ export default {
     },
     //---回到顶部
     goTop(){
-      this.middleHeight=this.originHeight
+      this.rightHeight=this.originHeight
       //为了让scrollview能检测到滚动数据的变化
       this.toViewFull='aaa'
       this.$nextTick(()=>{
@@ -910,7 +884,7 @@ export default {
 	background: #f7f7f7;
 }
 .middle {
-	padding-bottom: 100rpx;
+	padding-bottom:60px;
 	position: relative;
 	top: -10px;
 }
@@ -1143,14 +1117,14 @@ export default {
 	position: fixed;
 	bottom: 0;
 	width: 100%;
-	height: 100rpx;
+	height: 60px;
 	background: #fff;
 	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
 	z-index: 10;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 0 32rpx;
+	padding: 0 32rpx 10rpx 32rpx;
 }
 .bottom-left{
 	display: flex;