微信小程序之自定义轮播图实例

朴灿烈づ我的快乐病毒、 2022-01-29 05:19 179阅读 0赞

### 业务需求： ###

5个图片轮番播放，可以左右滑动，点击指示点可以切换图片

### 重点说明： ###

由于微信小程序，整个项目编译后的大小不能超过1M  
![在这里插入图片描述][20190521093908687.png]

# index.wxml： #

这里使用小程序提供的组件  
autoplay：自动播放  
interval：自动切换时间  
duration：滑动动画的时长  
current：当前所在的页面  
bindchange：current 改变时会触发 change 事件

由于组件提供的指示点样式比较单一，另外再自定义指示点的样式

<view class="recommend" >
      <view class="swiper-container">
        <swiper autoplay="auto" interval="5000" duration="500" current="{
         {swiperCurrent}}" bindchange="swiperChange" class="swiper">
          <block wx:for="{
         {slider}}" wx:key="unique">
            <swiper-item data-id="{
         {item.id}}" data-url="{
         {item.linkUrl}}">
              <image src="{
         {item.picUrl}}" class="img"></image>
            </swiper-item>
          </block>
        </swiper>
        <view class="dots">
          <block wx:for="{
         {slider}}" wx:key="unique">
            <view class="dot{
         {index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{
         {index}}">{
       {index+1}}</view>
          </block>
        </view>
      </view>
    </view>

# index.wxss： #

.swiper-container{
        
      position: relative;
    }
    .swiper-container .swiper{
        
      height: 300rpx;
    }
    .swiper-container .swiper .img{
        
      width: 100%;
      height: 100%;
    }
    .swiper-container .dots{
        
      position: absolute;
      right: 40rpx;
      bottom: 20rpx;
      display: flex;
      justify-content: center;
    }
    .swiper-container .dots .dot{
        
      margin: 0 10rpx;
      width: 28rpx;
      height: 28rpx;
      background: #fff;
      border-radius: 50%;
      transition: all .6s;
      font: 300 18rpx/28rpx "microsoft yahei";
      text-align: center;
    }
    .swiper-container .dots .dot.active{
        
      background: #f80;
      color:#fff;
    }

# index.js： #

//导入js
    var util = require('../../utils/util.js')
    Page({
        
      data: {
        
        slider: [],
        swiperCurrent: 0
      },
      onLoad: function () {
        
        var that = this;
    //网络访问，获取轮播图的图片
        util.getRecommend(function(data){
        
          that.setData({
        
            slider: data.data.slider
          })
        }); 
      },
      //轮播图的切换事件
      swiperChange: function(e){
        
    //只要把切换后当前的index传给<swiper>组件的current属性即可
        this.setData({
        
          swiperCurrent: e.detail.current
        })
      },
      //点击指示点切换
      chuangEvent: function(e){
        
        this.setData({
        
          swiperCurrent: e.currentTarget.id
        })
      }
    })

# utils.js： #

//网络访问
    function getRecommend(callback) {
        
      wx.request({
        
        url: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
        data: {
        
          g_tk: 5381,
          uin: 0,
          format: 'json',
          inCharset: 'utf-8',
          outCharset: 'utf-8',
          notice: 0,
          platform: 'h5',
          needNewCode: 1,
          _: Date.now()
        },
        method: 'GET',
        header: {
        'content-Type': 'application/json'},
        success: function(res){
        
          if(res.statusCode == 200){
        
            callback(res.data);
          }
        }
      })
    }
     
    module.exports = {
        
      getRecommend: getRecommend
    }

## 运行： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]

原文地址： [https://blog.csdn.net/michael\_ouyang/article/details/58591232][https_blog.csdn.net_michael_ouyang_article_details_58591232]

[20190521093908687.png]: /images/20220129/175276abbe5d49268d9e3a1fe7fe1ecb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]: /images/20220129/c8f1b9505d054c24a59105380cbd0b52.png
[https_blog.csdn.net_michael_ouyang_article_details_58591232]: https://blog.csdn.net/michael_ouyang/article/details/58591232