微信小程序幻灯片效果实现

视图容器swiper

index.wxml

<view class="container">
<!-- 幻灯片 start -->
  <view class="banner">
    <swiper indicator-dots="{{indicator_dots}}" indicator-color="{{indicator_color}}" indicator-active-color="{{indicator_active_color}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}">
      <swiper-item>
        <image src="../../images/banner-1.png" mode="widthFix" class="img"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../images/banner-2.png" mode="widthFix" class="img"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../images/banner-3.png" mode="widthFix" class="img"></image>
      </swiper-item>
    </swiper>
  </view> 
<!-- 幻灯片 end -->
</view>

index.wxss

/* 图片宽度设置 */
.img{
  width: 100%;
}
/* 设置三个小点的位置 */
.banner swiper{
  width: 100%;
  height: 230rpx;
}

index.js

//获取应用实例
const app = getApp()

Page({
  data: {
    indicator_dots:true,
    indicator_color: "#ffffff",
    indicator_active_color:"#F8626E",
    autoplay: true,
    interval: 3000,
    circular: true
  },
  onLoad: function () {
   
  }
})

方法二：（通过for循环遍历将接口数据渲染到模板显示）
index.wxml

<!-- 幻灯片 start -->
  <view class="banner">
    <swiper indicator-dots="{{indicator_dots}}" indicator-color="{{indicator_color}}" indicator-active-color="{{indicator_active_color}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}">
      <block wx:for="{{imgUrls}}" wx:key="item" wx:for-index="index">
        <swiper-item>
          <image src="{{item.imgsrc}}" mode="widthFix"  class="img" />
        </swiper-item>
      </block>
    </swiper>
  </view> 
<!-- 幻灯片 end -->

index.js

data: {
    indicator_dots:true,
    indicator_color: "#ffffff",
    indicator_active_color:"#F8626E",
    autoplay: true,
    interval: 3000,
    circular: true,
    imgUrls:[],
  },
  onLoad: function () {
    var that = this;
    //首页广告图
    wx.request({
      url: 'http://www.yzm.com/index.php/api/adv/index',

      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        that.setData({
          imgUrls: res.data.data
        });
      },
      complete() {
        wx.hideLoading();
      }
    });
  }

表结构

CREATE TABLE `yzm_adv` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '编号',
  `title` varchar(200) NOT NULL DEFAULT '' COMMENT '广告标题',
  `urls` varchar(200) NOT NULL DEFAULT '' COMMENT '广告url',
  `imgsrc` varchar(200) NOT NULL DEFAULT '' COMMENT '广告图',
  `add_time` int(11) NOT NULL DEFAULT '0' COMMENT '添加时间',
  `upd_time` int(11) NOT NULL DEFAULT '0' COMMENT '更新时间',
  `is_show` tinyint(4) NOT NULL DEFAULT '1' COMMENT '是否显示，1显示  0 不显示',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

接口调取代码

public function index()
    {
        $where = [
            'is_show'=>1
        ];
        $res= $this->advs->getAll($where);
        foreach($res as $k=>$v){
            $res[$k]['imgsrc'] = base_url().$v['imgsrc'];
        }
        $data = [
            'code' => 200,
            'data' => $res
        ];
        echo json_encode($data);
    }