08、完成首页轮播效果

移动端前端 bui

bui 开发玩 Android app

发布日期: 2019-09-15

文章字数: 583

阅读时长: 2 分

阅读次数:

视频

一、课程简介

本节们请求 banner api 完成轮播图效果如下

本节目标

二、开始撸码

1、创建 slide 组件「轮播图」

我们要完成此效果要使用 bui 的 slide「轮播组件」，上节们把 banner 的 api 请求来下了，我们在 home.js 中使用 bui-slide-demo 快速创建 slide 组件「对应的 html 和 js 都生成了」

// 焦点图 js 初始化:
var uiSlide = bui.slide({
    id:"#slide",
    height:380,
    autopage: true,
    loop: true
})

// 焦点图 html 对应的结构:
<div id="slide" class="bui-slide bui-slide-skin01">
    <div class="bui-slide-main">
        <ul>
            <li>
                <img src="images/banner01.png" alt="占位图">
            </li>
            <li style="display: none;">
                <img src="images/banner01.png" alt="占位图">
            </li>
        </ul>
    </div>
</div>

这样就快速为我们生成了一个 slide 组件，slide 有静态渲染和动态渲染，默认生成的是静态组件，也就是轮播图片是固定死的不符合我们的要求，我们只把 html 最外层的 div 拿到 home.html 的 main 标签中去

  <div id="slide" class="bui-slide bui-slide-skin01">
  </div>

2、修改 slide 满足动态渲染

给 slide 添加一个数据字段 data

var uiSlide = bui.slide({
    id:"#slide",
    height:380,
    autopage: true,
    loop: true,
    autoplay:true,// 自动播放
    data:[], // 返回的图片数据
})

当然也可以自定义模版使用 template 来显示自己需要的样式，这里我们不使用 template 就采用默认的模版渲染

3、动态填充数据

我们把请求下来的数据遍历添加到 data 中

 bui.ajax({
    url: "/api/banner/json",
    data: {}, //接口请求的参数
    // 可选参数
    method: "GET"
    }).then(function(result) {
    // 成功
    console.log(result.data)
    var dataImgs = new Array();
    for(let i=0 ;i<result.data.length;i++){
        dataImgs[i] = {
            image:result.data[i].imagePath
        }
    }

    // 修改动态值
      uiSlide.option("data",dataImgs)
}, function(result, status) {
    // 失败 
});