微信小程序轮播图常用炫酷样式-swiper

JAY.LIN 收录于基础开发

2024-12-28 约 523 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=118795059

微信小程序轮播图常用炫酷样式—-swiper

微信小程序开发中，轮播图承担广告展示、热销产品推荐等重要作用。下面介绍两种小程序轮播图常用样式。

演示

有层次感的3D

无层次感的平面

源代码

有层次感3D

wxml

      <view class="swiperContainer">
      <swiper class="imageContainer" bindchange="swiperChange" previous-margin="55rpx" next-margin="50rpx" circular autoplay>
        <block wx:for="{{turnImg}}" wx:key="index">
          <swiper-item class="turnItem">
            <image class="itemImg {{index == swiperCurrent ? 'imgActive': ''}}" src="{{item}}"></image>
          </swiper-item>
        </block>
      </swiper>
        <!-- 指示点的修饰 -->
        <view class="dots">
            <block wx:for="{{turnImg}}" wx:key="index">
              <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
            </block>
        </view>
      </view>

wxss

.swiperContainer{
margin-top: 15rpx;
bottom: 8rpx;
position: relative;
}
.imageContainer{
  width: 100%;
  margin-top: 10rpx;
  height: 350rpx;
}
.turnItem{
  height: 340rpx;
}
.itemImg{
  position: absolute;
  width: 99%;
  height: 300rpx;
  margin-top: 20rpx;
  border-radius: 15rpx;
}
.imgActive{
  opacity: 1;
  height: 340rpx;
  margin-top: 0rpx;
  transition:all .2s ease-in 0s;
}
/* 指示点修饰 */
.dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25rpx;
  display: flex;
  justify-content: center;
}

.dot{
  margin: 0 8rpx;
  width: 18rpx;
  height: 18rpx;
  background-color: white;
  border-radius: 8rpx;
  transition: all .5s;
}
.dot.active{
  width: 24rpx;
  background: #fad81e;
}

  data:{
    swiperCurrent:"",  //指示点
  },
  //swiper滑动事件
swiperChange: function (e) {  //指示图标
  this.setData({
    swiperCurrent:e.detail.current
  })
},

平面无层次感

wxml

  <view class='swipercontent'>
    <swiper circular="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="2000" bindchange="swiperChange" style="height: 280rpx; width: 710rpx; display: block; box-sizing: border-box; left: NaNrpx; top: NaNrpx">
      <block wx:for="{{banner}}" wx:key="unique">
        <swiper-item>
          <image src="{{item}}" class='le-img'/>
        </swiper-item>
      </block>
    </swiper>

    <view class="dots">
      <block wx:for="{{banner}}" wx:key="unique">
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
      </block>
    </view>
  </view>

wxss

swiper{
  width: 710rpx;
  height: 280rpx;
  border-radius: 5px;
}
.le-img {
  width: 710rpx;
  height: 280rpx;
  display: block;
  border-radius: 5px;
 }

.dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}

.dot{
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #ccc;
  border-radius: 8rpx;
  transition: all .5s;
}
.dot.active{
  width: 24rpx;
  background: #f66d77;
}

  data:{
        autoplay: true,
    interval: 5000,
    nowIdx:0,
    swiperCurrent: 0,
     indicatorDots: true,
    duration: 200,
  },
  //swiper滑动事件
swiperChange: function (e) {  //指示图标
  this.setData({
    nowIdx: e.detail.current,
    swiperCurrent:e.detail.current
  })
},

最后本人自己做了一个完整的图文分享、点赞、收藏云开发小程序，可以用来做毕业设计、图文分享项目，操作简单，利用腾讯免费赠送的云开发空间就可以完成所有操作，节省成本、方便快捷，当天就可以上线！

链接：

目录

微信小程序轮播图常用炫酷样式-swiper

微信小程序轮播图常用炫酷样式—-swiper