swiper

第一条页面应用案例

使用微信小程序swiper轮播图组件搭配PbootCMS后台制作轮播图效果

1、在 index.js 中编写API调用轮播图的js文件

首先头部引入API组件

const api = require('../../utils/api.js');  //路径根据自己的实际情况调整

2、在 index.js 中编写生命周期函数--监听页面加载

使用let方法，让that只作用在次块级作用域中

onLoad: function (options) {

  let that = this;  // 缺少无效果

  let gid = 1; // 定义轮播图编号

  let num = 10; // 定义轮播图数量

  api.getSlide(gid, num).then(function (slide) {

    // 通过setData把获取到的数据赋值到页面初始数据的data对象,这样就可以在wxml中使用数据了。

    that.setData({

      getSlide: slide.data,

    })

  // 把获取的数据输出到控制台看看

  // console.log(slide.data);

  })

},

3、在 index.wxml 中编写页面轮播图文件

使用了官方推荐的轮播图功能组件 swiper组件手册

<view class='banner'>

  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

    <block wx:for="{{getSlide}}" wx:key="">

      <swiper-item>

        <image src="http://域名{{item.pic}}" class="slide-image" width="375"/>

      </swiper-item>

    </block>

  </swiper>

</view>

4、在 index.js 中为轮播图插件提供基础属性

此处使用了微信小程序中的 数据绑定

data: {

  // banner轮播组件属性

  indicatorDots: true, // 是否显示面板指示点

  autoplay: true, // 是否自动切换

  interval: 3000, // 自动切换时间间隔

  duration: 800, // 滑动动画时长

},

5、在 index.wxss 中为轮播图添加样式

使用官方推荐的 rpx 尺寸单位，将轮播图图片设置为高 300rpx

.slide-image {

  width: 100%;

  height: 300rpx;

}

参数说明

在编写swiper循环时，使用官方的<block wx:for="{{get_slide}}"> 会报错

只需要加上空 wx:key=""，或者是 wx:key="this"就可以，例如：<block wx:for="{{get_slide}}" wx:key="">

列表渲染 wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">

  {{index}}: {{item.message}}

</view>