Task：指引页

pages/home/index.vue

@@ -48,7 +48,7 @@
       <!-- 导航v9 -->
       <view class="menus-wrap">
         <view class="menus-bg" />
-        <scroll-view scroll-x :scroll-into-view="scrollView"  scroll-with-animation >
+        <scroll-view scroll-x :scroll-into-view="scrollView" class="scroll-view"  scroll-with-animation @scroll="onscroll" >
           <view class="menus-list">
             <view
               v-for="(item, index) in menus"
@@ -338,8 +338,8 @@
       @ok="handleOk"
       paddingBottom="200rpx"
     />
-    <FunctionGuide :maxStep="14" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
-    <xdd-tabbar :curr-index="0" />
+    <FunctionGuide :maxStep="15" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
+    <xdd-tabbar :curr-index="0" @getElementData="elementData" />
   </view>
 </template>
 
@@ -408,6 +408,7 @@ export default {
       lotteryCanDraw: false,
       videoContext: null,
       isPlay: true,
+      tabIconPostion: {}
     }
   },
   onLoad() {
@@ -441,12 +442,31 @@ export default {
     this.scrollTop = e.scrollTop
   },
   methods: {
+    elementData(e) {
+      this.tabIconPostion = e
+    },
+    onscroll(e) {
+      console.log(e);
+      this.scrollViewWidth = e.detail.scrollWidth
+      this.getElementData(`#box-item${this.functionGuideData.step}`, res=>{
+        this.setFunctionGuideData({
+          tips: '介绍模块2，简述一下模块功能',
+          btnGroupPosition: '20rpx',
+          tipsPosition: '',
+          position: {
+            top: res.top + 'px',
+            left: res.left + 'px',
+            width:  `${res.height}px`,
+            height: `${res.height}px`
+          }
+        })
+      })
+    },
     showFunctionGuide() {
       if(this._step == this.functionGuideData.step) return
       this._step = this.functionGuideData.step
       if(this.functionGuideData.step == 1) {
         this.getElementData('#step1', res=>{
-          console.log(res);
           this.screenWidth = res.width - 20
           this.setFunctionGuideData({
             tips: '介绍模块1，简述一下模块功能',
@@ -462,8 +482,29 @@ export default {
         })
         
       }else {
+        if(this.functionGuideData.step == 15) {
+          console.log(this.functionGuideData.step, 'quweiIcon');
+          this.setFunctionGuideData({
+            tips: '介绍模块2，简述一下模块功能',
+            btnGroupPosition: '',
+            tipsPosition: '',
+            position: {
+              top: this.tabIconPostion.top + 'px',
+              left:  this.tabIconPostion.left + 'px',
+              width:  `${this.tabIconPostion.width}px`,
+              height: `${this.tabIconPostion.height}px`,
+            }
+          })
+          return
+        }
         this.getElementData(`#box-item${this.functionGuideData.step}`, res=>{
-          console.log(res);
+          this.totalWidth += res.width
+          if(res.left + res.width / 2 > this.screenWidth) {
+            this.$nextTick(()=> {
+              this.scrollView = `box-item${this.functionGuideData.step}`
+            })
+            return
+          }
           this.setFunctionGuideData({
             tips: '介绍模块2，简述一下模块功能',
             btnGroupPosition: '',
@@ -475,9 +516,7 @@ export default {
               height: `${res.height}px`,
             }
           })
-          this.$nextTick(()=> {
-            this.scrollView = `box-item${this.functionGuideData.step}`
-					})
+          
         })
       }
 
@@ -842,6 +881,10 @@ export default {
   z-index: 5;
   padding: 21rpx 21rpx 0 21rpx;
 }
+.scroll-view{
+  background: #fff;
+  border-radius: 16rpx;
+}
 .menus-wrap {
   position: relative;
   .menus-list {
@@ -851,14 +894,14 @@ export default {
     flex-shrink: 0;
     padding: 12rpx 24rpx;
     border-radius: 16rpx;
-    background-color: #fff;
-    overflow-x: auto;
+    // background-color: #fff;
     .item + .item {
       // margin: 0 0 0 36rpx;
     }
     .item {
       width: 150rpx;
       padding: 10rpx 20rpx;
+      background-color: #fff;
       .img {
         width: 86rpx;
         height: 86rpx;