以下是我的代码,详细的报错截图在附件中。报如下错误:
- [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>