微信小程序轮播图渲染（示例）

第一步：utlis下创建的api.js写上封装

const GET = 'GET';
const POST = 'POST';
 
const baseURL = 'https://www.zzgoodqc.cn';//配置的域名

function request(method, url, data) {
    return new Promise(function(resolve, reject) {
        let header = {
            'content-type': 'application/json',
        };
        wx.request({
            url: baseURL + url,
            method: method,
            data: method === POST ? JSON.stringify(data) : data,
            header: header,
            success(res) {
                console.log(res);
                //请求成功
                //判断code是否为0表示成功
                if (res.data.code == 0) {
                    resolve(res);
                } else {
                    //其他错误
                    //reject('运行出错,请稍后再试');
                    console.log(res.data.msg);
                    wx.showToast({   //弹出框
                        title: res.data.msg,
                        icon: 'error',
                        duration: 2000
                      });
                }
            },
            fail(err) {
                //请求失败
                reject(err)
            }
        })
    })
}


const API = {
    newsList: () => request(GET, `/index.php/index/index/getImgList`),
  };

//接口可以集合到一块，集中管理

module.exports = {
  API: API
}

第二步：mydiv.wxml（写你自己创建的wxml里）:

<view class="parent">
  <!-- 轮播图 -->
  <swiper bindchange="monitorCurrent" indicator-dots="{{false}}" circular="true" indicator-color="white"
    indicator-active-color="orange" current="{{current}}" autoplay="{{autoplay}}">
    <block wx:for="{{obj}}" wx:key="*this">
      <swiper-item>
      <image class="imgss" src="{{item}}"></image>
        <!-- <view class=""></view> -->
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义轮播图进度点 -->
  <view class="dots">
    <block wx:for="{{backgroundArr}}" wx:for-index="index" wx:key="*this">
      <view class="{{current==index?'active':''}}"></view>
    </block>
  </view>
</view>

第三步：mydiv.wxss:

.parent {
  position: relative;
}

swiper {
  height: 400rpx;
}

swiper-item view {
  height: 100%;
}

.red {
  background-color: Pink;
}

.green {
  background-color: PaleGreen;
}

.blue {
  background-color: SkyBlue;
}

.dots {
  position: absolute;
  bottom: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.dots view {
  width: 10rpx;
  height: 10rpx;
  margin: 0 6rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.dots .active {
  width: 30rpx;
  background-color: orange;
}
.imgss{
  width: 750rpx;
}

第四步：mydiv.js

const app = getApp()
const $api = require('../../utils/api').API

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //轮播图的数组
    backgroundArr: ['red', 'green', 'blue','orange','pink','qqq','wwww'],
    //轮播图当前的下标
    current: 0,
    //是否自动播放轮播图
    autoplay: false,
    obj:[]
  },

  //监听轮播图的下标
  monitorCurrent: function (e) {
    // console.log(e.detail.current)
    let current = e.detail.current;
    this.setData({
      current: current
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    $api.newsList().then(res=>{
      
      console.log(res.data.data);
      this.setData({
        obj:res.data.data
    })
        })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //开启轮播图
    this.setData({
      autoplay: true
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    //关闭轮播图
    this.setData({
      autoplay: false
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //关闭轮播图
    this.setData({
      autoplay: false
    })
  },

})