【Key words】
list component, sliding direction, scroll
【Problem background】
When the cp feedback list component is used, I don't know how to distinguish whether it is sliding up or down.
【problem analysis】
In addition to common events, the list component also provides scroll, scrollbottom, scrolltop, scrollend, scrolltouchup events, and the corresponding descriptions are shown in the figure below:
To know the sliding direction of the list component, we can use the scroll method provided by it to determine the direction of horizontal sliding by the positive or negative value of scrollX. Left sliding is positive and right sliding is negative; the value of scrollY is positive or negative. Determine the direction of the vertical slide, up is positive and down is negative.
【Implementation】
code show as below:
<template>
<div class="container">
<list class="lst" onscroll="scrollClick">
<list-item type="list-item" for="swiperData">
<text class="txt">{
{$item}}</text>
</list-item>
</list>
</div>
</template>
<style>
.lst {
flex-direction: row;
}
.txt {
text-align: center;
width: 750px;
height: 100%;
border: 1px solid #000000;
}
</style>
<script>
module.exports = {
data: {
swiperData: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']
},
onInit() {
this.$page.setTitleBar({ text: 'swiper' })
},
scrollClick(e) {
let msg = " 滑动中 " + '.scrollX:' + e.scrollX
+ ' .scrollY:' + e.scrollY
+ ' .scrollState:' + e.scrollState
console.info(msg)
}
}
</script>Print the scrollY value as shown in the figure below:
Print the scrollX value as shown in the following figure:
