微信公众号开发

原生小程序的 图片轮播 中间图放大效果 带分页器

本文主要是介绍原生小程序的 图片轮播 中间图放大效果 带分页器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

效果是这样子的:

 

 上代码:

1、html代码

<!--package1/pages/invite/invite.wxml--> <view class="invite">   <swiper      class='swiper-block mySwiper'      autoplay='true'     circular='true'     previous-margin='125rpx'      next-margin='90rpx'      current='0'      bindchange='swiperChange'   >     <block wx:key='img' wx:for='{{swiperImgUrls}}'>       <swiper-item class='swiper-item'>         <image mode='aspectFill' src='{{item}}' class='slide-image {{swiperIndex == index ? "active" : ""}}' />       </swiper-item>     </block>   </swiper>   <!-- 分页器 -->   <view class="swiperPages">     <view wx:for="{{ pageList }}"  wx:key="index" class="{{ item.pagetype == swiperIndex ? 'viewActive' : '' }}"></view>   </view> </view>   2、css代码 page {   background-color: #f5f5f5;   height: 100%; } .invite {   width: 100%;   height: 100%;   padding-top: 50rpx;   box-sizing: border-box; } /* 轮播图 */ .swiper-block {   height: 935rpx;   width: 100%;   }      .swiper-item {   display: flex;   flex-direction: column;   justify-content: center;   align-items: flex-start;   overflow: unset;   box-sizing: border-box;   }      .slide-image {   height: 800rpx;   width: 460rpx;   border-radius: 9rpx;   margin: 0rpx 20rpx;   z-index: 1;   opacity: 0.5;   }      .active {   transform: scale(1.14);   transition: all 0.2s ease-in 0s;   z-index: 20;   opacity: 1;   }   /* swiperPages 分页器 */   .swiperPages {     width: 100%;     height: 70rpx;     display: flex;     justify-content: center;     align-items: center;   }   .swiperPages view{     width: 10rpx;     height: 10rpx;     margin: 0 5rpx;     border-radius: 100%;     background-color: #ccc;   }   .swiperPages .viewActive{     background-color: #f70d06;   }   3、js代码 data: {     swiperImgUrls: [       '../../images/images/inviteSwiper1_03.png',       '../../images/images/inviteSwiper1_03.png',       '../../images/images/inviteSwiper1_03.png'     ],     swiperIndex: 0,   // 分页器     pageList: [       {pagetype:0},       {pagetype:1},       {pagetype:2}      ]   },
  /**    * 轮播滑动时,获取当前的轮播id    */   swiperChange(e) {     console.log(e)     const that = this;     that.setData({       swiperIndex: e.detail.current     },() => {       console.log(this.data.swiperIndex)     })   },   代码是没问题,图片记得自己换路径。 对面的小伙伴你辛苦了,加油!
这篇关于原生小程序的 图片轮播 中间图放大效果 带分页器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!