目录
一、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