小程序好看卡片式轮播

撑起自己半边天

已于 2022-06-28 14:09:27 修改

阅读量575

点赞数 2

分类专栏：小程序文章标签：小程序 javascript

于 2022-06-28 14:08:33 首次发布

本文链接：https://blog.csdn.net/weixin_43840289/article/details/125501202

版权

小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述

wxml

<!-- 轮播 -->
<view class="swiper-view">
  <swiper class="swipers swiper-box" previous-margin="{{swiperMargin}}" next-margin="{{swiperMargin}}"  autoplay="{{autoplay}}" duration="500" bindchange="swiperChange">
    <block wx:for="{{banner}}" wx:for-item="item" wx:key="id">
      <swiper-item bindtap="toDetail" data-proid="{{item.id}}" style="text-align: center;">
        <view class="swiper-item-view">
          <image mode="aspectFill" style="width: 100%;" class="swiper-image {{ swiperCurrent==index?'active':''}}" src="{{item.url}}" alt=""></image>
        </view>
      </swiper-item>
    </block>
  </swiper>
  <view class="swiper-dots-view">
     <view class="swiper-dot {{ swiperCurrent==index ? 'active':''}}" wx:for="{{banner}}" wx:key="id"></view>
</view>
</view>

wxss

.swiper-view{
  position: relative;
  border-bottom: 1px solid #f6f8fc;
}
.swiper-box {
  height: 355rpx;
 }
 
 .swiper-item-view {
     zoom: 1;
     box-sizing: border-box;
   }
   
   .swiper-item-view:after {
     display: table;
     content: "";
     clear: both;
   }
   
   .swiper-image {
     overflow: hidden;
     /* height: 170px; */
     width: 620rpx;
     height: 340rpx;
     transition: transform 500ms;
     transform: scale(0.95, 0.9); /* 缩放处理，产生一种层次感 */
     border-radius: 8px;
     box-shadow: 0px 6px 10px 0px rgba(179, 154, 139, 1);
   }
   
   .swiper-image.active {
     transform: scale(1, 1);
   }
   
   .swiper-dots-view {
     /* 水平居中*/
     position: absolute;
     display: flex;
     justify-content: center;
     width: 100%;
     left: 0;
     bottom: 10px;
     height: 18rpx;
     /* height: 6px; */
   }
   
  .swiper-dot {
     width: 6px;
     height: 6px;
    margin: 0 3px;
    border-radius: 3px;
    background-color: #fff;
 }
 
 .swiper-dot.active {
   width: 15px;
   background-color: rgb(221, 65, 3);
  }

 data: {
    banner:[
      {
        id: 0,
        url: 'https://img02.mockplus.cn/image/2022-06-21/43c6db10-f10c-11ec-9720-497d9b1b567e.png'
      },
      {
        id: 1,
        url: 'https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210510-160039-2e5d.png?x-oss-process=image/resize,h_600/interlace,1,image/format,webp'
      }
    ],
    swiperMargin: wx.getSystemInfoSync().windowWidth > 380 ? '60rpx' : '50rpx',
    swiperCurrent: 0,
    swiperList: []
}

// 监听swiper切换
swiperChange(e) {
       let current = e.detail.current;
       this.setData({
        swiperCurrent: current
       });
     },