新页面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,15 +442,10 @@ export default {
           this.$nextTick(() => {
             //清空数组
             this.heightArr=[]
-            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()
             //获取中间盒子原本高度
@@ -476,6 +471,14 @@ export default {
 							  }
 						  }).exec()
             }
+            uni.getSystemInfo({
+						  complete:(info)=> {
+                let windowHeight=info.windowHeight||844
+                uni.createSelectorQuery().in(this).select('.bottom').boundingClientRect(data => {
+								  if(data){
+								    this.scrollHeight=windowHeight-data.height-this.topHeight
+								  }
+                }).exec()
 								
 						  }
             })
@@ -540,11 +543,18 @@ export default {
     //---商家下标切换
     merchantTabChange(index){
       //点击左边，全屏先置顶
+      //为了让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,8 +570,8 @@ 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){
@@ -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;