swiper

swiper item container. Only the swiper-item component can be placed in it, otherwise it will cause undefined problem.

Example

bxml

Code
<view class="page-body">
  <view class="page-section page-section-gap">
    <view class="page-section-title">Default Style</view>
    <view class="body-view"></view>
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{isAutoplay}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" current="{{current}}" easing-function="{{easingFunction}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" vertical="{{vertical}}" display-multiple-items="{{displayMultipleItems}}" auto-height="{{autoHeight}}" bindchange="onChange" bindtransition="onTransition" bindanimationfinish="onAnimationfinish">
      <block bn:for="{{bgColorGroups}}" bn:key="*this">
        <swiper-item style="{{'background-color:' + item}}">
          <view> {{item}} </view>
        </swiper-item>
      </block>
    </swiper>

    <view class="options_line" style="margin-top: 10px;">
      <button class="options_btn" bindtap="onAutoPlayChange">{{isAutoplay ? "stop automatically" : "play automatically"}}</button>
    </view>

    <view class="options_line">
      <button class="options_btn" bindtap="onCircularChange">{{circular ? "stop circular" : "play circular"}}</button>
    </view>
    <view class="options_line">
      <button class="options_btn" bindtap="onVerticalChange">{{vertical ? "horizontal" : "vertical"}}</button>
    </view>

    <view class="options_line">
      <button class="options_btn" bindtap="onIndicatorDotsChange">{{indicatorDots ? `hide indicatorDots` : `show indicatorDots`}}</button>
    </view>
    <view class="options_line">
      indicatorColor:
      <input class="options_input" value="{{indicatorColorInput}}" bindinput="onIndicatorColorInput" placeholder="Please input indicatorColor" maxlength="{{-1}}" />
      <button class="options_btn" bindtap="onIndicatorColorClick">update</button>
    </view>

    <view class="options_line">
      indicatorActiveColor:
      <input class="options_input" value="{{indicatorActiveColorInput}}" bindinput="onIndicatorActiveColorInput" placeholder="Please input indicatorColor" maxlength="{{-1}}" />
      <button class="options_btn" bindtap="onindicatorActiveColorClick">update</button>
    </view>

    <view class="options_line">
      current:
      <input class="options_input" value="{{currentInput}}" bindinput="onCurrentinputInput" placeholder="Please input current" maxlength="{{-1}}" />
      <button class="options_btn" bindtap="onCurrentinputClick">update</button>
    </view>

    <view class="options_line">
      easingFunction:
      <input class="options_input" value="{{easingFunctionInput}}" bindinput="onEasingFunctioninputInput" placeholder="Please input easingFunction" maxlength="{{-1}}" />
      <button class="options_btn" bindtap="onEasingFunctioninputClick">update</button>
    </view>

    <view class="options_line">
      interval:
      <input class="options_input" value="{{intervalInput}}" bindinput="onIntervalinputInput" placeholder="Please input interval" maxlength="{{-1}}" />
      <button class="options_btn" bindtap="onIntervalinputClick">update</button>
    </view>

    <view class="options_line">
      duration:
      <input class="options_input" value="{{durationInput}}" bindinput="onDurationinputInput" placeholder="Please input duration" maxlength="{{-1}}" />
      <button class="options_btn" bindtap="onDurationinputClick">update</button>
    </view>

    <view class="options_line">
      displayMultipleItems:
      <input class="options_input" value="{{displayMultipleItemsInput}}" bindinput="onDisplayMultipleItemsinputInput" placeholder="Please input displayMultipleItems" maxlength="{{-1}}" />
      <button class="options_btn" bindtap="onDisplayMultipleItemsinputClick">update</button>
    </view>

    <view class="options_line" bindtap="onAddBgColorGroupsClick">
      <button class="options_btn">add a black swiper item</button>
    </view>

    <view class="options_line" bindtap="onRemoveBgColorGroupsClick">
      <button class="options_btn">remove the last swiper item</button>
    </view>
  </view>
</view>

bxss:

Code
.bn-swiper-item {
  background: red;
}
.options_line {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.options_btn {
  margin-top: 0;
}

.options_input {
  width: 100px;
  border: 1px solid #282828;
  border-radius: 4px;
  padding: 2px 12px;
  line-height: 1.6;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
}

js

Code
Page({
 data: {
   bgColorGroups: ['yellow', 'red', 'orange', 'green'],
   indicatorDots: true,
   isAutoplay: false,
   circular: true,
   vertical: false,
   indicatorColor: 'white',
   indicatorActiveColor: 'black', // *
   current: 0,
   easingFunction: this.easingFunction,
   displayMultipleItems: 1,
   indicatorColorInput: 'white',
   indicatorActiveColorInput: 'black',
   currentInput: 0,
   easingFunctionInput: 'linear',
   interval: 3000,
   intervalInput: 3000,
   duration: 200,
   durationInput: 200,
   displayMultipleItemsInput: 1，
   autoHeight: false,
 },
 onLoad(query) {
   console.log('onload', this, query)
 },

 onShow() {
   console.log('onShow', this.data)
 },
 onReady() {
   console.log('onReady')
 },
 onHide() {
   console.log('onHide')
 },
 onTabItemTap(payload) {
   console.log('onTabItemTap', payload)
 },
 // swiper page method
 onAutoPlayChange: function() {
   this.setData({ isAutoplay: !this.data.isAutoplay })
 },
 onCircularChange() {
   this.setData({ circular: !this.data.circular })
 },
 onVerticalChange() {
   this.setData({ vertical: !this.data.vertical })
 },
 onIndicatorDotsChange() {
   this.setData({ indicatorDots: !this.data.indicatorDots })
 },
 onIndicatorColorInput(e) {
   this.setData({ indicatorColorInput: e.detail.value })
 },
 onIndicatorColorClick() {
   this.setData({
     indicatorColor: this.data.indicatorColorInput
   })
 },
 onIndicatorActiveColorInput(e) {
   this.setData({ indicatorActiveColorInput: e.detail.value })
 },
 onindicatorActiveColorClick() {
   this.setData({
     indicatorActiveColor: this.data.indicatorActiveColorInput
   })
 },
 onCurrentinputInput(e) {
   this.setData({ currentInput: Number(e.detail.value) })
 },
 onCurrentinputClick() {
   this.setData({
     current: this.data.currentInput
   })
 },
 onEasingFunctioninputInput(e) {
   this.setData({ easingFunctionInput: e.detail.value })
 },
 onEasingFunctioninputClick() {
   this.setData({
     easingFunction: this.data.easingFunctionInput
   })
 },
 onIntervalinputInput(e) {
   this.setData({ intervalInput: Number(e.detail.value) })
 },
 onIntervalinputClick() {
   this.setData({
     interval: this.data.intervalInput
   })
 },
 onDurationinputInput(e) {
   this.setData({ durationInput: Number(e.detail.value) })
 },
 onDurationinputClick() {
   this.setData({
     duration: this.data.durationInput
   })
 },
 onDisplayMultipleItemsinputInput(e) {
   this.setData({ displayMultipleItemsInput: e.detail.value })
 },
 onDisplayMultipleItemsinputClick() {
   this.setData({
     displayMultipleItems: this.data.displayMultipleItemsInput
   })
 },
 onAddBgColorGroupsClick() {
   const newBgColorGroups = [...this.data.bgColorGroups]
   newBgColorGroups.push("black")
   this.setData({ bgColorGroups: newBgColorGroups })
 },
 onRemoveBgColorGroupsClick() {
   const newBgColorGroups = [...this.data.bgColorGroups]
   newBgColorGroups.length > 0 && newBgColorGroups.pop()
   this.setData({ bgColorGroups: newBgColorGroups })
 },


 onChange(e) {
   console.log('[View] onClick', e)
 },
 onTransition(e) {
   console.log('[View] onLongPress', e)
 },
 onAnimationfinish(e) {
   console.log('[View] onTouchStart', e)
 },
})

Props

Events