关于appgallery-connect:如何解决快应用页面滑动卡顿问题
问题景象 页面一次加载了100条数据,页面滑动呈现卡顿。 问题代码 <template> <div class="container"> <div class="nav"> <text class="nav-item">list</text> </div> <!-- List --> <list class="list" onclick="listClick" onlongpress="listLongPress" onscrollbottom="scrollbottom" id="list" scrollpage="{{scrollPage}}"> <list-item type="listItem" class="item" onclick="listItemClick" if="{{listData.length>0}}"> <div for="{{listData}}" style="flex-direction:column;"> <text class="txt">{{$item}}--{{$idx}}</text> </div> </list-item> <!-- Loading More --> <list-item type="loadMore" class="load-more" if="{{loadMore}}"> <progress type="circular"></progress> <text>More</text> </list-item> </list> </div></template><style> .container{ flex-direction: column; } .list { padding-left: 10px; padding-right: 10px; columns: 1; flex-direction: column; border-color: #FF0000; border-width: 5px; } .item { flex-direction: column; align-items: flex-start; margin-bottom: 15px; border-color: #9400D3; border-width: 5px; margin-right: 20px; background-color: #f76160; } .load-more { justify-content: center; align-items: center; height: 100px; border-color: #bbbbbb; border-bottom-width: 1px; } .btn-little { flex: 1; height: 80px; margin-left: 15px; border-radius: 5px; color: #ffffff; font-size: 30px; text-align: center; background-color: #0faeff; } .nav { padding-left: 60px; padding-right: 60px; padding-bottom: 30px; } .nav-item { flex: 1; padding-bottom: 30px; border-bottom-width: 5px; border-color: #fbf9fe; font-size: 35px; color: #666666; text-align: center; } </style><script> import prompt from '@system.prompt' export default { data: { componentName: 'list', loadMore: true, listAdd: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'], listData: [], scrollPage: false, }, onInit: function () { this.$page.setTitleBar({ text: 'list' }) for(var index = 0;index < 100;index++){ this.listData[index] = 'A'; } }, scrollbottom: function () { prompt.showToast({ message: 'The list slides to the bottom and starts loading other data.' }) // Load next page var that = this var renderData = [].concat(that.listData, that.listAdd) setTimeout(function () { that.listData = renderData }, 1000) }, // monitoring during sliding scroll: function (e) { let msg = 'scroll' + '.scrollX:' + e.scrollX + ' .scrollY:' + e.scrollY + ' .scrollState:' + e.scrollState console.info(msg) }, listItemClick: function (e) { e.stopPropagation() console.info('List Item is clicked.') prompt.showToast({ message: 'List Item is clicked.' }) }, listClick: function (e) { e.stopPropagation() console.info('List is clicked.') prompt.showToast({ message: 'List is clicked.' }) }, listLongPress: function (e) { e.stopPropagation() console.info('List is long pressed.') prompt.showToast({ message: 'List is long pressed.' }) }, }</script>问题剖析以上代码应用list、list-item来加载大规模数据,然而应用办法不当,导致list-item的视图view没有被复用。 ...