y***@163.com
y***@163.com
  • 发布:2023-10-03 08:57
  • 更新:2023-10-07 10:42
  • 阅读:333

【报Bug】unicloud-db 使用loadtime失效,数据没加载就开始执行

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows10家庭中文版19042.1348

HBuilderX类型: 正式

HBuilderX版本号: 3.8.12

第三方开发者工具版本号: 1.06.2308310

基础库版本号: 不知道去哪查

项目创建方式: HBuilderX

操作步骤:

如上代码

预期结果:

不报错,数据正常加载

实际结果:

报错后,数据正常加载

bug描述:

  • 使用环境:微信小程序
  • hbuilderx版本:3.8.12.20230817

以下是我的代码,详细的报错截图在附件中。报如下错误:

  • [Vue warn]: Property "swhere" was accessed during render but is not defined on instance.
  • vendor.js? [sm]:3106 TypeError: Cannot read property 'details' of undefined

经过我的分析,感觉是loadtime失效,数据还没有加载就开始执行unicloud-db

<template>  
    <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="goods" :where="swhere"  
        :getone="true" loadtime="manual">  
        <view class="details">  
            <!-- 商品图 -->  
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">  
                <swiper-item v-for="(url,index) in data.details.swiperImgs" :key="index">  
                    <view class="swiper-item">  
                        <image :src="url" class="swiper-img" mode=""></image>  
                    </view>  
                </swiper-item>  
            </swiper>  
            <!-- 信息 -->  
            <view class="details-goods">  
                <view class="goods-oprice">¥500</view>  
                <view class="goods-pprice">¥200</view>  
                <view class="goods-name">90分钟spa</view>  
            </view>  
            <!-- 商品详情图 -->  
            <view>  
                <view>  
                    <image class="details-img" src="@/static/img/introduce-spa1.jpg" mode=""></image>  
                    <image class="details-img" src="@/static/img/introduce-spa2.jpg" mode=""></image>  
                    <image class="details-img" src="@/static/img/introduce-spa3.jpg" mode=""></image>  
                </view>  

            </view>  
            <!-- 底部 -->  
            <view class="details-foot">  
                <view class="iconfont icon-31xiaoxi"></view>  
                <view class="iconfont icon-gouwuche"></view>  
                <view class="add-shopcart" @tap="showPop">加入购物车</view>  
                <view class="purchase" @tap="showPop">立即购买</view>  
            </view>  
            <!-- 底部弹出层 -->  
            <view class="pop" v-show="isShow" @touchmove.stop.prevent="">  
                <!-- 蒙层 -->  
                <view class="pop-mask" @tap="hidePop"></view>  
                <!-- 内容块 -->  
                <view class="pop-box" :animation="animationData">  
                    <view>  
                        <image class="pop-img" src="../../static/img/commodity1.jpg" mode=""></image>  
                    </view>  
                    <view class="pop-num">  
                        <view>数量</view>  
                        <uNumberBox :min="1" :value="1" />  
                    </view>  
                    <view class="pop-sub">确定</view>  
                </view>  
            </view>  
        </view>  
    </unicloud-db>  
</template>  

<script>  
    import uNumberBox from "@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue"  
    export default {  
        components: {  
            uNumberBox  
        },  
        onLoad(e) {  
            this.goodsId = e.id;  
            this.sWhere = "_id=='" + this.goodsId + "'"  
            this.$nextTick(() => {  
                this.$refs.udb.loadData()  
            })  
        },  
        data() {  
            return {  
                isShow: false,  
                goodsId: "",  
                swere: "",  
                animationData: {},  
                swiperList: [{  
                        "imgUrl": "../../static/img/commodity1.jpg",  
                    },  
                    {  
                        "imgUrl": "../../static/img/commodity2.jpg",  

                    },  
                    {  
                        "imgUrl": "../../static/img/commodity3.jpg",  

                    }  
                ]  

            }  
        },  
        // 微信小程序无效!其他平台有效  
        // 为什么有这个方法?当页面弹出时,点击左上角返回会直接返回到首页,因此需要重写返回行为,点击返回时关闭弹出页面(不返回首页)  
        onBackPress() {  
            if (this.isShow) {  
                this.hidePop();  
                return true;  
            }  
        },  
        methods: {  
            showPop() {  
                var animation = uni.createAnimation({  
                    duration: 200  
                });  
                animation.translateY(600).step();  
                this.animationData = animation.export();  
                this.isShow = true;  
                setTimeout(() => {  
                    animation.translateY(0).step();  
                    this.animationData = animation.export();  
                }, 200)  
            },  
            hidePop() {  
                var animation = uni.createAnimation({  
                    duration: 200  
                });  
                animation.translateY(600).step();  
                this.animationData = animation.export();  
                setTimeout(() => {  
                    animation.translateY(0).step();  
                    this.isShow = false;  

                }, 200)  
            }  
        }  
    }  
</script>
2023-10-03 08:57 负责人:无 分享
已邀请:
DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

  1. data 中声明了 swere,实际赋值 sWhere,检查代码变量命名是否正确
  2. 没加载数据前 v-slot:default="{data, loading, error, options}" datanull, 应先判断是否为 null 在读取 details
    <template>  
    <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="goods" :where="swhere"  
    :getone="true" loadtime="manual">  
    <view class="details" v-if="data">  
    </view>  
    </unicloud-db>  
    </template>
y***@163.com

y***@163.com (作者)

swhere 是一个问题但是不是主要问题。我实际测试中发现,微信小程序是不是有即时加载功能,即先渲染再加载数据!

要回复问题请先登录注册