不断更新uniapp遇到的坑

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

{
            "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 */

scroll-view标签在横向滑动时 要在该标签上增加white-space: nowrap;
还需给其子标签添加display: inline-block;

在swiper组件中使用background-image渲染图片 有概率在滑动后后面的图片会出现空白 替换为image标签后恢复正常