Press UI

# Swiper

This component API is consistent with swiper (opens new window) provided by uni-app.

If your business component is only used in the uni-app environment, you can directly use the officially provided component (opens new window).

# Introduction

// #ifdef H5
import PressSwiper from 'press-ui/press-swiper/press-swiper.vue';
import PressSwiperItem from 'press-ui/press-swiper-item/press-swiper-item.vue';
// #endif

export default {
   components: {
     // #ifdef H5
     Swiper: PressSwiper,
     SwiperItem: PressSwiperItem,
     // #endif
   },
}

# Code Demo

# Basic usage

<swiper
   class="swiper"
   circular
   :indicator-dots="indicatorDots"
   :autoplay="autoplay"
   :interval="interval"
   :duration="duration"
>
   <swiper-item>
     <div class="swiper-item uni-bg-red">
       A
     </div>
   </swiper-item>
   <swiper-item>
     <div class="swiper-item uni-bg-green">
       B
     </div>
   </swiper-item>
   <swiper-item>
     <div class="swiper-item uni-bg-blue">
       C
     </div>
   </swiper-item>
</swiper>

export default {
   data() {
     return {
       indicatorDots: true,
       autoplay: true,
       interval: 2000,
       duration: 500,
     }
   }
}

# API

# Props

Parameters Description Type Default value
indicator-dots Whether to display panel indicator dots boolean false
indicator-color indicator point color string rgba(0, 0, 0, .3)
indicator-active-color The color of the currently selected indicator point string #000000
active-class class when swiper-item is visible string -
changing-class class when acceleration is set to true and during the sliding process, several screens in the middle are visible string -
autoplay Whether to switch automatically boolean false
current index of the current slider number 0
current-item-id The item-id of the current slider, cannot be specified together with current string -
interval Automatic switching interval number 5000
duration sliding animation duration number 500
circular Whether to use connection sliding, that is, play to the end and then return to the beginning boolean false
vertical Whether the sliding direction is vertical boolean false
previous-margin Previous margin, can be used to expose a small part of the previous item, accepts px and rpx values string 0px
next-margin Next-margin, can be used to expose a small part of the next item, accepts px and rpx values string 0px
acceleration When turned on, multiple screens will be slid continuously according to the sliding speed boolean false
disable-programmatic-animation Whether to disable code changes to trigger swiper animations when switching. boolean false
display-multiple-items Number of sliders to display simultaneously number 1
skip-hidden-item-layout Whether to skip the undisplayed slider layout, set to true to optimize the sliding performance in complex situations, but the layout information of the hidden state slider will be lost boolean false
disable-touch Whether to disable user touch operations boolean false
touchable Whether to monitor user touch events, is only valid during initialization and cannot be changed dynamically boolean true
easing-function Switch animation type, valid values: default, linear, easeInCubic, easeOutCubic, easeInOutCubic string default

# Events

Event name Description Parameters
change The change event will be triggered when current changes, event.detail = {current: current, source: source} EventHandle
transition The transition event will be triggered when the position of swiper-item changes, event.detail = {dx: dx, dy: dy}, Alipay applet does not currently support dx, dy EventHandle
animationfinish The animationfinish event will be triggered when the animation ends, event.detail = {current: current, source: source} EventHandle

# common problem

# Wrong usage

press-swiper must be used in the following manner, incorrect use will cause it to be ineffective.

  1. Use lowercase swiper and swiper-item in the component, for example
<swiper>
   <swiper-item>
     <div/>
   </swiper-item>
</swiper>

Error example

<Swiper>
   <SwiperItem>
     <div/>
   </SwiperItem>
</Swiper>

<!-- or -->

<PressSwiper>
   <PressSwiperItem>
     <div/>
   </PressSwiperItem>
</PressSwiper>
  1. This component cannot be registered under the mini program and must be compiled conditionally. The example is as follows
// #ifdef H5
import PressSwiper from 'press-ui/press-swiper/press-swiper.vue';
import PressSwiperItem from 'press-ui/press-swiper-item/press-swiper-item.vue';
// #endif

export default {
   components: {
     // #ifdef H5
     Swiper: PressSwiper,
     SwiperItem: PressSwiperItem,
     // #endif
   },
}

Because swiper requires that the child element must be swiper-item, it is impossible to create an intermediate layer of swiper-item.

横屏

← Tag →