What Can I Do If My Quick App Stutters While Scrolling?

#huawei #android #quickapp

When a quick app loads 100 records or more at a time, the screen will freeze when the user scrolls up or down on the page.

	<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 the next page.
	var that = this
	var renderData = [].concat(that.listData, that.listAdd)
	setTimeout(function () {
	that.listData = renderData
	}, 1000)
	},

	// The stuttering is monitored when a user slides the page.
	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>

view raw shutter.ux hosted with ❤ by GitHub

The code above uses the list and list-item elements to load a large amount of data. However, the element usage is improper and an exception occurs, so the views for list-item fail to be reused.

Huawei Quick App Loader is an APK file, and the list and list-item elements are implemented using ListView and BaseAdapter from Android. Therefore, the loader does not create a view for the content beyond the screen range, but instead reuses existing views and refreshes them. The view of each row is actually a list-item.

The code above only contains a single list-item element, and a view is created each time that the for loop is executed. When a large amount of data needs to be processed, more memory space is needed, which can undermine app performance, even causing the app to stutter.

Solution

You should exercise caution when using the if or for statement for list-item. You can set different types for list-items, reuse list-items as much as possible, and use for in list-items.

	<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 item-color" onclick="listItemClick"
	for="{{listData}}">
	<text class="txt">{{$item}}--{{$idx}}</text>
	</list-item>

	<!-- <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>

view raw fixed.ux hosted with ❤ by GitHub

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.