uniapp开发小程序过程中的一些坑汇总

一、u-image使用aspectFit在H5里面正常显示，但是微信小程序里面不显示。

解决方案：换成heightFix 就可以了

二、导航栏如果想要设置背景透明，左侧箭头也不显示了

##原来：
<u-navbar
        :title="null"
        :border-bottom="false"
        :is-fixed="false"
        :background="{opacity:0}"
        back-icon-color="#000000"
      >
      </u-navbar>

##解决方案：background设置为null
<u-navbar
        :title="null"
        :border-bottom="false"
        :is-fixed="false"
        :background="null"
        back-icon-color="#000000"
      >
      </u-navbar>

效果图：

效果图

三、u-badge在使用的时候，注意这个组件默认进行了定位，会出现加了该组件不显示的问题。

image.png

解决方案一：设置父级position: relative;
解决方案二：设置absolute:false
<u-badge
  type="error"
  :count="2"
  :absolute="false"
></u-badge>

四、uView中uSticky和uTabs组合使用吸上去下不来的问题

在u-sticky和u-tabs组合使用中，发现吸上去下不来了，原因是
u-tabs是从后台动态获取的数据，初始值是空的，这个时候u-sticky是获取不到位置的，所以导致吸上去了下不来。

解决方案：

设置u-tabs的数组数据给一个初始默认值

<!-- 栏目TAB -->
    <u-sticky :offset-top="offsetTop" :h5-nav-height="0" bg-color="#eaeae9">
      <view class="columns-wrap">
        <u-tabs
          :list="columns"
          :bold="false"
          :current="currentTab"
          :bar-width="80"
          :font-size="30"
          active-color="#1890FF"
          @change="changeColumn"
        ></u-tabs>
      </view>
    </u-sticky>
    <!-- 栏目TAB -->

 //栏目列表
      columns: [
        {
          name: "",
        },
      ],

五、关于吸顶Sticky错误 Cannot read property 'bottom' of null 的问题解决。

sticky组件创建了Observer监听，当切换页面且页面没有销毁（例如：tabbar页面）， sticky组件也没有销毁，自然beforeDestroy没有生效，导致组件仍然保持监听，所以出现Cannot read property 'bottom' of null报错。所以我们需要手动断开监听来解决这个报错，如果这个报错影响到了您。参考：https://github.com/YanxinNet/uView/issues/239

<template>
    <view>
        <!--  @property {Boolean} enable 是否开启吸顶功能（默认true）-->
        <u-sticky :enable="enable">
            <view>
                ……
            </view>
        </u-sticky>
    </view>
</template>
<script>
export default {
    data() {
        return {
            enable: true
        }
    },
    // 在对应的show和hide页面生命周期中打开或关闭监听
    onShow() {
        this.enable= true
    },
    onHide() {
        this.enable= false
    }
}
</script>

六、button按钮自定义样式去掉边框

button:after {  
    border: none;  
}