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

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 中编写页面轮播图文件

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

<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>