如何实现一个简单的swiper效果
简单的siwper效果，又是逛社区发现老哥提的想要该效果，那么有需要，咱们就得上啊：
效果图：
[图片]
上代码：
wxml
[代码]<view class="container">
<swiper duration="200" previous-margin="140rpx" next-margin="140rpx" bindchange="currentHandle" circular="{{true}}" class="swiper-out">
<block wx:for="{{punchList}}" wx:key="*this">
<swiper-item class="swp-item {{current === index ?'active-item': ''}}">
<view class="slide-image" style=" background: url({{item.bannerUrl}}) no-repeat center center;background-size: 100% 100%;" id="{{index}}"></view>
</swiper-item>
</block>
</swiper>
<view class="swp-dot">
<view class="square-12 m-r-8 {{current === index ?'active': ''}}" wx:for="{{punchList}}" wx:key="{{index}}"></view>
</view>
</view>
[代码]
JS
[代码]const app = getApp()
Page({
data: {
punchList: [{
"bannerUrl": "https://qiniu-image.qtshe.com/1536067857379_122.png"
}, {
"bannerUrl": "https://qiniu-image.qtshe.com/1536068379879_115.png",
}, {
"bannerUrl": "https://qiniu-image.qtshe.com/1536068319939_230.png",
}, {
"bannerUrl": "https://qiniu-image.qtshe.com/1536068074140_695.png",
}, {
"bannerUrl": "https://qiniu-image.qtshe.com/1536068213758_796.png",
}],
current: 0
},
currentHandle(e) {
let {
current
} = e.detail
this.setData({
current
})
}
})
[代码]
wxss
[代码].container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh;
}
.slide-image {
height: 600rpx;
width: 400rpx;
margin-top: 20rpx;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 10rpx;
}
.swiper-out {
width: 750rpx;
height: 660rpx;
margin-top: 60rpx;
}
.active-item .slide-image {
box-shadow: 0 5rpx 20rpx 3rpx rgba(0, 0, 0, 0.15);
}
.swp-item {
width: 400rpx;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4rpx;
opacity: 0.6;
}
.active-item {
opacity: 1;
}
.swp-dot {
display: flex;
justify-content: center;
flex: 1;
margin-top: 18rpx;
}
.m-r-8 {
margin-right: 8rpx;
}
.m-l-8 {
margin-right: 8rpx;
}
.square-12 {
width: 12rpx;
height: 12rpx;
background-color: #d8d8d8;
border-radius: 6rpx;
transition: width 0.2s linear;
}
.active {
background-color: #3c3c3c;
width: 36rpx;
transition: width 0.2s linear;
}
[代码]
代码放完了，看下效果吧。代码片段如下：
https://developers.weixin.qq.com/s/DCK6HJmw7kaZ
