武胜网站建设,公司网站建设方案详细方案模板,淄博人才网官网首页,itmc电子商务网店运营推广【关键词】
list组件、滑动方向、scroll 【问题背景】
有cp反馈list这个组件在使用的时候#xff0c;不知道如何区分它是上滑还是下滑。 【问题分析】
list组件除了通用事件之外#xff0c;还提供了scroll、scrollbottom、scrolltop、scrollend、scrolltouchup事件#x… 【关键词】
list组件、滑动方向、scroll 【问题背景】
有cp反馈list这个组件在使用的时候不知道如何区分它是上滑还是下滑。 【问题分析】
list组件除了通用事件之外还提供了scroll、scrollbottom、scrolltop、scrollend、scrolltouchup事件对应的描述如下图所示 要想知道list组件的滑动方向我们可以在它提供的scroll方法中通过scrollX的值的正负来判断水平滑动的方向左滑为正右滑为负通过scrollY的值的正负来判断竖直滑动的方向上滑为正下滑为负。
【具体实现】
代码如下
templatediv classcontainerlist classlst onscrollscrollClicklist-item typelist-item forswiperDatatext classtxt{{$item}}/text/list-item/list/div/templatestyle.lst {flex-direction: row;}.txt {text-align: center;width: 750px;height: 100%;border: 1px solid #000000;}/stylescriptmodule.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值如下图所示
