前言
Uniapp的swiper组件是一个滑块视图容器组件，可以在其中放置多个轮播图或滑动卡片。它是基于微信小程序的swiper组件进行封装，可以在不同的平台上使用，如微信小程序、H5、App等。
效果图
前端代码
<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);
}