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"></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];
)
)
