+
80
-

colorui cu-custom顶部导航在uniapp中导出h5错位问题怎么解决?

colorui cu-custom顶部导航在uniapp中导出h5错位问题怎么解决?


网友回复

+
0
-

将colorui下的component目录下的cu-custom.vue改成下面的就好了。

<template>
<view class="cu-custom" :style="'height:' + CustomBar + 'px'">
  <view :class="'cu-bar fixed ' + (bgImage!=''?'none-bg text-white bg-img':'') + ' ' + bgColor" :style="'height:' + CustomBar + 'px;top:0;padding-top:' + StatusBar + 'px;' + (bgImage?'background-image:url(' + bgImage+')':'')">
    <view class="action" @tap="BackPage" v-if="isBack">
      <text class="cuIcon-back"></text>
      <slot name="backText"></slot>
    </view>

    <view class="action" @tap="search" v-if="isSearch">
      <text class="cuIcon-search"></text>
      <slot name="backText"></slot>
    </view>
    <view class="action border-custom" v-if="isCustom" :style="'width:' + Custom.width + 'px;height:' + Custom.height + 'px;margin-left:calc(750rpx - ' + Custom.right + 'px)'">
      <text class="cuIcon-back" @tap="BackPage"></text>
      <text class="cuIcon-homefill" @tap="toHome"></text>
    </view>
    <view class="content" >
      <slot name="content"></slot>
    </view>
    <slot name="right"></slot>
  </view>
</view>
</template>

<script>
const app = getApp();

export default {
  data() {
    return {
      StatusBar: 0,
      CustomBar: 40,
      Custom: []
    };
  },

  components: {},
  props: {
    bgColor: {
      type: String,
      default: ''
    },
    isCustom: {
      type: [Boolean, String],
      default: false
    },
    isBack: {
      type: [Boolean, String],
      default: false
    },
    isSearch: {
      type: [Boolean, String],
      default: false
    },
    bgImage: {
      type: String,
      default: ''
    }
  },

  /**
   * 组件的一些选项
   */
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  methods: {
    BackPage() {
      const pages = getCurrentPages();

      if (pages.length == 1) {
        uni.reLaunch({
          url: '/pages/index/index'
        });
        return;
      }

      uni.navigateBack({
        delta: 1
      });
    },

    toHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },

    search() {
      uni.navigateTo({
        url: '/pages/search/search'
      });
    }

  }
};
</script>
<style>
/* colorui/components/cu-custom.wxss */
</style>

我知道答案,我要回答