HarmonyOS开发之Swiper的使用(跳转到指定索引的方法)

news2024/9/24 1:18:03

一,效果图

class MyDataSource implements IDataSource {
  private list: number[] = []
  private listener: DataChangeListener

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): any {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listener = listener
  }

  unregisterDataChangeListener() {
  }
}

// 测试用例
@Entry
@Component
struct SwiperExamplePage1 {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])
  @State currentIndex: number = 0; // 用于存储当前的索引
  aboutToAppear(): void {
    let list = []
    for (var i = 1; i <= 10; i++) {
      list.push(i.toString());
    }
    this.data = new MyDataSource(list)
  }

  onPageShow(){
    this.navigateToIndex(5)
  }
  // 实现跳转到指定索引的方法
  navigateToIndex(index: number): void {
    const difference = index - this.currentIndex; // 计算差值

    if (difference > 0) {
      for (let i = 0; i < difference; i++) {
        this.swiperController.showNext(); // 向右滑动
      }
    } else if (difference < 0) {
      for (let i = 0; i < Math.abs(difference); i++) {
        this.swiperController.showPrevious(); // 向左滑动
      }
    }
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)
        }, item => item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .indicator(true)
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .curve(Curve.Linear)
      .onChange((index: number) => {
        this.currentIndex=index
        console.info(index.toString())
      })

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {

          })
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious()
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

svg图标的使用

图片的格式有很多&#xff0c;前端经常使用的有以下类型:jpg,jpeg,png,gif,svg,这篇文章将简单svg的情况&#xff0c;以及项目中如何使用和配置svg图标 目录 什么是svg图标 SVG图标的优缺点 优点 缺点 svg前端使用场景 SVG在代码中的使用 简单使用创建svg 作为图标引入…

注册网站怎么注册

网站注册成为我们日常生活中不可或缺的一部分。无论是社交媒体、电子商务平台还是各种在线服务&#xff0c;注册都是参与这些平台的第一步。下面将为您详细介绍一般网站注册的步骤&#xff0c;帮助您轻松完成注册过程。 1. 选择合适的网站 在注册之前&#xff0c;首先要确定您…

使用kubeadm部署k8s集群

1、简介 K8s部署主要有两种方式&#xff1a; 1、Kubeadm Kubeadm是一个K8s部署工具&#xff0c;提供kubeadm init和kubeadm join&#xff0c;用于快速部署Kubernetes集群。 2、二进制 从github下载发行版的二进制包&#xff0c;手动部署每个组件&#xff0c;组成Kubernetes集…

通过 汇编 分析 结构体

不使用结构体的情况&#xff0c; 网上的资料&#xff1a; 使用结构体的情况 总结 ; 使用 结构体之后&#xff0c; 会节省汇编的 ldr 指令&#xff0c; 结构体 就直接使用 偏移量 来 对变量进行赋值了。 注意 &#xff1a; 这里 结构体 依然是一个全局变量。

CentOS7 安装配置Maven

一、Maven介绍 Apache Maven 是一个 Java 项目的构建自动化工具&#xff0c;主要用于构建、依赖管理和项目信息管理。Maven 使用一种称为“生命周期”&#xff08;Lifecycle&#xff09;的概念来管理构建过程的不同阶段&#xff0c;例如编译源代码、运行测试、打包、部署等。这…

ubuntu使用命令行查看硬件信息

ubuntu使用命令行查看硬件信息 CPU cat /proc/cpuinfo其中&#xff0c;model name就显示了cpu的型号&#xff0c;cpu cores显示cpu的所有物理核心数量。 内存 cat /proc/meminfo其中&#xff0c;MemTotal就显示总内存大小&#xff0c;这里为32GB内存&#xff0c;SwapTotal显…

走近张大鹏教授:哈工大走出的中国第一位人工智能博士

写在最前 张大鹏&#xff0c;加拿大皇家科学院院士&#xff0c;加拿大工程院院士&#xff0c;国际电气与电子工程师协会终身会士&#xff08;IEEE Fellow&#xff09;&#xff0c;国际模式识别协会会士&#xff0c;亚太人工智能学会会士&#xff0c;香港中文大学&#xff08;深…

速通GPT-3:Language Models are Few-Shot Learners全文解读

文章目录 论文实验总览1. 任务设置与测试策略2. 任务类别3. 关键实验结果4. 数据污染与实验局限性5. 总结与贡献 Abstract1. 概括2. 具体分析3. 摘要全文翻译4. 为什么不需要梯度更新或微调⭐ Introduction1. 概括2. 具体分析3. 进一步分析 Approach1. 概括2. 具体分析3. 进一步…

批发订货系统源码怎么弄 门店订货系统小程序价格

