【uniapp】轮播图

前言

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

相关推荐
柯南二号1 分钟前
【大前端】Vue 和 React 的区别详解 —— 两大前端框架深度对比
前端·vue.js·前端框架
IT_陈寒29 分钟前
「Redis性能翻倍的5个核心优化策略:从数据结构选择到持久化配置全解析」
前端·人工智能·后端
fakaifa31 分钟前
【高级版】沃德政务招商系统源码+uniapp小程序
小程序·uni-app·源码下载·沃德政务招商系统·招商系统源码
weixin_4469388735 分钟前
uniapp vue-i18n如何使用
前端·vue.js·uni-app
有来技术1 小时前
UniApp 自定义导航栏适配指南:微信小程序胶囊遮挡、H5 与 App 全端通用方案
微信小程序·uni-app
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
excel1 小时前
Vue 组件与插件的区别详解
前端
JarvanMo2 小时前
Flutter 开发:应用颜色使用 Class 还是 Enum?—— 你应该选择哪一个?
前端
HBR666_2 小时前
AI编辑器(二) ---调用模型的fim功能
前端·ai·编辑器·fim·tiptap
csgo打的菜又爱玩5 小时前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js