UNI-APP开发中遇到的坑

news/2024/11/24 6:30:21/

UNI-APP开发中遇到的坑

  • 一、页面无法回退
    • 二、列表页面下拉刷新不显示数据

一、页面无法回退

在页面中我们一般会在顶部左侧放置一个返回按钮,用户点击返回按钮则关闭当前页面,返回上一层页面。

		<uni-nav-bar left-icon="back" title="添加设备" color="#fff" background-color="transparent" @clickLeft="toSuperior"></uni-nav-bar>
toSuperior() {uni.navigateBack({delta: 1});},

需求:当用户进行操作成功后,我们希望页面自动关闭,跳转回上一层页面。
我们在回调方法里这样写:

uni.showModal({content: "添加成功",showCancel: false,});that.superior();
superior() {uni.navigateBack({delta: 1});},

这样会导致,页面有时无法正常跳转,而点击页面的回退按钮也没有任何反应,页面卡住在当前页面。这是无法容忍的。原因:uni-app中showModel会阻碍 uni.navigateBack跳转。
改进:

uni.showModal({content: "添加成功",showCancel: false,confirmText:'确定',success:()=>{that.superior();},complete:()=>{that.superior();}});
superior() {uni.navigateBack({delta: 1});},

正常跳转!

二、列表页面下拉刷新不显示数据

举例,我们用如下代码展示一个列表:

<you-scroll ref="scroll" @onPullDown="onPullDown" @onScroll="onScroll" @onLoadMore="onLoadMore"><view class=""><scroll-view @scrolltolower="onLoadMore" @scrolltoupper="isToupper" :scroll-top="scrollTop"@scroll="scroll" style="height: 1400rpx;" scroll-y="true"><view class="item_box"><view class="item" v-for="item in dataList"  @click="toEquList(item)"><text class="icon iconfont left_icon">&#xe6bb;</text><view class="box_left"><view class="title">用户名:{{item.deptName}}</view>	 </view></view></view></scroll-view></view></you-scroll>
onPullDown(done) { // 下拉刷新// console.log("下拉刷新事件调用");this.toupperShow = false;setTimeout(() => {this.shows = true;this.LoadingMore = "努力加载中...";this.dataList = [];this.pageNum = 1;this.curPageNumCount = 0;this.totalNumCount = 0;this.getDataList();done(); // 完成刷新}, 1000 * 1)},getDataList (){let that = this;uni.request({url: this.config.apiHost + "/smoke/findMerchantById",method: 'POST',data: {"loginName": uni.getStorageSync('loginName'),"communityId": this.communityId,"merchantName": 	this.merchantName,"pageNum": this.pageNum,"pageSize": this.pageSize,},header: {'Authorization': uni.getStorageSync('accessToken'), //自定义请求头信息},success: (res) => {this.shows = false;console.log(res.data);var data = res.data;if (data.code==0) {data = data.data; // {}
=this.totalNumCount = data.total;let dataArr = data.rows;//[]that.curPageNumCount += dataArr.length;if(dataArr && dataArr.length>0){for(let i =0;i<dataArr.length; i++)that.dataList[that.dataList.length] = dataArr[i];}}}

问题:第一次进入页面,列表正常显示,下拉刷新后,列表消失。原因:数组赋值检测不到。解决方案:使用push给数组赋值或者如下方法。

改进:

that.dataList=[...that.dataList,...dataArr];

http://www.ppmy.cn/news/872407.html

相关文章

SpringBoot Cache 整合 Redis 缓存框架

文章目录 引入依赖配置 Redis启动类注解注解开发CacheableCachePutCacheEvict 注解属性cacheNames/valuekeykeyGeneratorconditionunlesscacheManagersync SpEL 表达式 SpringBoot 提供了 SpringBootCache 框架作为 SpringBoot 的缓存统一框架&#xff0c;使用 SpringBootCache…

WT19i刷机过程

1.安装手机驱动PC Companion&#xff1b; 2.在设置选项中&#xff0c;将sd卡卸载&#xff1b; 3.选择设置-应用程序-开发-USB调试模式&#xff0c;并将之激活 &#xff1b; 4.通过数据线连接手机和电脑&#xff1b; 5.运行SuperOneClick.exe&#xff0c;点击左上角的“Root”按…

扫地机洗地机语音芯片,WT2003H语音更换+LCD扩展的应用介绍

基于 WT2003H语音芯片在扫地机/洗地机语音更换LCD扩展的应用介绍 一、产品市场 随着家用电子设备的普及&#xff0c;各种智能化设备进入人们生活中&#xff0c;如洗地机、扫地机等&#xff0c;目前大多数扫地机和洗地机都加了音效提示音&#xff0c;以及人工提示音&#xff0…

WT2003S MP3解码芯片 语音芯片 KT403A VS1003替代

MP3解码芯片 一、WT2003S https://wenku.baidu.com/view/3388f7b825c52cc58ad6bec2.html 价格便宜的MP3解码芯片&#xff0c;单价3元人民币/PCS。 是VS1003的完美替代方案。 带USB接口。插上电脑&#xff0c;可以虚拟出U盘。这样就可以方便的更新音频文件。 带串口UART接…

用STM32F103读取WT31N的数据

1 准备工作 硬件设备&#xff1a;WT31N模块、六合一、USB-TTL、杜邦线、STM32F103C8T6单片机。给大家看下图片。 WT31NSTM32F103C8T62&#xff09;软件准备 &#xff1a; KEIL 5 (5.17版本的&#xff09; 链接&#xff1a;https://pan.baidu.com/s/1SEWmixu4jtUL2HH_3Hcn2g 提…

会定时提醒的贴心提示板之核心语音芯片(WT588F02B)和闹钟部件

概述 你是不是经常忘记做某些事情&#xff1f;你是不是经常沉浸在自己的工作中而错过了其他的工作&#xff1f;你是否想要一个没有手机干扰但是也不会错过任何事情的环境&#xff1f;这款基于WT588F02B-8S芯片带语音播放和闹钟提醒的的手写提示板方案或许能帮到你。 核心部件…

WT588F02KD-24SS语音芯片在电子烟的应用设计方案

随着社会的不断发展&#xff0c;人们对健康问题也是愈发的重视。而烟民也从传统烟民转变为电子烟民。年轻人作为电子烟民的主力军&#xff0c;追求时尚与炫酷成为电子烟的基本标准。 电子烟要求&#xff1a;电子产品必不可少的需要显示电量&#xff0c;以及追求时尚的一些灯光…

php 支付宝电脑支付宝,PHP语言学习之php 做支付宝电脑网站和app支付

本文主要向大家介绍了PHP语言学习之php 做支付宝电脑网站和app支付&#xff0c;通过具体的内容向大家展示&#xff0c;希望对大家学习php语言有所帮助。 首先支付宝的文档真是看得头晕眼花&#xff0c;摸不着北的感觉&#xff0c;网上百度PHP支付宝一堆都是花里胡哨的&#xff…