自定义返回按钮

src/components/livedModel/livedControls.vue

@@ -116,6 +116,7 @@ export default {
       imgAni: false, //给点赞元素加动画
       getBottom:0,//动态绑定输入框位置
       loadingShare:false,
+      isClick:true,
     };
   },
   components: {
@@ -276,16 +277,22 @@ export default {
     },
     // 点击发送留言
     toSend() {
-      console.log("点击按钮-------------------200");
-      if (this.sendVal == "") {
-        this.getFocus = true;
-      } else {
-        let query = {
-          guestbookType: "1",
-          guestbookContent: this.sendVal,
-          liveBroadcastId: Number(this.liveId)
-        };
-        this.$emit("toSendMsg", query);
+      if(this.isClick){
+        this.isClick=false;
+        setTimeout(() => {
+          this.isClick=true;
+        },300);
+        console.log("点击按钮-------------------200");
+        if (this.sendVal == "") {
+          this.getFocus = true;
+        } else {
+          let query = {
+            guestbookType: "1",
+            guestbookContent: this.sendVal,
+            liveBroadcastId: Number(this.liveId)
+          };
+          this.$emit("toSendMsg", query);
+        }
       }
     }
   }

src/pages/lived/index.vue

@@ -7,7 +7,7 @@
     <!-- 直播展示层 -->
     <div class="liveModel" v-if="liveNoticeInfo.liveBroadcastState>-1">
       <!-- 自定义返回按钮 -->
-      <div class="customBack flex">
+      <div class="customBack flex" :style="{'top':navTop*2+'rpx','height':(navHeight*2-2)+'rpx'}">
         <div class="backIcon">
           <img
             @click="back"
@@ -73,7 +73,7 @@
 </template>
 
 <script type="text/ecmascript-6">
-import { serialize, getQueryVariable, DFSImg } from "@/utils/index";
+import { serialize, getQueryVariable, DFSImg,getNavbarInfo } from "@/utils/index";
 import live from "@/api/live";
 import notStarted from "@/components/livedModel/notStarted";
 import livedControls from "@/components/livedModel/livedControls";
@@ -109,7 +109,9 @@ export default {
       params: {},
       userId: "",
       hasInvitationStatus: 0, // 邀请资格：0-不能够邀请下级，1-能够邀请下级
-      spokesmanObj: {} //分销员信息
+      spokesmanObj: {}, //分销员信息
+      navTop:0,
+      navHeight:0,
     };
   },
   components: {
@@ -118,8 +120,12 @@ export default {
     livedIsEnded
   },
   computed: {},
-  created() {},
   onLoad(options) {
+    getNavbarInfo(res=>{
+      console.log(res,'--------------------125')
+      this.navTop=res.navTop
+      this.navHeight=res.navHeight
+    });
     wx.getNetworkType({
       success: function(res) {
         if (res.networkType != "wifi") {
@@ -497,7 +503,6 @@ img {
     z-index: 1;
     .customBack {
       position: absolute;
-      top: 30px;
       left: 12px;
       width: 70%;
       z-index: 2;

src/utils/index.js

@@ -77,3 +77,15 @@ export function DFSImg(path, w, h) { //
     return baseImg[Math.floor(Math.random() * 100) % baseImg.length] + path;
   }
 }
+// 获取Navbar高度
+export function getNavbarInfo(fn) {
+  let menuInfo = wx.getMenuButtonBoundingClientRect(); //右上角胶囊信息
+  wx.getSystemInfo({
+    success: (res) => {
+      fn({
+        navTop: res.statusBarHeight, //状态栏高度
+        navHeight: res.statusBarHeight + menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2 //导航栏高度
+      })
+    }
+  })
+}