npm 包 @isoden/ngx-swipe 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@isoden/ngx-swipe 是一个基于 Angular 开发的轮播图组件。它是一个轻量级插件，易于使用并且高效。此插件的最大优点在于其简洁的 API 和易于自定义的外观。

安装

在命令行中输入 npm i @isoden/ngx-swipe --save 安装此插件。

在 app.module.ts 中添加以下内容：

import { NgxSwipeModule } from '@isoden/ngx-swipe';

@NgModule({
  imports: [ NgxSwipeModule ]
})
export class AppModule { }

使用方法

在 HTML 文件中添加 <ngx-swipe> 标签，将需要滑动的元素放入标签内：

<ngx-swipe>
  <div>内容1</div>
  <div>内容2</div>
  <div>内容3</div>
  <div>内容4</div>
</ngx-swipe>

在 app.component.ts 中导入 ViewChild，并在 ngAfterViewInit 函数内声明：

-- -------------------- ---- -------
------ - ---------- ---------- ------------- - ---- ----------------
------ - ----------------- - ---- --------------------

------ ----- ------------ ---------- ------------- -
  -----------------------------
  ------- ------------------

  ----------------- -
    --------------------
      ------ ----
      --------- -----
      --------- ----
    ---
  -
-

在 app.component.html 中添加 <ngx-swipe> 标签，并设置 id 和 config：

<ngx-swipe #swiper id="swiper" [config]="config">
  <div>内容1</div>
  <div>内容2</div>
  <div>内容3</div>
  <div>内容4</div>
</ngx-swipe>

参数配置

参数名	类型	说明
speed	number	切换速度，单位为毫秒，默认为 300
autoPlay	boolean	是否自动播放，默认为 false
interval	number	自动播放间隔，单位为毫秒，默认为 3000
effect	string	切换效果，可选 slide（滑动切换）和 fade（淡入淡出），默认为 slide
pagination	boolean	是否显示分页器，默认为 true
navigation	boolean	是否显示上一页/下一页按钮，默认为 true
slidesPerView	number	每屏显示数量，可以是小数，默认为 1

事件列表

事件名	说明
beforeChange	图片切换前触发
afterChange	图片切换后触发
touchStart	触屏开始时触发
touchMove	触屏滑动时触发
touchEnd	触屏结束时触发
transitionStart	图片切换过程开始时触发
transitionEnd	图片切换过程结束时触发
click	点击当前图片时触发

示例代码

HTML 文件：

<div class="swiper-container">
  <ngx-swipe [config]="config">
    <div class="swiper-slide" *ngFor="let item of items">
      <img src="{{item.img}}">
    </div>
  </ngx-swipe>
  <div class="swiper-pagination"></div>
</div>

TypeScript 文件：

-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- --------------------

------------
  --------- -----------
  ------------ -----------------------
  ---------- -----------------------
--
------ ----- ------------ ---------- ------ -

  ------- -------------- - -
    ----------- ---------------------
    -------------------- -----
    ----------- ----------------------
    ----------- ----------------------
    ------------- --
  --

  ----- - -
    - ---- --------------------------------------- --
    - ---- --------------------------------------- --
    - ---- --------------------------------------- --
    - ---- --------------------------------------- -
  --

  ------------- - -

  ---------- -
  -

-

此插件的详细使用方法已经介绍完成。希望您喜欢这个插件！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056ea281e8991b448e76c4