新页面ios系统还需要测试版本

pages/combination/distributionCombiChoose/distributionCombiChoose.vue

@@ -2,7 +2,7 @@
 <template>
 	<view class="wrap">
 		<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y>
-			<view class="banner">
+			<view class="banner" id='banner'>
 				<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
 						<view slot="indicator" class="indicator-num">
 								<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
@@ -191,7 +191,7 @@
 		<!-- 自定义导航栏 -->
 		<view class="tabbar" :style="{height:topHeight+'px',opacity:tabbarOpacity}" >
 			<view class="tabbar-title">
-				<u-icon name="arrow-left" color="#333333" size="48"></u-icon>
+				<u-icon @click="goTop()" name="arrow-left" color="#333333" size="48"></u-icon>
 				<text>选择产品</text>
 				<text></text>
 			</view>
@@ -324,7 +324,7 @@ export default {
     //处理苹果手机下面有根横线，影响选中产品明细的操作
     let platform = uni.getSystemInfoSync().platform
     if(platform=='ios'){
-      this.bottomStyle='height:140rpx;'
+      this.bottomStyle='height:140rpx;padding-bottom:10rpx;'
       this.middleStyle='padding-bottom:140rpx;'
     }
   },
@@ -442,41 +442,44 @@ export default {
           this.$nextTick(() => {
             //清空数组
             this.heightArr=[]
+            //获取中间盒子需要滚动时的高度
+            uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
+						  if(data){
+						    this.middleTopHeight=data.height
+						  }
+            }).exec()
+            //获取中间盒子原本高度
+            uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
+						  //获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
+						  if(data){
+						    this.originHeight=data.height
+						    this.middleHeight=data.height
+						  }
+            }).exec()
+						
+            //不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery() 
+            for(let i=0;i<this.scenicList.length;i++){
+						  uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
+						    //获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
+							  if(data){
+						      if(i==0){
+						        //取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
+						        this.heightArr.push(parseInt(data.height))
+						      }else{
+						        this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
+						      }
+							  }
+						  }).exec()
+            }
             uni.getSystemInfo({
 						  complete:(info)=> {
                 let windowHeight=info.windowHeight||844
-						    //获取中间盒子需要滚动时的高度
-						    uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
-						      if(data){
-                    //40为middle的top-20值，还有middle-bottom盒子距离顶部的距离20
-                    this.middleTopHeight=data.height
-						        this.scrollHeight=windowHeight-data.height-40
-						      }
-						    }).exec()
-                //获取中间盒子原本高度
-                uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
-								  //获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
+                uni.createSelectorQuery().in(this).select('.bottom').boundingClientRect(data => {
 								  if(data){
-								    this.originHeight=data.height
-                    this.middleHeight=data.height
+								    this.scrollHeight=windowHeight-data.height-this.topHeight
 								  }
                 }).exec()
 								
-                //不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery() 
-                for(let i=0;i<this.scenicList.length;i++){
-                  uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
-                    //获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
-									  if(data){
-                      if(i==0){
-                        //取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
-                        this.heightArr.push(parseInt(data.height))
-                      }else{
-                        this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
-                      }
-									  }
-                  }).exec()
-                }
-                
 						  }
             })
             
@@ -540,11 +543,18 @@ export default {
     //---商家下标切换
     merchantTabChange(index){
       //点击左边，全屏先置顶
-      this.toViewFull='middle-bottom'
+      //为了让scrollview能检测到滚动数据的变化
+      this.toViewFull='aaa'
+      // 数据更新后，视图的更新是异步的,防止点击无效
+      this.$nextTick(()=>{
+        this.toViewFull='middle-bottom'
+      })
       //点击左边，右边可滚动
       this.merchantIndex=index
       this.middleHeight=this.scrollHeight
-      //加个延时，防止第一次点击时元素样式还未更新，导致不滑动到对应元素
+      //为了让scrollview能检测到滚动数据的变化
+      this.toViewRight='aaa'
+      // 数据更新后，视图的更新是异步的,防止第一次点击无效
       this.$nextTick(()=>{
         this.toViewRight='merchant'+index
       })
@@ -560,17 +570,17 @@ export default {
         let scrollTop=e.detail.scrollTop
         uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
 				  if(data){
-            //30为中间盒子的top-20和滚动条的margintop值(可以根据效果进行微调，过小可能引起上下一直抖动)
-            height=data.height+this.middleTopHeight-this.topHeight-30
+            //20为中间盒子的top-20
+            height=data.height+this.middleTopHeight-20-this.topHeight
             let opacity=scrollTop/(data.height)
             this.tabbarOpacity=parseFloat(opacity.toFixed(2))
             if(scrollTop>=height){
-            //中间上部分固定，中间下部分可滚动，全屏不滚动
+              //中间上部分固定，中间下部分可滚动，全屏不滚动
               this.middleHeight=this.scrollHeight
             }else{
-            //中间上部分不固定，中间下部分不可滚动，全屏滚动'
+              //中间上部分不固定，中间下部分不可滚动，全屏滚动'
               this.middleHeight=this.originHeight
-            } 
+            }
 				  }
         }).exec()
         
@@ -597,6 +607,15 @@ export default {
       },5)
 			 
     },
+    //---回到顶部
+    goTop(){
+      this.middleHeight=this.originHeight
+      //为了让scrollview能检测到滚动数据的变化
+      this.toViewFull='aaa'
+      this.$nextTick(()=>{
+        this.toViewFull='banner'
+      })
+    },
     //---导航
     navigation(merchant){
 		  uni.openLocation({
@@ -774,6 +793,7 @@ export default {
 .wrap {
 	height: 100%;
 	background: #f7f7f7;
+	overflow-anchor:auto;
 }
 .middle {
 	padding-bottom: 100rpx;
@@ -852,12 +872,10 @@ export default {
 	z-index: 1;
 }
 .scroll-left{
-	width: 130rpx;
 	flex-shrink: 0;
 	padding: 12px 24rpx 0 0;
-}
-.scroll-right{
-	
+	box-sizing: border-box;
+	width: 154rpx;
 }
 .middle-left{
 	font-size: 24rpx;
@@ -879,7 +897,7 @@ export default {
 }
 .merchantlist-wrap{
 	background: #f7f7f7;
-	padding-top:24rpx;
+	padding-top:12px;
 }
 .merchantlist {
 	border-radius: 20rpx;
@@ -1070,9 +1088,7 @@ export default {
 	color: #ffffff;
 	font-weight: bold;
 	margin:0 10rpx;
-	
 }
-
 .bottom-btn {
 	display: inline-block;
 	width: 200rpx;