?【關鍵詞】

list組件、滑動方向、scroll

【問題背景】

有cp反饋list這個組件在使用的時候，不知道如何區分它是上滑還是下滑。

【問題分析】

list組件除了通用事件之外，還提供了scroll、scrollbottom、scrolltop、scrollend、scrolltouchup事件，對應的描述如下圖所示：

要想知道list組件的滑動方向，我們可以在它提供的scroll方法中，通過scrollX的值的正負來判斷水平滑動的方向，左滑為正右滑為負；通過scrollY的值的正負來判斷豎直滑動的方向，上滑為正下滑為負。

【具體實現】

代碼如下：

<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.scrollStateconsole.info(msg)}}</script>

打印scrollY值如下圖所示：

打印scrollX值如下圖所示：