直接先上效果图
image.png
wxml 代码
使用next-margin和previous-margin控制露出前后的一小部分
外层li控制两个相邻的item之间的留白
里层li1控制item的显示元素
<swiper class="swiper" next-margin="140rpx" current-item-id="{{currentItemId}}" previous-margin="140rpx" bindchange="swiperChange">
<block wx:for="{{backClass}}" wx:key="index">
<swiper-item item-id="{{index}}" data-item-id="{{index}}" bindtap='clickChange'>
<view class='li'>
<view class='li1 {{item}} {{currentItemId == index ? "selected" : ""}}' ></view>
</view>
</swiper-item>
</block>
</swiper>
wxss 代码
.li{
width: 100%;
height: 252rpx;
}
.li1{
width: 446rpx;
margin: 0 auto;
border-radius: 10rpx;
height: 252rpx;
transform: scale(0.9);
}
.selected{
transform: scale(1)
}
.red{
background: red;
}
.blue{
background: blue;
}
.green{
background: green;
}
.orange{
background: orange;
}
js代码
可左右滑动切换 可点击切换
左右滑动和点击切换获取currentItemId，以控制当前选择的item及选中效果
Page({
data: {
backClass: ["red", "blue", "green","orange"],
currentItemId:2
},
swiperChange:function(e){
var currentItemId = e.detail.currentItemId;
this.setData({
currentItemId:currentItemId
})
},
clickChange:function(e){
var itemId = e.currentTarget.dataset.itemId;
this.setData({
currentItemId: itemId
})
}
})
