小程序 swiper轮播 & swiper仿tab切换

目录

一、swiper轮播

1、swiper + sweiper-item

二、swiper仿tab切换

 

---

一、swiper轮播

1、swiper + sweiper-item

微信小程序官网讲解swiper详情：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

• indicator-dots 布尔 显示小点点
• autoplay 布尔 自动切换
• circular 布尔 衔接滑动
• vertical 布尔 纵向滚动
• skip-hidden-item-layout 布尔 跳过未显示的滑块布局

2、案例

// index.wxml

<view class="container">
    <swiper class="rotation" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}" next-margin="{{nextMmargin}}" display-multiple-items="{{displayMultipleItems}}" easing-function="{{easingFunction}}" 
    indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="rgb(255, 255, 255)" 
    indicator-dots autoplay circular skip-hidden-item-layout
    bindchange="" bindanimationfinish="">
    <!-- wx:key="{{index}}" -->
        <block wx:for="{{imgUrls}}" wx:key="key">
            <swiper-item class="slide_img_box" item-id="">
                <image class="slide_img" src="{{item}}"/>
            </swiper-item>
        </block>
    </swiper>
</view>

// index.js

Page({

    /**
     * 页面的初始数据
     */
    data: {
      interval: '3000',// 自动切换时间间隔
      duration: '1000',// 滑动动画时长
      current: '0',// 当前所在滑块的 index
      currentItemId: '2',// 设置默认一开始显示第几张图片
      displayMultipleItems: '1',// 设置一次显示几张图片
      previousMargin: '10px',// 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
      nextMmargin: "10px",// 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
      easingFunction: 'default',// 指定 swiper 切换缓动动画类型
      imgUrls: [
        'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
      ]
    },
})

// index.wxss

.rotation{
    width: 700rpx;
    height: 400rpx;
    border: 2rpx solid rgb(247, 243, 3);
}
.slide_img_box{
    width: 100%;
    height: 100%;
}
.slide_img{
    width: 100%;
    height: 100%
}

效果

 

二、swiper仿tab切换

详见：https://blog.csdn.net/mChales_Liu/article/details/100107001