uni-app 内容切换时出现明显的删除减少过程 影响体验
uni-app 内容切换时出现明显的删除减少过程 影响体验
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：3.1.12
手机系统：Android
手机系统版本号：Android 11
手机厂商：华为
手机机型：荣耀20
页面类型：nvue
打包方式：云端
示例代码：
<template>
<view class="page">
<view class="top_tb row-wrap">
<view v-for="(item, index) in TabsList" @click.stop="TabLists(index,item.id)" >
<text :class="item.act" class="tb_txt">{{item.name}}</text>
</view>
</view>
<scroll-view :show-scrollbar="false" class="content" @scroll="scroll" :scroll-top="scrollTop" :style="{'height':xscroll}" :enableBackToTop="true" :scroll-y="true" @scrolltolower="loadMore()">
<view v-if="Bookitems.length==0"><text class="nomore">---我是有底线的---</text></view>
<view class="mycards" v-for="(item, index) in Bookitems" v-else>
<view class='xpanel' @click="showGitem(item)" >
<view class='xbox12'>
<image class="bookimg" :src="item.image"></image>
<text class="num" :class="item.idcls">{{index+1}}</text>
</view>
<view class='xbox3 mr_l'>
<view>
<text class="xh1">{{item.title}}</text>
</view>
<view>
<text class="xinfo">{{item.presentation}}</text>
</view>
<view class='atwolr'>
<text class='atwolr_fl iconfont' style='font-family:iconfont;'> {{item.author}}</text>
<text class='atwolr_fr'>{{item.type}}</text>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
var IsMoreData=true,BigMurl='/book/book2.json',TitleName='',nPage=1;
export default {
components:{
},
data() {
return {
nomore:false,
webtitle:'排行榜',
isfixed:'relative',
opacity:1,
titleBg:'#fff',
scrollTop: 0,
old: {
scrollTop: 0
},
xscroll:'',
TabsList:[
{"id":0,"name":'热销榜',"act":"active",url:"book/book2.json"},
{"id":1,"name":'新书榜',"act":"",url:"/book/book3.json"},
{"id":2,"name":'点击榜',"act":"",url:"/book/book2.json"},
{"id":3,"name":'更新榜',"act":"",url:"/book/book4.json"},
{"id":4,"name":'PK榜',"act":"",url:"/book/book5.json"},
{"id":5,"name":'免费榜',"act":"",url:"/book/book6.json"},
{"id":6,"name":'完结榜',"act":"",url:"/book/book4.json"},
{"id":7,"name":'礼物榜',"act":"",url:"/book/book5.json"}
],
Bookitems:[]
}
},
onLoad(e) {
uni.showLoading({
title: '加载中'
});
var Way = parseInt(e.catway);
var that = this;
BigMurl=this.TabsList[Way].url;
uni.setNavigationBarTitle({ title: TitleName });
this.TabLists(Way,'');
uni.getSystemInfo({
success: function (res) {
that.xscroll = res.windowHeight;
}
});
},
onPullDownRefresh() {
IsMoreData=false;
nPage=1;
this.loadData();
},
onNavigationBarButtonTap(e) {
uni.showToast({
title: e.index === 0 ? "你点了分享按钮" : "你点了收藏按钮",
icon: "none"
})
},
methods: {
loadData(IsMoreData) {
var Gurl = 'http://bycs.bailemi.com/'+BigMurl+'?page='+nPage
var that=this;
uni.request({
url: Gurl,
sslVerify: false,
success: (result) => {
if(IsMoreData){
that.Bookitems =that.Bookitems.concat(result.data.data);//追加到数据后面
}else{
that.Bookitems=[];
that.Bookitems =result.data.data;//追加到数据后面
}
uni.stopPullDownRefresh(); //拖拽刷新
uni.hideLoading();
},
fail: (err) => {
getApp().globalData.AllTips('出错了,请重试!');
},
complete: (e) => {
}
});
},
loadMore:function(item) {
nPage++;
this.loadData(true);
console.log('无限加载');
},
showGitem:function(itemdata){
uni.navigateTo({
url: '../../pages/bookinfo/bookinfo?query=' + encodeURIComponent(JSON.stringify(itemdata))
});
console.log('跳转简介');
},
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop;
},
TabLists:function(index,bid){
uni.showLoading({
title: '加载中'
});
var that=this;
for(var i = 0;i<this.TabsList.length;i++){
if(i==index){
this.TabsList[i].act='active';
BigMurl=this.TabsList[i].url;
}else{
this.TabsList[i].act='';
}
}
var NowName = this.TabsList[index].name;
uni.setNavigationBarTitle({
title: NowName
});
nPage=1;
this.loadData(false);
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
that.scrollTop = 0
});
}
}
}
</script>
<style>
/* #ifndef APP-PLUS */
page {
width: 100%;
min-height: 100%;
display: flex;
}
/* #endif */
.top_tb{
top: 0;
justify-content: center !important;
align-items: center !important;
position: fixed;
width: 750upx;
background-color: #fff;
}
.tb_txt,.active{
margin: 10px;
font-size: 30upx;
color: #666;
background-color: #fff;
border-radius: 50px;
padding: 5px 10px;
}
.active{
color: #fff;
background-color: #f47d9e;
}
.footer{
position: absolute;
top: 10px;
left: 0;
width: 750upx;
z-index: 100;
background-color: transparent;
}
.xfooter{
flex-direction:row;
}
.content{
padding-top: 180upx;
}
.bookimg{
width: 180upx;
height: 240upx;
}
.mr_l{
margin: 0;
}
.xh1{
lines: 2;
margin-bottom: 10px;
}
.xinfo{
lines: 2;
line-height: 46upx;
}
.xbox12{
position:relative;
}
.num{
position:absolute;
top: 10%;
left: 4.2%;
background-color: #aaa;
color: #fff;
padding: 2px 10px 2px 5px;
border-bottom-left-radius:0;
border-bottom-right-radius:20px;
border-top-left-radius:0;
border-top-right-radius:20px;
font-size: 28upx;
}
.num1{
background-color: #fd4377;
}
.num2{
background-color: #f60;
}
.num3{
background-color: #b81a46;
}
</style>
操作步骤：
请查看测试demo代码
预期结果：
直接清空，看不见移除过程。
实际结果：
出现删除过程，很影响体验。
bug描述：
声明数据列表，然后切换数据，清空的时候会出现删除过程。
请看这个是gif动图的“免费榜” 按钮 ：
更多关于uni-app 内容切换时出现明显的删除减少过程 影响体验的实战教程也可以访问 https://www.itying.com/category-93-b0.html
13 回复
相对nvue页面长列表形式推荐使用list，不要使用scroll-view 性能对比list较差
更多关于uni-app 内容切换时出现明显的删除减少过程 影响体验的实战教程也可以访问 https://www.itying.com/category-93-b0.html
回复 DCloud_Android_ST: 好像是3.1.6之前的版本，具体多少我忘了。直接是没问题的，因为这个是我之前就写好了的。后来写完这个APP内容，返回测试的时候，就出现这个问题了。
又是你，看到你好几次了，你终于贴了个代码出来，我大概试了一下确实是会出现删除的残影，估计是weex的渲染机制有问题，清空较多的列表数据不知道过程是怎样的，可能这个渲染机制清空在nvue上效果不好，你可以用别的方法先解决一下，虽然体验有点不好，但是起码解决现在的看不到残影。
你不是有做加载uni.showLoading吗，做个1秒的延迟的加载然后在渲染，我试了一下效果起码是暂时能把残影让别人看不到。这个估计是原生的nvue的这个渲染都有问题不会这么快解决的你先用别的办法先过度吧，体验差点就差点了，做程序能用就行，哈哈哈。
在data加个 BookitemsShow:true, //加个显示的控制
在页面列表做个控制显示的
弄个一秒延迟大概差不多了你也可以调久一点，或者你用别的方法去实现都差不多，你等修复这个nvue的渲染估计不太可能这么快的。
loadData(IsMoreData) {
uni.showLoading({
title: ‘加载中’
});
var Gurl = 'http://bycs.bailemi.com/’+BigMurl+’?page=’+nPage
var that=this;
uni.request({
url: Gurl,
sslVerify: false,
success: (result) => {
// var newBookitems = result.data.data;
// console.log(nPage+'我是榜单'+JSON.stringify(newBookitems));
// if(newBookitems.length==0 || newBookitems==''){
// uni.hideLoading();
// // that.Bookitems =[]
// that.nomore=true;
// return;
// }else{
// that.nomore=false;
// }
console.log(nPage+'我是榜单'+JSON.stringify(result.data.data));
if(IsMoreData){
that.Bookitems =that.Bookitems.concat(result.data.data);//追加到数据后面
}else{
if(result.data.data.length==0){
that.BookitemsShow = false
setTimeout(()=>{
that.Bookitems = []
uni.hideLoading();
},1000)
}else{
that.BookitemsShow = true
setTimeout(()=>{
that.Bookitems = []
that.Bookitems = result.data.data;//追加到数据后面
uni.hideLoading();
},1000)
}
}
uni.stopPullDownRefresh(); //拖拽刷新
},
fail: (err) => {
getApp().globalData.AllTips('出错了,请重试!');
},
complete: (e) => {
// console.log('什么是'+e);
}
});
},<br>
在nvue页面中，数据切换时出现明显的删除动画是由于nvue的渲染机制导致的。nvue基于原生渲染，数据变化时默认会执行原生动画效果。
解决方案是在切换数据时使用v-if替代v-else，并添加animation属性控制动画：
<scroll-view>
<view v-if="Bookitems.length === 0">
<text class="nomore">---我是有底线的---</text>
</view>
<view v-else animation="fadeOut" duration="300">
<view class="mycards" v-for="(item, index) in Bookitems" :key="item.id">
<!-- 内容 -->
</view>
</view>
</scroll-view>
或者在TabLists方法中切换数据时，先隐藏内容再更新数据：
TabLists: function(index, bid) {
// 先隐藏内容
this.Bookitems = [];
// 短暂延迟后加载新数据
setTimeout(() => {
uni.showLoading({title: '加载中'});
// ... 其他逻辑
this.loadData(false);
}, 50);
}
另外，确保给v-for循环添加唯一的:key属性，这能帮助nvue更高效地更新DOM：
<view class="mycards" v-for="(item, index) in Bookitems" :key="item.id">