上线批发订货系统可以显著提升业务效率和管理水平&#xff0c;它能够帮助企业自动化处理订单、实时跟踪库存、简化订单管理、生成数据报表…这些优势能最终帮助你降低成本、提高效率&#xff0c;提升业务竞争力。今天&#xff0c;小编为您分享批发订货系统源码怎么弄。大家点赞…

自带线充电宝哪个牌子质量好性价比高?口碑最好自带线充电宝

在如今这个快节奏的时代&#xff0c;手机等电子设备已经成为我们生活中不可或缺的一部分。然而&#xff0c;电量不足的困扰时常让我们陷入尴尬境地。自带线充电宝的出现&#xff0c;无疑为我们解决了这一难题。它不仅方便携带&#xff0c;无需再额外携带充电线&#xff0c;而且…

新手入行项目管理,需掌握六大核心技能

对于新手而言&#xff0c;学习项目管理的核心技能对于确保项目目标的明确性、资源的有效利用、团队协作的顺畅性、风险的有效控制&#xff0c;以及按时按质完成任务至关重要。项目管理对组织成功至关重要&#xff0c;它提高资源配置效率&#xff0c;促进创新&#xff0c;确保项…

一个请求入参 req 引发的魔法攻击

项目场景 月初检修上线后没几天&#xff0c;隔壁项目组的同事&#xff0c;反馈说出现了生产问题&#xff0c;调用我们这边的接口报错。 问题描述 看到这个问题的第一眼&#xff0c;什么鬼&#xff0c;请求参数错误&#xff1f; 但是看到 “操作用户信息为空” 这个提示的时候…

MySQL系列—10.Innodb行格式

我们平时的数据以行为单位来想表中插入数据&#xff0c;这些记录在磁盘上的存放方式也被称为行格式或者记录格式。InnoDB存储引擎设计了 4 种不同类型的行格式&#xff0c;分别是Compact、Redundant、Dynamic 和 Compressed行格式 查看MySQL8的默认行格式&#xff1a; SELECT…

STM32 HAL freertos零基础(四) 二值信号量

1、二值信号量 FreeRTOS中的二值信号量是一种用于任务间同步的机制&#xff0c;它只能有两个状态&#xff1a;0 或 1。二值信号量通常用来表示某个事件是否发生&#xff0c;比如硬件中断发生时设置信号量为1&#xff0c;表示事件已发生&#xff1b;而任务在需要等待该事件发生时…

Jupyter Notebook远程登录配置

目录 一、之前的版本修改方法 1、生成配置文件 2、设置密码、获取秘钥 3、修改默认配置文件 注&#xff1a;自动化脚本 二、新版本 注&#xff1a;自动化脚本 三、访问 四、ip查询 1、win 2、linux 一、之前的版本修改方法 1、生成配置文件 jupyter notebook --ge…

选对crm管理系统软件,客户留存率提升70%不是梦!

本文将盘点10款行业领先的crm管理系统软件&#xff0c;为企业选型提供参考&#xff01; CRM系统&#xff0c;全称Customer Relationship Management System&#xff0c;即客户关系管理系统&#xff0c;是企业用来管理和分析客户互动与数据的软件系统。CRM系统的核心在于“以客户…

idea 拉取项目需要log in to git地址

idea 拉取项目需要log in to git地址 一. 问题复现二. 解决办法 一. 问题复现 1.使用 idea 拉取 git 代码 2.弹出“log in to XXXX 二. 解决办法

JavaWeb案例-登录认证

在前面的文章中&#xff0c;我们复习了部门管理、员工管理的基本功能。但是我们并没有登录&#xff0c;就直接访问到了Tilias智能辅助系统的后台。这是不安全的&#xff0c;所以今天复习登录认证。最终实现的效果就是用户必须登录之后&#xff0c;才可以访问后台系统中的功能。…

Java版本管理工具Jabba安装教程(Windows)

Java版本管理工具Jabba安装教程&#xff08;Windows&#xff09; 前言 Java版本的管理工具有很多&#xff0c;诸如Jenv,Jabba等&#xff0c;考虑到我之前使用Node.js的nvm还比较顺手&#xff0c;Jabba是受Node.js的nvm启发而来&#xff0c;故选择Jabba作为版本管理工具 这里…

iPhone照片删不掉?原因探索及解决方案

对于许多iPhone用户来说&#xff0c;删除不再需要的照片似乎是一个简单的任务。然而&#xff0c;有时你可能会发现某些照片无论如何都删不掉。这不仅令人困惑&#xff0c;还可能导致不必要的存储空间浪费。本文将探索导致iPhone照片删不掉的几种常见原因&#xff0c;并提供有效…