好看的小程序轮播图

  • 前言：

微信小程序swiper组件：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

由于小程序原生的swiper并不尽人意，往往需要开发者自己修改swiper。

  • 先上效果：

 

  • 轮播图wxml

 1 <!-- 轮播图 -->
 2 <view class="swiper-view">
 3   <swiper class="swiper-box" autoplay="true" interval="3000" previous-margin="{{swiperMargin}}" next-margin="{{swiperMargin}}" bindchange="swiperChange">
 4     <block wx:for="{{swiperList}}" wx:key="id">
 5       <swiper-item bindtap="toDetail" data-proid="{{item.productId}}" style="text-align: center;">
 6         <view class="swiper-item-view">
 7           <image mode="aspectFill" class="swiper-image {{ swiperCurrent==index?'active':''}}" src="{{item.imgUrl}}" />
 8         </view>
 9       </swiper-item>
10     </block>
11   </swiper>
12   <view class="swiper-dots-view">
13     <view class="swiper-dot {{ swiperCurrent==index?'active':''}}" wx:for="{{swiperList}}" wx:key="id"></view>
14   </view>
15 </view>

 

  • 轮播图wxss

 1 .swiper-view {
 2   position: relative;
 3   border-bottom: 1px solid #f6f8fc;
 4 }
 5 
 6 .swiper-box {
 7   height: 355rpx;
 8 }
 9 
10 .swiper-item-view {
11   zoom: 1;
12   box-sizing: border-box;
13 }
14 
15 .swiper-item-view:after {
16   display: table;
17   content: "";
18   clear: both;
19 }
20 
21 .swiper-image {
22   overflow: hidden;
23   /* height: 170px; */
24   width: 620rpx;
25   height: 340rpx;
26   transition: transform 500ms;
27   transform: scale(0.95, 0.9); /* 缩放处理，产生一种层次感 */
28   border-radius: 8px;
29   box-shadow: 0px 6px 10px 0px rgba(179, 154, 139, 1);
30 }
31 
32 .swiper-image.active {
33   transform: scale(1, 1);
34 }
35 
36 .swiper-dots-view {
37   /* 水平居中*/
38   position: absolute;
39   display: flex;
40   justify-content: center;
41   width: 100%;
42   left: 0;
43   bottom: 10px;
44   height: 18rpx;
45   /* height: 6px; */
46 }
47 
48 .swiper-dot {
49   width: 6px;
50   height: 6px;
51   margin: 0 3px;
52   border-radius: 3px;
53   background-color: #fff;
54 }
55 
56 .swiper-dot.active {
57   width: 15px;
58   background-color: rgb(221, 65, 3);
59 }

 

  • 轮播图JS

 1 data: {
 2     swiperMargin: wx.getSystemInfoSync().windowWidth > 380 ? '60rpx' : '50rpx',
 3 
 4     swiperCurrent: 0,
 5     swiperList: []
 6   },
 7 
 8   // 监听swiper切换
 9   swiperChange: function(e) {
10     let current = e.detail.current;
11     this.setData({
12       swiperCurrent: current
13     });
14   },

 

posted @ 2021-01-25 16:04  ArthurHong7  阅读(889)  评论(0)  编辑  收藏  举报