【uniapp】轮播图

前言

Uniapp的swiper组件是一个滑块视图容器组件，可以在其中放置多个轮播图或滑动卡片。它是基于微信小程序的swiper组件进行封装，可以在不同的平台上使用，如微信小程序、H5、App等。

效果图

前端代码

swiper组件

<template><view class="banner-content"><swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="300" :circular="true" @change="swiperChange"><block v-for="(item, index) in bannerList" :key="index"><swiper-item><a :href="item.jump_path" target="_blank"><image :src="item.image" mode="aspectFill" class="banner-image"></image></a></swiper-item></block></swiper></view>
</template>
<script>
import axios from 'axios';
export default {data() {return {bannerList: [],};},onLoad() {this.getBanner()},methods: {// 轮播图数据getBanner(){axios.get('http://demo2.com/api/index/banner')// 替换成自己的接口.then(response => {this.bannerList = response.data.data;})},}
};
</script>
<style>
.banner-content {width: 100%;height: 300px;
}
.banner {width: 100%;height: 100%;margin: auto;
}
.banner-image {width: 100%;height: 100%;
}
</style>

数据库

CREATE TABLE `banner` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(100) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '名称',`jump_path` varchar(100) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '跳转路径',`image` varchar(200) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '图片',`weigh` int(10) DEFAULT '0' COMMENT '权重',`status` tinyint(1) DEFAULT '1' COMMENT '是否显示:1=是,0=否',`create_time` bigint(16) DEFAULT '0' COMMENT '创建时间',`update_time` bigint(16) DEFAULT '0' COMMENT '修改时间',PRIMARY KEY (`id`)
)

接口（PHP）

public function banner(): void
{$data = Db::name('banner')->where(['status'=>1])->order(['weigh'=>'desc'])->field(['id','name','jump_path','image'])->select()->toArray();foreach ($data as $k => $v){$data[$k]['image'] = getFilePath($v['image']);}$this->success('成功', $data);
}

getFilePath获取文件完整路径