不断更新uniapp遇到的坑

Posted 2021-09-14 悠闲放松

如果要用到条件编译, 逗号必须写在条件编译里面

{
            "path": "pages/tabbar/home/home",
            "style": {
                "navigationBarTitleText": "渔书" // 不写逗号
                    // #ifdef APP-PLUS || H5
                    , // 逗号的位置
                "navigationStyle": "custom"
                // #endif
            }
        }

swiper组件有默认150px的高度, 可以通过:style="{\'height\': 变量 + \'rpx\'}"来动态修改高度

onReachBottom()函数与生命周期函数平级, 用于监听滑动页面至底部时触发, 官方文档说明位置不明显

ref获取节点的方式只在H5端可用, 如果想要多端编译需要使用以下方式, 官方文档写的非常难懂, 以下是我目前的理解

// 这行代码不用管
uni.createSelectorQuery()
// 在哪个组件中获取节点
.in(this)
// 选择器 用法类似querySelector
.selectAll(\'name\')
// 该函数用来接受数据
.boundingClientRect(function(data) {
    console.log(data)
}
.bind(this))
// 执行所有请求, 并把结果构成数组
.exec()

非H5端，手机顶部状态栏区域会被页面内容覆盖, 官方的解决方法在滑动页面时会消失, 解决方法如下

<!--  html -->
<!--  #ifndef  MP -->
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<!--  #endif -->

/* CSS */
/* #ifndef MP */
.status_bar {
    position: sticky;
    top: 0;
    z-index: 9999999;
    height: var(--status-bar-height);
    width: 100%;
    background-color: #6bb0b2;
}
/* #endif */