微信小程序之轮播栏功能

微信小程序实现轮播栏功能：【复制即可展示效果】

<!--wxml-->
<!-- 首页专场栏 -->
<view class="home-top">
  <!-- 轮播滚动模块 -->
  <swiper autoplay="true" duration="3000" bindchange="swiperChange">
    <!-- 轮播滚动单元 -->
    <swiper-item class="top-item" wx:for="{{home_top_image}}">
      <image src="{{item.url}}"></image>
      <view class="dsc">{{item.content}}</view>
    </swiper-item>
  </swiper>
  <!-- 轮播滚动数字 -->
  <view class="swiper-page">{{current_page}}/{{total_page}}</view>
</view>

/*wxss*/
/* 首页专场栏样式 */
.home-top {
  height: 330rpx;
  top: 80rpx;
  position: relative;
}

.home-top swiper{
  height: 100%;
  width: 100%;
}

.home-top swiper-item{
  position: relative;
}

.top-item image{
  height: 100%;
  width: 100%;
}

.top-item view{
  position: absolute;
  background: rgba(0,0,0,0.5);
  color: white;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60prx ;
  font-size: 35rpx;
  text-align: center;
}
.home-top .swiper-page{
  position: absolute;
  color: rgb(255, 255, 255);
  bottom: 5rpx;
  right: 10rpx;
  font-size: 35rpx;
}

JS中的home_top_image数组的content、url需要根据自己的业务逻辑和数据修改！

//js
Page({
  data: {
     current_page : 1,
     total_page:null,
     home_top_image:[
       {id:0,content:"法式烤串",url:"/images/home/烧烤top1.jpg"},
       {id:1,content:"精美五花肉",url:"/images/home/烧烤top2.jpg"},
       {id:2,content:"特色炭烤牛肉串",url:"/images/home/烧烤top3.jpg"},
       {id:3,content:"正宗烤羊肉串",url:"/images/home/烧烤top4.jpg"}
     ]
   },
   /**
    * 获取轮播栏的轮播当前页数
    * @param {*} e 
    */
   swiperChange(e){
     var current_page = e.detail.current
     this.setData({
       current_page:current_page+1
     })
   },
   /**
    * 获取轮播栏的轮播总页数
    */
   getSwiperPages(e){
     this.setData({
       total_page:this.data.home_top_image.length
     })
    }
 })

效果预览：