【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获取文件完整路径
相关文章:
【uniapp】轮播图
前言 Uniapp的swiper组件是一个滑块视图容器组件,可以在其中放置多个轮播图或滑动卡片。它是基于微信小程序的swiper组件进行封装,可以在不同的平台上使用,如微信小程序、H5、App等。 效果图 前端代码 swiper组件 <template><vi…...
Rust编程语言代码详细运行、编译方法
以下是针对不同类型的 Rust 代码(以常见的命令行程序为例)详细的运行方法: 前提条件 在运行 Rust 代码之前,确保你已经在系统上安装了 Rust 编程语言环境。如果尚未安装,可以通过以下步骤进行安装: 访问…...
node.js基础学习-http模块-JSONP跨域传值(四)
前言 JSONP(JSON with Padding)是一种用于跨域数据传输的技术。在浏览器的同源策略限制下,一般情况下,JavaScript 不能直接从不同域的服务器获取数据。JSONP 通过利用 <script> 标签的跨域特性来绕过这个限制。 它本质上是一…...
Unity高效编程经验50条分享
1.避免频繁创建临时对象 错误写法:obj.transform.position pos;这种写法会在Lua中频繁返回transform对象导致gc正确写法:创建一个静态方法来设置位置,例如 class LuaUtil { static void SetPos(GameObject obj, float x, float y, float z)…...
TypeScript 泛型
在 TypeScript 中,泛型是一种强大的工具,它允许你在定义函数、类、接口或类型别名时不指定具体的类型。这意味着你可以为这些实体创建可重用的组件,这些组件可以在不同的类型上以一致的方式工作。今天,我们将深入探讨 TypeScript …...
【Java从入门到放弃 之 条件判断与循环】
条件判断与循环 条件判断if 语句if-else 语句if-else 嵌套语句switch 语句 循环for 循环while 循环do-while 循环break 和 continuebreak 关键字continue 关键字总结 条件判断 条件判断用于根据不同的条件执行不同的代码块。Java 中常用的条件判断语句有 if、if-else 和 switc…...
Ubuntu20.04安装kalibr
文章目录 环境配置安装wxPython下载编译测试报错1问题描述问题分析问题解决 参考 环境配置 Ubuntu20.04,python3.8.10,boost自带的1.71 sudo apt update sudo apt-get install python3-setuptools python3-rosinstall ipython3 libeigen3-dev libboost…...
Flink 任务启动脚本-V2(包括ck启动)
#!/bin/bash#crontab时设置,如果依赖其他环境变量配置,可以在脚本执行一下环境变量脚本 source /etc/profile# 进入脚本目录 curdirdirname "$0" curdircd "$curdir"; pwd echo "进入启动脚本目录 $curdir"# 定义应用程序…...
扫雷-完整源码(C语言实现)
云边有个稻草人-CSDN博客 在学完C语言函数之后,我们就有能力去实现简易版扫雷游戏了(成就感满满),下面是扫雷游戏的源码,快试一试效果如何吧! 在test.c里面进行扫雷游戏的测试,game.h和game.c…...
python -从文件夹批量提取pdf文章的第n页,并存储起来
python -从文件夹批量提取pdf文章的第n页,并存储起来 废话不多说,看下面代码 讲解一下下面代码 reader PyPDF2.PdfReader (file) 将文件转化为PdfReader 对象,方便使用内置方法。 first_page reader.pages[0] 提取第一页 writer PyPDF…...
R Excel 文件操作指南
R Excel 文件操作指南 概述 R 语言是一种强大的统计分析工具,广泛用于数据分析和可视化。在实际应用中,经常需要将 R 语言与 Excel 文件结合使用,以便处理和分析数据。本指南将介绍如何在 R 中读取、写入和操作 Excel 文件。 准备工作 在…...
RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange
前言: RabbitMQ 延迟队列插件(rabbitmq_delayed_message_exchange)是一个社区开发的插件,它为 RabbitMQ 添加了支持延迟消息的功能。通过这个插件,用户可以创建一种特殊的交换机类型 x-delayed-message,该…...
fatal error in include chain (rtthread.h):rtconfig.h file not found
项目搜索这个文件 rtconfig 找到后将其复制粘贴到 你的目录\Keil\ARM\ARMCC\include 应该还有cJSON,rtthread.h和 等也复制粘贴下...
Java 反射(Reflection)
Java 反射(Reflection) Java 反射(Reflection)是一个强大的特性,它允许程序在运行时查询、访问和修改类、接口、字段和方法的信息。反射提供了一种动态地操作类的能力,这在很多框架和库中被广泛使用&#…...
Python爬取机车网车型数据并存入Mysql数据库
结果展示(文末附完整代码): 一、引言 在当今数字化时代,数据对于各个领域的重要性不言而喻。对于机车行业而言,获取丰富的机车品牌、车型及详细信息数据,能够为市场分析、消费者研究等提供有力支持。本文将…...
fpga 时序分析基础
目录 触发器的动态参数 同步时序电路分析 1. 时钟脉冲的特性 2. 同步时序电路分析 Timing Analyzer的应用 异步时序与亚稳态问题 时序分析就是对时序电路进行时序检查,通过分析电路中所有寄存器之间的路径延迟以检查电路的传输延迟是否会导致触发器的建立时间…...
python学习——二维列表的列表生成式
二维列表的列表生成式允许你生成一个列表,其中每个元素本身也是一个列表。这在处理矩阵或表格数据时非常有用。 以下是如何使用列表生成式来创建二维列表的示例: 文章目录 基本语法示例1. 创建一个 3x3 的单位矩阵2. 创建一个 4x4 的乘法表3. 创建一个 …...
【错误❌】——槽函数定义好但未初始化
public slots:void onClose(); 初始化即可成功:...
OpenCV相机标定与3D重建(6)将3D物体点投影到2D图像平面上函数projectPoints()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::fisheye::projectPoints 是 OpenCV 库中用于鱼眼镜头模型的函数,它将3D物体点投影到2D图像平面上。这个函数对于模拟或者理解鱼眼…...
【Linux】剧幕中的灵魂更迭:探索Shell下的程序替换
🎬 个人主页:谁在夜里看海. 📖 个人专栏:《C系列》《Linux系列》《算法系列》 ⛰️ 一念既出,万山无阻 目录 📖一、进程程序替换 1.替换的演示 ❓替换与执行流 ❓程序替换≠进程替换 2.替换的原理 …...
艾尔登法环帧率解锁终极指南:告别卡顿,畅享丝滑游戏体验
艾尔登法环帧率解锁终极指南:告别卡顿,畅享丝滑游戏体验 【免费下载链接】EldenRingFpsUnlockAndMore A small utility to remove frame rate limit, change FOV, add widescreen support and more for Elden Ring 项目地址: https://gitcode.com/gh_m…...
新能源车轻量化为什么开始盯上高强镁合金?
续航,是悬在每一台纯电动汽车头上的达摩克利斯之剑。多充一度电、多堆一些正极材料,是一条路;但还有另一条路——把车造得更轻。 SAE(美国汽车工程师学会)的测算已经被反复引用:整车每减重100千克ÿ…...
Elden Ring帧率解锁终极指南:从60帧到144+的完整教程
Elden Ring帧率解锁终极指南:从60帧到144的完整教程 【免费下载链接】EldenRingFpsUnlockAndMore A small utility to remove frame rate limit, change FOV, add widescreen support and more for Elden Ring 项目地址: https://gitcode.com/gh_mirrors/el/Elden…...
ubuntu环境下为python项目配置taotoken多模型api密钥与端点
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 Ubuntu环境下为Python项目配置Taotoken多模型API密钥与端点 1. 准备工作 在Ubuntu系统上为Python项目接入Taotoken,首…...
MT-R1-Zero:基于强化学习的机器翻译范式革新与实战指南
1. 项目概述:当强化学习遇上机器翻译 在机器翻译这个老牌的自然语言处理任务里,我们似乎已经习惯了“数据驱动”的剧本:收集海量的双语平行句对,用它们来监督训练模型,让模型学会从源语言到目标语言的映射。这套方法&a…...
3个理由告诉你为什么选择哔哩下载姬:B站视频下载的终极解决方案
3个理由告诉你为什么选择哔哩下载姬:B站视频下载的终极解决方案 【免费下载链接】downkyi 哔哩下载姬downkyi,哔哩哔哩网站视频下载工具,支持批量下载,支持8K、HDR、杜比视界,提供工具箱(音视频提取、去水印…...
如何快速搭建个人小说图书馆:番茄小说下载器完整实战指南
如何快速搭建个人小说图书馆:番茄小说下载器完整实战指南 【免费下载链接】Tomato-Novel-Downloader 番茄小说下载器不精简版 项目地址: https://gitcode.com/gh_mirrors/to/Tomato-Novel-Downloader 你是否曾经遇到过这样的问题:想离线阅读喜欢的…...
从《苏珊的微笑》到你的角色:手把手教你用UE5的Morph Target曲线驱动自定义面部动画
从《苏珊的微笑》到你的角色:手把手教你用UE5的Morph Target曲线驱动自定义面部动画在数字角色动画领域,面部表情的细腻表现往往是区分业余与专业作品的关键分水岭。许多创作者在掌握了基础骨骼动画后,面对角色面部动画的实现却陷入困境——为…...
京东自动购物系统:高效补货监控与智能下单终极指南
京东自动购物系统:高效补货监控与智能下单终极指南 【免费下载链接】Jd-Auto-Shopping 京东商品补货监控及自动下单 项目地址: https://gitcode.com/gh_mirrors/jd/Jd-Auto-Shopping 在电商购物场景中,错过心仪商品的补货时机是每个消费者都可能遇…...
操作简便吗?8款AI论文写作工具综合榜,毕业答辩稳了!
写论文时是不是总卡在开头,毫无思路?文献资料太多,却找不到重点?格式调整一遍又一遍,查重还是不理想? 别担心!AI论文写作工具正在改变你的科研体验。本文将从学术严谨性、文献引用能力、查重合规…...
