当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现带放大效果的轮播图

微信小程序实现带放大效果的轮播图

2020年06月23日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了微信小程序实现带放大效果的轮播图，供大家参考，具体内容如下

效果如图

wxml

<!-- 轮播图 -->
 <view class='carousel'>
 <view class="recommend">
  <view class="swiper-container">
  <swiper class="swiper" autoplay="auto" interval="2000" duration="500" bindchange="swiperchange" previous-margin="40px" next-margin="40px" circular="true">
   <block wx:for="{{slider}}" wx:key="unique">
   <swiper-item data-url="{{item.linkurl}}">
    <image class='{{swipercurrent==item.imgid?"img_current":"img"}}' src="{{item.picurl}}" mode="widthfix"></image>
   </swiper-item>
   </block>
  </swiper>
  <!-- 指示点 -->
  <!-- <view class="dots">
   <block wx:for="{{slider}}" wx:key="unique">
   <view class="dot{{index == swipercurrent ? ' active' : ''}}" bindtap="chuangevent" id="{{index}}">{{index+1}}</view>
   </block>
  </view> -->
  </view>
 </view>
</view>

wxss

.carousel{
 margin-top: 49px;
 background-color: #fff;
}
.swiper-container{
 position: relative;
}
.swiper-container .swiper{
 padding-top: 8px;
 height: 380rpx;
 text-align: center;
}
swiper-item{
 display: flex;
 align-items: center;
 justify-content: space-around;
}
.swiper-container .swiper .img{
 width: 88%;
 height: 88%;
 border-radius: 10px;
}
.img_current{
 width: 100%;
 height: 100%;
 border-radius: 10px;
}
.swiper-container .dots{
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 width: 28rpx;
 height: 28rpx;
 margin: 0 10rpx;
 border-radius: 50%;
 background: #fff;
 transition: all .6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
}
.swiper-container .dots .dot.active{
 background: #f80;
 color:#fff;
}

js

data: { 
 //轮播图
 slider: [
  { imgid: '0', linkurl: 1, picurl: '/images/swiper/swiper_1.png' },
  { imgid: '1', linkurl: 2, picurl: '/images/swiper/swiper_2.png' }, 
  { imgid: '2', linkurl: 3, picurl: '/images/swiper/swiper_3.png' },
  ],
 swipercurrent: 0,
 }
 
  /**
 * 轮播图
 */
 swiperchange: function (e) {
 //把切换后当前的index传给<swiper>组件的current属性
 this.setdata({
  swipercurrent: e.detail.current
 })
 },

 //点击指示点切换
 // chuangevent: function (e) {
 // this.setdata({
 //  swipercurrent: e.currenttarget.id
 // })
 // },

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网