小程序轮播图功能的实现

先简单介绍一下滑块视图swiper组件
以下是它的一些属性值，转载自微信公众平台小程序组件

对swiper组件有了一个大概的认识后，大家看我写的代码吧。

wxml代码如下：

  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" indicator-color="#fff" indicator-active-color="#cccccc">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" style="width:690rpx;height:350rpx;border-radius:14rpx;" data-id="{{item.target}}" data-type="{{item.type}}" bindtap='bannerClick'></image>
      </swiper-item>
    </block>
  </swiper>

wxss代码如下：

swiper {
  width: 690rpx;
  margin: 0 auto;
  height: 350rpx;
}
.wx-swiper-dots{
  position:relative;
  left: unset!important;
  right:295rpx;
  }
.wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 10rpx;
}

js代码如下：

   Page({
  data: {
    imgUrls: [
      'https://仅为示例',
      'https://仅为示例',
      'https://仅为示例'
    ],
    indicatorDots:  true,  //是否显示面板指示点
    autoplay: true,  //是否自动切换
    interval: 4000,  //自动切换时间间隔
    circular: true  //是否采用衔接滑动
  },

})

实现效果如下：

公司项目，页面其他内容马赛克处理