组合票优化

pages/combination/distributionCombiChoose/distributionCombiChoose.vue

 <!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
 <template>
 	<view class="wrap">
-		<scroll-view @scroll="scrollFull" style="height: 100%;" scroll-y>
+		<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" 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">
@@ -50,13 +50,15 @@
 				</view>
 				<!-- 列表部分 -->
 				<view class="middle-bottom" :style="middleBottomStyle">
-					<scroll-view class="scroll-left" :style="{height:scrlllHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y>
+					<!-- 左边滚动条 -->
+					<scroll-view class="scroll-left" :style="{height:scrollHeight+'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}'>
 								{{item.name}}
 							</view>
 						</view>
 					</scroll-view>
+					<!-- 右边滚动条 -->
 					<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">
@@ -227,13 +229,14 @@ export default {
       merchantIndex:0,//选中的商家下标
       middleHeight:0,//中间列表盒子高度
       heightArr:[],//元素高度数组
-      scrlllHeight:0,//中间盒子滚动时的高度
+      scrollHeight:0,//中间盒子滚动时的高度
       originHeight:0,//中间盒子原本高度
       middleInfoStyle:'',//中间盒子上部分样式
       middleBottomStyle:'',//中间盒子下部分样式
       toViewRight:'',//右边滚动到某个元素
       toViewLeft:'',//左边滚动到某个元素
-      showTransition:true
+      toViewFull:'',//全屏滚动到某个元素
+      showTransition:true,//控制动画显示隐藏
     }
   },
   watch: {
@@ -441,7 +444,7 @@ export default {
 						    //获取中间盒子需要滚动时的高度
 						    uni.createSelectorQuery().in(this).select('.merchant-info').boundingClientRect(data => {
 						      if(data){
-						        this.scrlllHeight=windowHeight-data.height
+						        this.scrollHeight=windowHeight-data.height
 						      }
 						    }).exec()
                 //获取中间盒子原本高度
@@ -530,13 +533,15 @@ export default {
     },
     //---商家下标切换
     merchantTabChange(index){
+      //点击左边，全屏先置顶
+      this.toViewFull='middle'
       //点击左边，右边可滚动
-      this.middleHeight=this.scrlllHeight
+      this.middleHeight=this.scrollHeight
+      this.merchantIndex=index
       //加个延时，防止第一次点击时无效果
-      setTimeout(()=>{
-        this.merchantIndex=index
+      this.$nextTick(()=>{
         this.toViewRight='merchant'+index
-      },150)
+      })
     },
     //---展示明细弹窗
     showDetail() {
@@ -550,10 +555,10 @@ export default {
 				  if(data){
 				    //20=中间盒子top:-20的值
 				    height=data.height-20
-            if(e.detail.scrollTop>height){
+            if(e.detail.scrollTop>=height){
               //商家信息固定，中间可滚动，全屏不滚动
 						  this.middleInfoStyle='top:0;position:fixed;'
-              this.middleHeight=this.scrlllHeight
+              this.middleHeight=this.scrollHeight
               this.middleBottomStyle='margin-top:50px'
               this.showTransition=false
             }else{
@@ -572,12 +577,6 @@ export default {
     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){