小程序 轮播图

小程序轮播图

全栈程序员-站长 • 2022年5月11日上午7:40 • 未分类 • 阅读 40

大家好，又见面了，我是你们的朋友全栈君。

轮播图：

css

swiper {

height: 400rpx;

}

swiper-item image {

width: 100%;

height: 100%;

}

.swiper-container{

position: relative;

margin-top:-300rpx;

}

.swiper-container .swiper{

height: 300rpx;

}

.swiper-container .swiper .img{

width: 90%;

height: 100%;

margin: 0 5%;

border-radius: 20rpx;

}

xml

<view class="swiper-container">

  <swiper indicator-dots="{
  
  {indicatorDots}}" autoplay="{
  
  {autoplay}}" indicator-color="{
  
  {indicatorCo}}" indicator-active-color="{
  
  {indicatoraAC}}" interval="{
  
  {interval}}" duration="{
  
  {duration}}" circular="{
  
  {duration}}" current="{
  
  {swiperCurrent}}" bindchange="swiperChange" class="swiper">

    <block wx:for="{
  
  {imgUrls}}" wx:key="unique">

      <swiper-item>

        <image src="{
  
  {item}}" class="img" bindtap="swipclick" mode="aspectFill"/>

      </swiper-item>

    </block>

  </swiper>
  

</view>

Page({

  data: {

    swiperCurrent: 0,

    indicatorDots: true,

    autoplay: true,

    interval: 3000,

    duration: 800,

    circular: true,

    indicatorCo:"#ffdfdc",

    indicatoraAC:"#ff948a",

    imgUrls: [

      'http://life.southmoney.com/tuwen/UploadFiles_6871/201805/20180531142617331.jpg',

      'http://life.southmoney.com/tuwen/UploadFiles_6871/201805/20180531142617331.jpg',

      'http://life.southmoney.com/tuwen/UploadFiles_6871/201805/20180531142617331.jpg'

    ],

    links: [

      '../user/user',

      '../user/user',

      '../user/user'

    ]


  },

  //轮播图的切换事件

  swiperChange: function (e) {

    this.setData({

      swiperCurrent: e.detail.current

    })

  },

  //点击指示点切换

  chuangEvent: function (e) {

    this.setData({

      swiperCurrent: e.currentTarget.id

    })

  },

  //点击图片触发事件

  swipclick: function (e) {

    console.log(this.data.swiperCurrent);

    wx.switchTab({

      url: this.data.links[this.data.swiperCurrent]

    })

  }

})

效果图（不会录频啊有小伙伴告诉我吗哈哈哈哈）

小程序轮播图