组合票开发

pages/combination/distributionCombiChoose/distributionCombiChoose.vue

 <!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
 <template>
 	<view class="wrap">
-		<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y>
+		<scroll-view @scroll="scrollFull" style="height: 100%;" scroll-y>
 			<view class="banner">
 				<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
 						<view slot="indicator" class="indicator-num">
@@ -10,11 +10,13 @@
 				</u-swiper>
 			</view>
 			<view class="middle" id="middle">
+				<!-- 商家信息部分 -->
 				<view class="merchant-info" :style="middleInfoStyle">
 					<view class="merchant-name">
 						{{currentMerchant.name||''}}
 					</view>
-					<view class="merchant-info-bottom" :style="merchantBottomStyle" >
+					<u-transition :show="showTransition" :duration='800'>
+						<view class="merchant-info-bottom" >
 							<view class="merchant-bottom-left">
 								<view>
 									<text v-if="showBusiness" style="color: #00B42B;">营业中</text>
@@ -43,7 +45,10 @@
 								</view>
 							</view>
 						</view>
+					</u-transition>
+					
 				</view>
+				<!-- 列表部分 -->
 				<view class="middle-bottom" :style="middleBottomStyle">
 					<scroll-view class="scroll-left" :style="{height:scrlllHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y>
 						<view class="middle-left">
@@ -222,15 +227,13 @@ export default {
       merchantIndex:0,//选中的商家下标
       middleHeight:0,//中间列表盒子高度
       heightArr:[],//元素高度数组
-      infoHeight:0,//middle-info盒子高度
       scrlllHeight:0,//中间盒子滚动时的高度
       originHeight:0,//中间盒子原本高度
       middleInfoStyle:'',//中间盒子上部分样式
       middleBottomStyle:'',//中间盒子下部分样式
-      merchantBottomStyle:'',//商家信息下部分样式
       toViewRight:'',//右边滚动到某个元素
       toViewLeft:'',//左边滚动到某个元素
-      toViewFull:'',//全屏滚动到某个元素
+      showTransition:true
     }
   },
   watch: {
@@ -438,8 +441,7 @@ export default {
 						    //获取中间盒子需要滚动时的高度
 						    uni.createSelectorQuery().in(this).select('.merchant-info').boundingClientRect(data => {
 						      if(data){
-						        this.infoHeight=data.height
-						        this.scrlllHeight=windowHeight-this.infoHeight
+						        this.scrlllHeight=windowHeight-data.height
 						      }
 						    }).exec()
                 //获取中间盒子原本高度
@@ -534,8 +536,7 @@ export default {
       setTimeout(()=>{
         this.merchantIndex=index
         this.toViewRight='merchant'+index
-        // this.toViewFull='middle'
-      },100)
+      },150)
     },
     //---展示明细弹窗
     showDetail() {
@@ -554,13 +555,13 @@ export default {
 						  this.middleInfoStyle='top:0;position:fixed;'
               this.middleHeight=this.scrlllHeight
               this.middleBottomStyle='margin-top:50px'
-              this.merchantBottomStyle='height:0;margin-top:0;'
+              this.showTransition=false
             }else{
               //商家不固定，中间不可滚动，全屏滚动
 						  this.middleInfoStyle='position:relative;'
               this.middleHeight=this.originHeight
               this.middleBottomStyle='margin-top:0'
-              this.merchantBottomStyle='height:auto;margin-top:12rpx;'
+              this.showTransition=true
             } 
 				  }
         }).exec()