微信小程序swiper滑块视图容器控件使用整理

2019独角兽企业重金招聘Python工程师标准>>>

一、默认使用

indicator-dots,指示是否面板显示

indicator-color，指示点颜色

indicator-active-color，选中指示点颜色

wxml代码：

<swiper autoplay="{{autoplay}}"
  indicator-dots='true'
  indicator-active-color='red'
  interval="3000" 
  duration="1000">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>

js代码：

  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    autoplay: true,
  },

显示结果：

二、重定义，指示点样式

操作：禁用默认指示样式，自定义view显示，根据当前current，设置选中项

1.wxml定义

<view class='swiper'>
  <swiper autoplay="{{autoplay}}"
    bindchange="swiperChange"
   current='{{curIndex}}' interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="355" height="150" />
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义指示 -->
  <view class='dots'>
    <view class='dot {{curIndex==index?"active":""}}' wx:for="{{imgUrls}}"></view>
  </view>
</view>

2.js定义

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    autoplay: false,
    interval: 5000,
    duration: 1000,
    curIndex: 0
  },

3.css样式定义

.swiper {
  position: relative;
}

.swiper image {
  width: 100%;
}

.swiper .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}

.swiper .dots .dot {
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 8rpx;
  transition: all 0.6s;
}

.swiper .dots .dot.active {
  width: 24rpx;
  background: red;
}

3.显示样式

 

更多：

微信小程序selectComponent获取自定义子组件

 微信小程序组件间通信（二）

微信小程序组件间通信（一）

 

转载于:https://my.oschina.net/tianma3798/blog/2252465