组合票开发

pages/combination/distributionCombiChoose/distributionCombiChoose.vue

 <!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
 <template>
 	<view class="wrap">
+		<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">
@@ -8,8 +9,8 @@
 						</view>
 				</u-swiper>
 			</view>
-		<view class="middle" :style="{height:middleHeight+'px'}">
-			<view class="merchant-info">
+			<view class="middle">
+				<view class="merchant-info" :style="middleInfoStyle">
 					<view class="merchant-name">
 						{{currentMerchant.name}}
 					</view>
@@ -43,7 +44,7 @@
 						</view>
 					</view>
 				</view>
-			<view class="middle-bottom">
+				<view class="middle-bottom" :style="middleBottomStyle">
 					<!-- <scroll-view :style="{height:middleHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y> -->
 						<view class="middle-left">
 							<view :id="'merchant-tab'+index" class="merchant-tab" v-for="(item,index) in scenicList" :key="index" @click="merchantTabChange(index)" :class='{on:merchantIndex==index}'>
@@ -51,7 +52,7 @@
 							</view>
 						</view>
 					<!-- </scroll-view> -->
-				<scroll-view @scroll="scroll" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y>
+					<scroll-view @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y>
 						<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">
@@ -153,6 +154,7 @@
 					<text class="bottom-btn" @click="goFillorder()">去预定</text>
 				</view>
 			</view>
+		</scroll-view>
 		<!-- 客服组件 -->
 		<customer :scenicList="scenicList" ref="customer"></customer>
 		<!-- 购买须知 -->
@@ -213,12 +215,14 @@ export default {
       showModal: false, //是否显示模态框
       chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
       merchantIndex:0,//选中的商家下标
-      middleHeight:0,//中间列表盒子高度
+      middleHeight:3000,//中间列表盒子高度
       heightArr:[],//元素高度数组
       toViewRight:'',//右边滚动到某个元素
       toViewLeft:'',//左边滚动到某个元素
       showBusiness:false,//用于是否显示营业中
       showPauseBusiness:false,//用于显示暂停营业
+      middleInfoStyle:'',//中间盒子上部分样式
+      middleBottomStyle:'',//中间盒子下部分样式
     }
   },
   watch: {
@@ -423,13 +427,13 @@ export default {
 						  complete:(info)=> {
                 let windowHeight=info.windowHeight||753
 						    //获取元素都用 uni.createSelectorQuery()，不要用变量代替，不然会循环。
-						    uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
-                  //获取中间盒子的高度
-						      if(data){
-						        bannerHeight=data.height
-						        this.middleHeight=windowHeight-bannerHeight
-						      }
-						    }).exec()
+						    // uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
+                //         //获取中间盒子的高度
+						    //   if(data){
+						    //     bannerHeight=data.height
+						    //     this.middleHeight=windowHeight-bannerHeight
+						    //   }
+						    // }).exec()
                 //不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery() 
                 for(let i=0;i<this.scenicList.length;i++){
                   uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
@@ -513,10 +517,38 @@ export default {
     showDetail() {
 		  this.$refs.detail.showPop = true
     },
+    //---全屏滚动
+    scrollFull(e){
+      setTimeout(()=>{
+        let height=0
+        uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
+				  if(data){
+				    //20=中间盒子top:-20的值
+				    height=data.height-20
+            if(e.detail.scrollTop>height){
+						  this.middleInfoStyle='top:0;position:fixed;'
+						  this.middleBottomStyle='margin-top:240rpx'
+						  this.middleHeight=600
+            }else{
+						  this.middleInfoStyle='position:relative;'
+						  this.middleBottomStyle='margin-top:0'
+              this.middleHeight=3000
+            } 
+				  }
+        }).exec()
+        
+      },5)
+    },
     //---右边滚动事件
-    scroll(e) {
+    scrollRight(e) {
       setTimeout(()=>{
         let scrollTop=e.detail.scrollTop
+        if(scrollTop==0){
+          //当滑到顶部时，上面固定元素还原	
+          this.middleInfoStyle='position:relative;'
+          this.middleBottomStyle='margin-top:0'
+          this.middleHeight=3000
+        }
         //通过滚动值获取下标
         this.heightArr.forEach((item,i)=>{
           if(i==0){
@@ -531,7 +563,7 @@ export default {
             }
           }
         })
-      },100)
+      },5)
     },
     //---导航
     navigation(merchant){
@@ -714,13 +746,16 @@ export default {
 .middle {
 	padding-bottom: 100rpx;
 	position: relative;
-	top: -80rpx;
+	top: -20px;
 }
 // 中间上部分
 .merchant-info{
+	width: 100%;
 	background: #ffffff;
 	border-radius: 24rpx 24rpx 0 0;
 	padding: 12rpx 20rpx 20rpx 20rpx;
+	z-index: 1;
+	transition: 0.6s;
 }
 .merchant-name{
 	font-size: 36rpx;