uniapp之实战踩坑笔记

uniapp坑之多可谓是漫天星辰，但既然踏上了这条贼船，你也只能是披荆斩棘一往无前。自小白接触此框架以来，踩过了无数坑，就在此进行一个记录，给后来者一些警示及经验。

后续会持续更新，因为坑无穷尽也。

tabbar没有双击事件咋办

• 双击刷新是现在很多平台搞出来的客户体验优化方案。但是uniapp没有钩子
  解决方案：模拟双击

// tabbar菜单点击事件
onTabItemTap(e) {
    // tab 点击时执行，此处直接接收单击事件
    if (this.tabClick) { // 200ms 内再次点击
        // 这里就是模拟的双击事件，可以写类似数据刷新相关处理
    }
    this.tabClick = true
    setTimeout(() => {
        this.tabClick = false // 200ms 内没有第二次点击，就当作单击
    }, 200)
},

上拉加载多次触发

• 当你上拉加载了很多后回到头部想要复原一下，比如下拉刷新回到原始数据。就会遇到这样的问题。原因是因为上拉加载钩子根据滚动距离来触发的，它会以为你滚动了很多次，要不然咋个在那个底下呢。
  最简单方案就是用uni.pageScrollTo({scrollTop:0});，回滚到头部后再做数据刷新。

小程序和苹果手机对v-show的不支持，要么不显示要么一直显示

• 无解，因为这是官方的bug，不知道那天能修复。
  最简单方案就是用v-if替代v-show，偶尔一些需要预先绑定事件的插件用到v-if就会报错。
  傻方案就是:style="条件 ? ' ': 'display: none;' "

Vue2才支持的$on $off $emit $once

初见以为是女神，真整起来发现不过如此
无非是封装了一个漏洞百出的全局钩子！！！说是可以组件数据通讯，其实一堆儿坑。
当你使用非除开原生返回路由和navigateTo以外当钩子时，都会无效！！也许是我太菜，大神们不知道有没有解决redirectTo跳转后无效的办法。
Vue3移除了！可能有了更好的替代方案。

使用

father.vue

<template>
    <view class="card-container">
        <view class="card-form">
            <u-form :model="dataForm" label-position="left" ref="dataForm" label-width="130rpx"
                :label-style="{'fontSize': '14px'}" :error-type="errorType">
                <u-form-item label="姓名" prop="name">
                    <u-input v-model="dataForm.name" maxlength="30" placeholder="请输入姓名" />
                </u-form-item>
                <u-form-item label="手机号" prop="phone">
                    <u-input v-model="dataForm.phone" maxlength="11" placeholder="请输入手机号" />
                </u-form-item>
            </u-form>
        </view>
        <view class="card-container-footer">
            <button @click="submit" class="footer-btn" type="default">提交</button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                dataForm: {
                    name: null,
                    phone: null
                },
            }
        },
        onUnload() {
            // 移除监听事件  
            uni.$off('setAddress');
        },
        onLoad() {
            uni.$on('setAddress', this.setAddress); // 绑定事件
        },
        methods: {
            async setAddress(dataForm) {
                this.dataForm = dataForm
            },
            // 提交修改或者保存
            async submit() {
            // 跳转去子路由
            }
        }
    }
</script>

child.vue

<template>
    <view class="card-container">
        <view class="card-container-footer">
            <button @click="setAddress" class="footer-btn" type="default">给父组件传值</button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            // 提交修改或者保存
            async setAddress() {
                let address = {
                    address: "测试双向绑定",
                    addressId: 12,
                    area: "测试双向绑定",
                    default: 1,
                    name: "zdf",
                    phone: "13412311233",
                }
                uni.$emit('setAddress', address);
                uni.navigateBack({
                    delta: 1
                });
                
            }
        }
    }
</script>