【快应用】list组件如何区分滑动的方向?

 【关键词】

list组件、滑动方向、scroll

【问题背景】

有cp反馈list这个组件在使用的时候,不知道如何区分它是上滑还是下滑。

【问题分析】

list组件除了通用事件之外,还提供了scroll、scrollbottom、scrolltop、scrollend、scrolltouchup事件,对应的描述如下图所示:

cke_504.png

要想知道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.scrollState

      console.info(msg)

    }

  }

</script>

打印scrollY值如下图所示:

cke_1676.png

打印scrollX值如下图所示:

cke_2732.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/64824.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ArduPilot开源飞控之MAVProxy简介

ArduPilot开源飞控之MAVProxy简介 1. 源由2. 特点3. 安装 & 更新3.1 安装Step 1: 烧录raspberryPi镜像Step 2&#xff1a;apt软件包更新Step 3&#xff1a;Raspian系统更新Step 4&#xff1a;安装依赖环境Step 5&#xff1a;安装mavproxyStep 6&#xff1a;配置bash环境 3.…

后台管理系统

1.1 项目概述 简易后台管理系统是一个基于Vue3ElemrntPlus的后台管理系统&#xff0c;提供了用户登录、记住密码、数据的增删改查、分页、错误信息提示等功能&#xff0c;旨在协助管理员对特定数据进行管理和操作。 没有后台对接&#xff0c;数据源为假数据。 全部代码已上传G…

关于HIVE的分区与分桶

1.分区 1.概念 Hive中的分区就是把一张大表的数据按照业务需要分散的存储到多个目录&#xff0c;每个目录就称为该表的一个分区。在查询时通过where子句中的表达式选择查询所需要的分区&#xff0c;这样的查询效率会提高很多 个人理解白话:按表中或者自定义的一个列,对数据进…

整理mongodb文档:集合名字有类似-等特殊字符串如何处理?

个人博客 整理mongodb文档:集合名字有类似-等特殊字符串如何处理&#xff1f; 首先&#xff0c;先创建一个collection的名字为’collection-test’&#xff0c;这个表名中&#xff0c;colletion的名字有一个特殊字符串“-”&#xff0c;但是后面插入数据的时候会有这么一个错…

rk3399移植linux kernel

rk3399移植linux kernel 0.前言一、移植ubuntu根文件系统二、移植linux1.支持NFS(可选)2.配置uevent helper3.支持etx4文件系统(默认已支持)4.配置DRM驱动5.有线网卡驱动6.无线网卡驱动 三、设备树四、内核镜像文件制作五、烧录六、总结 参考文章&#xff1a; 1.RK3399移植u-bo…

无涯教程-Perl - defined函数

描述 如果 EXPR 的值不是undef值,则此函数返回true&#xff1b;如果未指定 EXPR ,则检查$_的值。它可以与许多功能一起使用以检测操作失败,因为如果出现问题,它们将返回undef。简单的布尔测试不会区分false,零,空字符串或字符串.0。 如果 EXPR 是函数或函数引用,则在定义函数…

第八篇: K8S Prometheus Operator实现Ceph集群企业微信机器人告警

Prometheus Operator实现Ceph集群企业微信告警 实现方案 我们的k8s集群与ceph集群是部署在不同的服务器上&#xff0c;因此实现方案如下&#xff1a; (1) ceph集群开启mgr内置的exporter服务&#xff0c;用于获取ceph集群的metrics (2) k8s集群通过 Service Endponit Ser…

推荐5本软件测试人员必读经典书籍

学会选择对的学习方法 俗话说&#xff1a;“选择大于努力”。 初学软件测试也如此。很多刚入行测试的同学最容易陷入一个误区&#xff0c;那就是优先买一堆视频来学习。结果时间过去了&#xff0c;视频仅以形式主义存在电脑的硬盘里&#xff0c;从此走上了入门到放弃之路。 …

TCP/IP四层模型对比OSI七层网络模型的区别是啥?数据传输过程原来是这样的

一、TCP/IP四层模型对比OSI七层模型 它们两个定义的一些功能和协议都是差不多的。TCP/IP四层协议模型比我们的七层少了三层&#xff0c;把我们的数据链路层和物理层放在一层里面了&#xff0c;叫做数据链路层&#xff08;网络接口层&#xff09;&#xff0c;对应网络协议也没有…

