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}}" 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,
  },
  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