小程序旋转木马
<!--wxml-->
<view class='list'>
<swiper autoplay="{{false}}" previous-margin="{{'64rpx'}}" next-margin="{{'64rpx'}}" bindchange="swiperChange">
<block wx:for="{{snenicCards}}" wx:key="{{index}}">
<swiper-item bindtap='card_click' data-id="{{item.id}}" data-sort="{{item.sort}}" >
<image src="{{host+item.coverImg}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}">
<view class="prompt-textwrap">
<view class="prompt-text">{{item.title}}</view>
<view class='prompt-destext'>{{item.subTitle}}</view>
</view>
<text class="slogan">{{item.slogan}}</text>
</image>
</swiper-item>
</block>
</swiper>
</view>
/*wxss*/
swiper {
width: 100%;
height: 1060rpx;
margin: 0 auto;
}
swiper-item {
background: #fff;
padding-top: 90rpx;
}
/* .imgpic3{
} */
image {
width: 86%;
box-shadow: 0rpx 0rpx 2rpx #d6d6d6;
border-radius: 4px;
padding: 2rpx;
background: #fff;
margin: 0 auto;
border: 1px solid #d6d6d6;
opacity: 0.6;
display: block;
}
image.active {
transform: scale(1.14);
transition: all 0.2s ease-in 0s;
opacity: 1;
}
image.active .prompt-textwrap {
display: block;
}
.slogan {
color: #d4d2d3;
font-size: 47rpx;
position: absolute;
bottom: -90rpx;
left: 0;
display: none;
}
image.active .slogan {
display: block;
}
/*js*/
Page({
data: {
swiperIndex: 0,
},
swiperChange(e) {
this.setData({
swiperIndex: e.detail.current
})
},
})