CNN成长路:从AlexNet到EfficientNet(02)

一、说明 在~10年的深度学习中&#xff0c;进步是多么迅速&#xff01;早在 2012 年&#xff0c;Alexnet 在 ImageNet 上的准确率就达到了 63.3% 的 Top-1。现在&#xff0c;我们超过90%的EfficientNet架构和师生训练&#xff08;teacher-student&#xff09;。 二、第一阶段 …

c++:day4

1.思维导图 2.shell函数获取uid和gid&#xff0c;并用变量接 #!/bin/bashfunction fun() {read -p "输入用户名" necho uid:id -u $necho gid:id -g $n } afun echo $a3.冒泡、选择和快排代码整理 /**************************************************************…

【MATLAB第66期】#源码分享 | 基于MATLAB的PAWN全局敏感性分析模型(有条件参数和无条件参数)

【MATLAB第66期】#源码分享 | 基于MATLAB的PAWN全局敏感性分析模型&#xff08;有条件参数和无条件参数&#xff09; 文献参考 Pianosi, F., Wagener, T., 2015. A simple and efficient method for global sensitivity analysis based on cumulative distribution functions.…

【具身智能】系列论文解读(CoWs on PASTURE VoxPoser Relational Pose Diffusion)

0. My Conclusion CoWs on PASTURE&#xff1a; 擅长零样本的视觉语言对象导航&#xff0c;主要解决了LLM辅助下的任务级动作执行任务VoxPoser&#xff1a; 擅长设计一些未预定义的动作轨迹&#xff0c;主要解决了LLM辅助下的动作轨迹设计任务Relational Pose Diffusion&#…

【使用基于二阶积分器的结构生成正交信号】基频共振而无延迟地滤波信号的正交信号生成模块,为单相系统创建 α/β 信号(Simulink实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

python人工智能可以干什么,python人工智能能干什么

大家好&#xff0c;给大家分享一下python做人工智能需要什么水平&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 人工智能包含常用机器学习和深度学习两个很重要的模块&#xff0c;而python拥有matplotlib、Numpy、sklearn、keras等大量的…

人民日报点赞!十大央媒争相报道,星恒守护民生安全出行二十年

围绕电动自行车锂电池的安全性话题&#xff0c;甚至说争议&#xff0c;在近期有了权威定调。 就在7月底&#xff0c;“民生出行&#xff0c;安全为本——电动自行车锂电安全调研座谈会”在北京人民日报社举行&#xff0c;国家监管部门、行业协会、检验院所的权威领导专家&#…

Bean的Aware接口

Aware 简介 Spring中提供了一些以Aware结尾的接口&#xff0c;实现了Aware接口的bean在被初始化之后&#xff0c;可以获取相应资源。比如BeanNameAware之类的以Aware结尾的接口&#xff0c;这个接口获取的资源就是以BeanName相关的。 通过Aware接口&#xff0c;可以对Spring相…

k8s之Pod控制器

目录 一、Pod控制器及其功用二、pod控制器的多种类型2.1 pod容器中的有状态和无状态的区别 三、Deployment 控制器四、SatefulSet 控制器4.1 StatefulSet由以下几个部分组成4.2 为什么要有headless&#xff1f;4.3 为什么要有volumeClaimTemplate&#xff1f;4.4 滚动更新4.5 扩…

Mongodb 安装

一、win10安装 服务端下载地址&#xff1a;Download MongoDB Community Server | MongoDB shell 工具下载地址&#xff1a;MongoDB Shell Download | MongoDB 服务端安装时选择custom&#xff0c;否则安装文件没有bin目录。 将安装后的文件中的bin目录加到环境变量。 设置…

echarts中如何给柱状图增加滚动条

需求:当后台传递过来的数据过多的时候 页面的柱图就会很拥挤 如下图: 所以我们需要有一个横向的滚动条,让所有的柱子都能够展示 1.echarts中有一个dataZoom属性 可以给图形增加一个横向的滚动条 dataZoom:[ {type: slider, //滑动条型数据区域缩放组件realtime: true, //拖动…