rpmeir / tswiper
TSwiper 插件,用于在 Adianti 框架中使用 JavaScript swiper 库
v1.0.0
2021-08-26 03:10 UTC
This package is auto-updated.
Last update: 2024-09-26 09:45:11 UTC
README
TSwiper 是一个基于 Swiper 的组件,用于在 Adianti 框架 中使用。
提供触摸滑动功能,并补充框架中现有的组件。
它由两个类组成,包含在 Swiper 组件初始化时传递的选项的属性和方法。
安装 TSwiper
仅在 Adianti 框架中安装
通过 composer
composer require "rpmeir/tswiper:v1.0.0"
示例
如何使用
<?php use Rpmeir\TSwiper\TSwiper; use Adianti\Control\TPage; use Adianti\Widget\Container\THBox; use Adianti\Widget\Container\TVBox; use Adianti\Widget\Util\TXMLBreadCrumb; /** * TSwiperView * * @version v1.0.0 * @package tswiper * @author Rodrigo Pires Meira */ class TSwiperView extends TPage { public function __construct() { parent::__construct(); $items = []; $items[] = (object) ['content' => 'Slide 1 <br> A']; $items[] = (object) ['content' => 'Slide 2 <br> B']; $items[] = (object) ['content' => 'Slide 3 <br> C']; $items[] = (object) ['content' => 'Slide 4 <br> D']; $items[] = (object) ['content' => 'Slide 5 <br> E']; $items[] = (object) ['content' => 'Slide 6 <br> F']; $items[] = (object) ['content' => 'Slide 7 <br> G']; $items[] = (object) ['content' => 'Slide 8 <br> H']; $items[] = (object) ['content' => 'Slide 9 <br> I']; $items[] = (object) ['content' => 'Slide 10 <br> J']; $template = '<b>teste</b><br>{content}'; $hbox = new THBox; $swiper1 = new TSwiper(); $swiper1->setSlidesPerView(2, true); $swiper1->setSpaceBetween(15); $swiper1->enableFreeMode(); $swiper1->enableScrollbar(); $swiper1->{'style'} = 'height: 200px;margin:25px auto;'; $swiper1->setItemTemplate($template); foreach($items as $key => $item) { $swiperitem = $swiper1->addItem($item); $swiperitem->{'style'} = 'border: solid 1px #ddd;border-radius: 4px'; } $hbox->add($swiper1, 'width:100%;'); $swiper2 = new TSwiper(); $swiper2->setSlidesPerView(4, false); $swiper2->setSpaceBetween(15); $swiper2->enablePagination(); $swiper2->{'style'} = 'height: 200px;margin:25px auto;'; $swiper2->setItemTemplate($template); foreach($items as $key => $item) { $swiperitem = $swiper2->addItem($item); $swiperitem->{'style'} = 'border: solid 1px #ddd;border-radius: 4px'; } $hbox->add($swiper2, 'width:100%;'); $swiper3 = new TSwiper(); $swiper3->enablePagination('fraction'); $swiper3->centerSlides(); $swiper3->setEffect('flip'); $swiper3->{'style'} = 'height: 200px;width:100%;margin:25px auto;'; $swiper3->setItemTemplate($template); foreach($items as $key => $item) { $swiperitem = $swiper3->addItem($item); $swiperitem->{'style'} = 'border: solid 1px #ddd;border-radius: 4px'; } $hbox->add($swiper3, 'width:100%;'); // wrap the page content using vertical box $vbox = new TVBox; $vbox->style = 'width: 90%; margin: auto;'; $vbox->add(new TXMLBreadCrumb('menu.xml', __CLASS__)); $vbox->add($hbox); parent::add($vbox); } }
待办事项
- 将 TSwiperItem 与 TAction 类集成