Task：指引页

components/FunctionGuide.vue

@@ -6,7 +6,7 @@
 			</view> -->
 			<view class="btn-group flex_center" :style="{bottom: functionGuideData.btnGroupPosition || '-150rpx'}">
 				<view class="btn flex_center" @click="jump">跳过</view>
-				<view class="btn flex_center" @click="next">{{ functionGuideData.step==maxStep ? '知道了' : '下一步' }}</view>
+				<view class="next-btn v12-primary flex_center" @click="next">{{ functionGuideData.step==maxStep ? '知道了' : '下一步' }}</view>
 			</view>
 		</view>
 	</view>
@@ -97,6 +97,10 @@
 </script>
 
 <style lang="scss" scoped>
+.next-btn {
+	color: #fff;
+	padding: 2rpx 10rpx;
+}
 	.plus {
 		width: 140rpx;
 		height: 2rpx;

components/xdd-tabbar/index.vue

@@ -5,7 +5,7 @@
     }"
     class="xdd-tabbar-wrap"
   >
-    <view class="center-img" @click="switchTabFn('/pages/cloud/haveFun')">
+    <view class="center-img" id="quweiIcon" @click="switchTabFn('/pages/cloud/haveFun')">
       <image
         :src="webUrl + '/home/tabbar-center.png'"
         class="img"
@@ -95,7 +95,18 @@ export default {
       ]]
     }
   },
+  mounted() {
+    this.getElementData('#quweiIcon')
+  },
   methods: {
+    getElementData(el) {
+      const query = uni.createSelectorQuery().in(this)
+      query.select(el).boundingClientRect().exec((res)=> {
+        if(res[0]) {
+          this.$emit('getElementData', res[0])
+        }
+      })
+    },
     /**
      * 跳转至目标页面
      * type: 1-tabbar页面，2-非tabbar页面

mixins/GuideMixins.js

@@ -11,6 +11,8 @@ export default {
       },
       screenWidth: 0,
       scrollLeft: 0,
+      totalWidth: 0,
+      scrollViewWidth: 0,
     }
   },
   onLoad() {
@@ -27,6 +29,7 @@ export default {
     getElementData(el, cb) {
       const query = uni.createSelectorQuery().in(this)
       query.select(el).boundingClientRect().exec((res)=> {
+        console.log(res, 'getElementData');
         if(res[0]) {
           cb(res[0])
         }

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>
+    <FunctionGuide :maxStep="15" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
-    <xdd-tabbar :curr-index="0" />
+    <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;
+    // background-color: #fff;
-    overflow-x: auto;
     .item + .item {
       // margin: 0 0 0 36rpx;
     }
     .item {
       width: 150rpx;
       padding: 10rpx 20rpx;
+      background-color: #fff;
       .img {
         width: 86rpx;
         height: 86rpx;