【uniapp】轮播图

火³可²2024-11-29 16:38

前言

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

效果图

前端代码

swiper组件

html 复制代码

<template>
  <view class="banner-content">
    <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="300" :circular="true">
      <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>

数据库

sql 复制代码

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）

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获取文件完整路径