微信小程序轮播方式

  1. 最近编写微信小程序,发现小程序自带的轮播方式轮播到最后一张图后会倒回到第一张图片,进行重新轮播,这种方式看起来十分变扭,所以在万能的网上搜索了一下解决方案,并记录如下:

index.wxml:

 <swiper class="banner" indicator-dots="true" circular="true" autoplay="true" interval="3000" duration="1000">
    <swiper-item wx:for="{{banner}}" wx:key="id">
      <image src="{{item.url}}" background-size="cover"></image>
    </swiper-item>
  </swiper>

index.wxss:

.banner {
  width: 750rpx;
  height: 417rpx;
}

.banner image {
  width: 100%;
  height: 417rpx;
}    

index.json

{
  "navigationBarTitleText": "首页",
}

index.js

Page({
  data: {
    brands: [ {
    url : "http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg"
    }]
  },

其中 circular=“true” 的作用就是让轮播图流畅的播放,其他的属性是轮播几秒一次等等;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值