uniapp 填坑之旅---udb微信小程序端显示异常

news2024/9/28 21:21:56

功能描述:A页面展示列表a,点击a,进入B页面,展示a对象关联的子对象b。在B页面中,通过

unicloud-db组件manual模式加载,具体代码按照官网示例来写。

问题描述:代码实现后,一直在H5调试,显示正常。之后在微信小程序端,发现B页面第一次加载时,显示正常;在B页面返回A页面,再次点击a进入B页面时,页面显示空白(实际上不止是界面异常,由于部分对象为空,导致页面显示的时候,出现了个奇怪的is 错误,逐个排除后,发现这个问题无意义)。

问题推断:(1)最初以为是udb组件的问题,经过测试,发现数据返回正常

(2)之后推测是uni-list组件的问题,使用<p>标签,还是出现异常

(3)逐个调试,发现问题是:第一次加载页面时,先执行 onLoad事件,再执行页面渲染;第二次加载页面时,发现先执行了页面渲染,再执行onLoad事件。

问题解决:(1)上述问题(3),想办法更改事件执行顺序,或者想办法将页面B完全destroy,查了很多资料,尝试了很多办法,无果

(2)后来将页面写了一下,发现问题解决。两个页面的大体代码如下:

异常版:

<uni-card mode="basic">
            <view>
                <unicloud-db ref="udb2" v-slot:default="{data, loading, error, options}" collection="r-rbsh-task"
                    :where="sWhere" loadtime="manual">
                    <view v-if="error">{{error.message}}</view>
                    <view v-else>
                        <uni-list>
                            <uni-list-item v-if="data.length==0" title="暂未开始"></uni-list-item>
                            <uni-list-item v-else v-for="(item,index) in data" :title="test(item)"
                                wx:key="'r'+index.toString()" :key="'r'+index.toString()" link @click="showTskDeatail(item)" :note="item.state">
                            </uni-list-item>
                        </uni-list>
                    </view>
                </unicloud-db>
            </view>
        </uni-card>

正常版:

<unicloud-db ref="udb2" v-slot:default="{data, loading, error, options}" collection="r-rbsh-task"
            :where="sWhere" loadtime="manual">
            <uni-card mode="basic">
                <view v-if="error">{{error.message}}</view>
                <view v-else>
                    <uni-list>
                        <uni-list-item v-if="data.length==0" title="暂未开始"></uni-list-item>
                        <uni-list-item v-else v-for="(item,index) in data" :title="test(item)"
                            wx:key="'r'+index.toString()" :key="'r'+index.toString()" link @click="showTskDeatail(item)" :note="item.state">
                        </uni-list-item>
                    </uni-list>
                </view>
            </uni-card>
        </unicloud-db>

显示结果如上

两端代码差异:

异常段代码是将udb组件放入 uni-card块中,

正常段代码是将 uni-card组件放入udb块中

本帖子低质量极低,但是可以解决问题。

uniapp,希望坑可以少一些

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/139392.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Jmeter安装配置使用超详细教程(亲测有效)

文章目录1、Jmeter下载2、JDK安装3、Jmeter环境部署4、验证jmeter5、修改语言6、接口测试1、Jmeter下载 1.1、下载地址 http://jmeter.apache.org/download_jmeter.cgi 1.2、选择对应版本&#xff0c;本文以windows版本为例&#xff0c;版本号为5.5。 2、JDK安装 jmeter安装…

到底为什么那么多大厂在开始疯狂裁员?

最近几年大家都听到了好多大厂公司开始裁员&#xff0c;比如鹅厂、狗厂、鸟厂、熊厂等。 接下来给大家讲个故事&#xff0c;希望故事看完&#xff0c;你就会懂了&#xff01; 外国的神父呆了不久 留下几个 P 就走了&#xff0c; 一个 P 叫 BPR&#xff0c; 一个 P 叫 ERP。 …

作业1/4 设备树总结

1.什么是设备树 设备树&#xff08;Device Tree)是用来描述&#xff08;存储&#xff09;硬件信息的一种树形结构&#xff0c;设备树在linux内核启动的时候传递给内核被内核解析&#xff0c;用来描述设备信息的一种方式&#xff08;地址&#xff0c;中断号...&#xff09;。设备…

《收获,不止Oracle》表的设计之五朵金花

表设计主要强调什么场合该选择什么技术&#xff0c;没有最高级的技术&#xff0c;只有最适合的技术。 1.表的特性 普通堆表的不足之处 1.查看产生多少日志 [oracleoracle-db-19c ~]$ sqlplus / as sysdbaSQL*Plus: Release 19.0.0.0.0 - Production on Wed Jan 4 14:27:13 20…

电商数据监测的应用价值——国内吸尘器行业数据浅析

随着科技的发展与居民生活水平的提高&#xff0c;吸尘器进入日常生活&#xff0c;成为了常见家用清洁用具之一。2022年上半年&#xff0c;吸尘器市场零售额达145亿元&#xff0c;同比增速达14.0%&#xff0c;零售量1008万台&#xff0c;同比下跌2.8%。&#xff08;数据来源&…

Hadoop HA高可用

文章目录Hadoop HA高可用1.1 HA概述1.2 HDFS-HA工作机制1.2.1 HDFS-HA工作要点1.2.2 HDFS-HA自动故障转移工作机制1.3 HDFS-HA集群配置1.3.1 环境准备1.3.2 规划集群1.3.3 配置Zookeeper集群1&#xff09;集群规划2&#xff09;解压安装3&#xff09;配置zoo.cfg文件4&#xff…

药品需求加大,蒸汽发生器等制药设备该如何快速有效地进行维护?

