开发环境配置

1. 轮播图效果
2. 轮播图样式实现 u-swiper
   1. 1 . 在首页中插入组件 pages/index/index.vue
   2. 2. 在data中绑定轮播图片
3. 轮播图前后端数据交互
   1. uni.request 请求后端接口获取轮播图数据
4. 课后脑补知识点
   1. uni-app 生命周期
   2. uni.request 用法
   3. 更多轮播图设置

轮播图效果

轮播图样式实现 u-swiper

如果安装前面章节正确安装了uView框架，通过使用uView框架提供的轮播图组件u-swiper，则可以用非常少的代码即可实现一个轮播图

1 . 在首页中插入组件 pages/index/index.vue

<template>
	<view>
        <!-- 搜索框 -->
        <!--  略过  -->
        <!-- 搜索框END -->
      
		<!-- uView轮播图 -->
		<view>
			<u-swiper :list="images" indicator></u-swiper>
		</view>
		<!-- uView轮播图END -->
	</view>
</template>

2. 在data中绑定轮播图片

data() {
    return {
        images: [ // 轮播图片
            // 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
            // 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
            // 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
        ]
    }
}

轮播图前后端数据交互

uni.request 请求后端接口获取轮播图数据

1. 新建一个全局变量文件sx_app/global/myglobal.js

// 后端域名
const base_url='http://127.0.0.1:8000'

//首页轮播图获取轮播图片
const swiper= base_url+'/swiper/';

export default {  
  swiper 
}

2. 在首页pages/index/index.vue script中，导入全局变量文件

import myglobal from '../../global/myglobal.js'

3. 在首页pages/index/index.vue onLoad中，添加获取轮播图请求代码

onLoad() {
    // 获取轮播图
    uni.request({
        url: myglobal.swiper,
        method: "GET",
        success: (res) => {
            console.log(res.data);
            //this.images = res.data;
            let pk = []
            res.data.forEach(function(item) {
                pk.push(item.url)
            })
            this.images = pk
        }
    })
}

在request中，url采用变量的方式，便于统一管理api接口地址。

课后脑补知识点

uni-app 生命周期

本节中，用到了页面生命周期 onLoad

更多生命周期，点击学习

uni.request 用法

更多用法说明

更多轮播图设置

参考官网使用说明

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。