小程序旋转木马

最新推荐文章于 2025-06-06 09:45:24 发布

原创最新推荐文章于 2025-06-06 09:45:24 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

<!--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
    })
  },

})