一、行业背景药品的生产与制造的每一道关卡都是十分严格的&#xff0c;一方面&#xff0c;涉及到化工污染问题&#xff0c;制药的废气一旦没有得到妥善处理&#xff0c;则会危及到周边居民以及企业工作人员的健康。另一方面&#xff0c;药品本着治病救人的原则&#xff0c;其品…

[Android]序列化原理Serializable

引入 我们知道&#xff0c;当一个程序终止时&#xff0c;这个程序创建的对象也会随着程序终止&#xff0c;那么我需要如何做才能不受其他程序的状态影响并且可以得到其他程序创建的对象状态呢&#xff1f;这时候我们就可以使用Serializable来进行序列化把对象持久化到存储设备上…

【服务器数据恢复】断电导致服务器故障的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌服务器&#xff0c;12块硬盘组成raid5磁盘阵列&#xff0c;存储普通文件。 服务器故障&#xff1a; 机房供电不稳定导致服务器断电&#xff0c;管理员重启服务器后发现服务器无法正常使用。 根据用户描述&#xff0c;北亚服务器数据恢复工…

使用vscode在CMake工程中集成gtest共享库进行单元测试

使用vscode在CMake工程中集成gtest共享库做单元测试一、概述二、工程内容清单三、CMakeLists.txt内容说明四、构建工程一、概述 本文主要介绍如何在一个多层次目录结构的CMAKE工程中以共享库的形式集成gtest进行单元测试。 关于如何使用CMake管理多层次目录结构的CMake工程&a…

FFmpeg 解复用实战

1.封装格式相关函数 avformat_alloc_context()&#xff1a;负责申请一个AVFormatContext结构的内存,并进行简单初始化&#xff0c;这个函数可以不用手动调用&#xff0c;内部会自动调用。 avformat_free_context()&#xff1a;释放该结构里的所有东西以及该结构本身&#xff0…

再学C语言24:分支和跳转——逻辑运算符和条件运算符

一、多重选择else if 功能&#xff1a;在两个以上的语句中作出选择 示例代码&#xff1a; #include <stdio.h> int main(void) {float score;printf("Please enter your score: \n");scanf("%f", &score);if(score < 60)printf("不及…

SSM基础整合

SSM基础整合 文章目录SSM基础整合[toc]SSM基础整合SSM整合流程表现层数据封装设置统一数据返回结果类定义code类优化Controller优化后的返还结果异常处理器异常处理项目异常处理方案项目异常分类处理SSM基础整合 SSM整合流程 创建工程 SSM整合 Spring SpringConfig Configur…

CAS 的使用场景 CAS的ABA问题的优化 以及 synchronized 的三大优化

目录 &#x1f388;专栏链接:多线程相关知识详解 一.什么是CAS 二.CAS最常用的两个场景 Ⅰ.实现原子类 Ⅱ.实现自旋锁 三.CAS的ABA问题 四.优化解决CAS的ABA问题 五.synchronized的优化 Ⅰ.锁升级/锁膨胀 Ⅱ.锁消除 Ⅲ.锁粗化 一.什么是CAS CAS&#xff08;Compar…

p2深度学习基本概念简介下笔记

3. 第 1 讲&#xff1a;深度学习基本概念简介下_哔哩哔哩_bilibili 线性模型太简单&#xff0c;我们需要比较复杂的模型。 不管怎样弄&#xff0c;蓝色描述不出红色的线 强调model bias 无法模拟真实的状况 写出一个有未知参数更复杂的model 观察红色的曲线 &#xff1a;可…

你知道数据在内存中是如何存储的嘛?

&#x1f996;作者&#xff1a;学写代码的恐龙 &#x1f996;博客主页&#xff1a;学写代码的恐龙博客主页 &#x1f996;专栏&#xff1a;【初级c语言】 &#x1f996;语录&#xff1a;❀未来的你&#xff0c;一定会感谢现在努力奋斗的自己❀ 深度剖析数据在内存中的存储一、…

数据结构精讲——排序(二)

数据结构精讲——排序&#xff08;二&#xff09; 排序的分类 上节课我们已经了解过插入排序和选择排序&#xff0c;这节课主要讲的是快排排序&#xff0c;冒泡排序应该都很熟悉&#xff0c;少提一下吧。 冒泡排序 冒泡排序是我们刚接触编程时就学习的排序方法&#xff08;还…

达梦数据库实施、运维与使用经验(一)

一、使用Xshell输入Insert语句&#xff0c;回车执行系统没反应 问题解决思路 查下数据库的活动会话数并登录数据库服务器看数据库的资源负载 select * from v$sessions where stateACTIVE;在数据库Xshell中输入语句查询数据库磁盘是否满了 df -lh上图中的第一个命令是用来查…

C++的IO流

目录 1. 流是什么 2. CIO流 2.1 C标准IO流 2.2 C文件IO流 2.2.1 简单读取文件流 2.2.2 C读取文件巧妙之处 3. stringstream的简单介绍 1. 流是什么 “流”即是流动的意思&#xff0c;是物质从一处向另一处流动的过程&#xff0c;是对一种有序连续且具有方向性的数据&am…

【我的渲染技术进阶之旅】关于OpenGL纹理压缩的相关资料

文章目录一、为啥要了解压缩纹理1.1 为啥要使用压缩纹理1.2 如何自定义压缩纹理以及使用压缩纹理的效果1.2.1 使用压缩纹理节省显存1.2.2 自定义压缩纹理&#xff1a;将压缩好的纹理数据保存在本地1.2.3 使用自定义的压缩纹理1.2.3 示例原理二、纹理压缩相关知识2.0 什么是压缩…