微信小程序 swiper无限循环

在这里插入图片描述

.swiper-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.swiper-item-box {
  width: 90%;
  height: 430rpx;
  border-radius: 10rpx;
  border: 1px solid #eee;
  padding: 2rpx;
  box-sizing: border-box;
}
.swiper-item-img {
  width: 100%;
  height: 224rpx;
}
.act-img {
  border-radius: 10rpx 10rpx 0 0;
  width: 100%;
  height: 100%;
}
.acti-footer {
  padding: 0 20rpx;
  box-sizing: border-box;
}
.tag {
  width: 64rpx;
  height: 36rpx;
  text-align: center;
  line-height: 36rpx;
  border-radius: 8rpx;
  margin-right: 12rpx;
  font-size: 24rpx;
  padding: 0 6rpx;
  box-sizing: border-box;
  color: #108FFF;
  border: 1px solid #108FFF;
}
.acti-footer-btn {
  width: 180rpx !important;
  text-align: center;
  height: 64rpx;
  line-height: 64rpx;
  color: #ffffff;
  font-size: 28rpx;
  padding: 0;
  background: linear-gradient(to right, #7799FF, #2D59DF);
  border-radius: 50rpx;
}
.acti-footer-title {
  margin: 20rpx 0;
  font-weight: bold;
  display: -webkit-box;
  font-size: 28rpx;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
Page({
  data: {
    list: [{
        url: 'https://res.liketon.cn/upfiles/20210308/0/20210308174415546.jpg'
      },
      {
        url: 'https://res.liketon.cn/upfiles/20210308/0/20210308174059500.jpg'
      },
      {
        url: 'https://res.liketon.cn/upfiles/20210308/0/20210308172722123.jpg'
      }
    ],
    vertical: false,
    interval: 3000,
    duration: 1000
  },
})
<swiper autoplay interval='{{interval}}' duration="{{duration}}"
  style="height:450rpx;padding:0 20rpx;box-sizing: border-box;" display-multiple-items='2' circular>
  <block wx:for="{{list}}" wx:key="*this">
    <swiper-item class="swiper-item">
      <view class="swiper-item-box">
        <view class="swiper-item-img">
          <image src="{{item.url}}" class="act-img" mode="aspectFill"></image>
        </view>
        <view class="acti-footer">
          <view class="acti-footer-title">
            <text class="tag">报名</text>花花花花花花艺线上体验课
            花花花艺线上体验课
            花花花艺线上体验课
            艺线上体验课
          </view>
          <button class="acti-footer-btn">报名></button>
        </view>
      </view>
    </swiper-item>
  </block>
</swiper>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值