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];