Swiper

Posted 2022-09-20 dzw159

1.wxml

<view>swiper组件</view>
<view class=‘section‘>
  <view class=‘page-body‘>
    <view class=‘page-section page-section-spacing swiper‘>
      <swiper 
        indicator-dots="indicatorDots" 
        autoplay="autoplay" 
        interval="interval" 
        current="0" 
        duration="duration" 
        bindchange=‘change‘
        bindanimationfinish="animationfinish">
          <block wx:for=‘background‘ wx:key=‘*this‘>
            <swiper-item>
              <view class=‘swiper-item item‘></view>
            </swiper-item>
          </block>
      </swiper>
    </view>
    <view class=‘page-section‘ style=‘marggin-top:40rpx;margin-bottom:20rpx;‘>
      <view class=‘weui-cell weui-cell_after-title‘>
        <view class=‘weui-cell weui-cell_switch‘>
          <view class=‘weui-cell_bd‘>指示点</view>
          <view class=‘weui-cell_ft‘>
            <switch checked=‘indicatorDots‘ bindchange=‘changeIndicatorDots‘></switch>
          </view>
        </view>
        <view class=‘weui-cell weui-cell_switch‘>
          <view class=‘weui-cell_bd‘>自动播放</view>
          <view class=‘weui-cell_ft‘>
            <switch checked=‘autoplay‘ bindchange=‘changeAutoplay‘></switch>
          </view>
        </view>
      </view>
    </view>
    <view class=‘page-section page-section-spacing‘>
      <view class=‘page-section-title‘>
        <text>幻灯片切换时长（ms）</text>
        <text class=‘info‘>duration</text>
      </view>
      <slider bindchange=‘durationChange‘ calue=‘duration‘ min="500" max="2000"></slider>
      <view class=‘page-section-title‘>
        <text>自动播放间隔时长（ms）</text>
        <text class=‘info‘>interval</text>
      </view>
      <slider bindchange=‘intervalChange‘ value=‘interval‘ min="2000" max="10000"></slider>
    </view>

  </view>
</view>

2.js

Page(
  data:
    background:[
      ‘.red‘,
      ‘.yellow‘,
      ‘.blue‘
    ],
    indicatorDots:false,
    autoplay:false,
    vertical:false,
    interval:2000,
    duration:300
  ,
  changeIndicatorDots:function(e)
    this.setData(
      indicatorDots:!this.data.indicatorDots
    )
  ,
  changeAutoplay: function (e) 
    this.setData(
      autoplay: !this.data.autoplay
    )
  ,
  intervalChange:function(e)
    this.setData(
      interval:e.detail.value
    )
  ,
  durationChange:function(e)
    this.setData(
      duration:e.detail.value
    )
  
)

3.wxss

.red
  background: red;
  height:100%;
  width:100%;

.red:before
  content: ‘A‘;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);


.yellow
  background: yellow;
  height:100%;
  width:100%;

.yellow:before
  content: ‘B‘;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);


.blue
  background: blue;
  height:100%;
  width:100%;

.blue:before
  content: ‘C‘;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);


.page-foot
  margin-top:50rpx;

 

感谢：https://www.bilibili.com/video/av61418389/?p=32