当前位置: 首页 > news >正文

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

Rust编程语言代码详细运行、编译方法

以下是针对不同类型的 Rust 代码&#xff08;以常见的命令行程序为例&#xff09;详细的运行方法&#xff1a; 前提条件 在运行 Rust 代码之前&#xff0c;确保你已经在系统上安装了 Rust 编程语言环境。如果尚未安装&#xff0c;可以通过以下步骤进行安装&#xff1a; 访问…...

node.js基础学习-http模块-JSONP跨域传值(四)

前言 JSONP&#xff08;JSON with Padding&#xff09;是一种用于跨域数据传输的技术。在浏览器的同源策略限制下&#xff0c;一般情况下&#xff0c;JavaScript 不能直接从不同域的服务器获取数据。JSONP 通过利用 <script> 标签的跨域特性来绕过这个限制。 它本质上是一…...

Unity高效编程经验50条分享

1.避免频繁创建临时对象 错误写法&#xff1a;obj.transform.position pos;这种写法会在Lua中频繁返回transform对象导致gc正确写法&#xff1a;创建一个静态方法来设置位置&#xff0c;例如 class LuaUtil { static void SetPos(GameObject obj, float x, float y, float z)…...

TypeScript 泛型

在 TypeScript 中&#xff0c;泛型是一种强大的工具&#xff0c;它允许你在定义函数、类、接口或类型别名时不指定具体的类型。这意味着你可以为这些实体创建可重用的组件&#xff0c;这些组件可以在不同的类型上以一致的方式工作。今天&#xff0c;我们将深入探讨 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&#xff0c;python3.8.10&#xff0c;boost自带的1.71 sudo apt update sudo apt-get install python3-setuptools python3-rosinstall ipython3 libeigen3-dev libboost…...

Flink 任务启动脚本-V2(包括ck启动)

#!/bin/bash#crontab时设置&#xff0c;如果依赖其他环境变量配置&#xff0c;可以在脚本执行一下环境变量脚本 source /etc/profile# 进入脚本目录 curdirdirname "$0" curdircd "$curdir"; pwd echo "进入启动脚本目录 $curdir"# 定义应用程序…...

扫雷-完整源码(C语言实现)

云边有个稻草人-CSDN博客 在学完C语言函数之后&#xff0c;我们就有能力去实现简易版扫雷游戏了&#xff08;成就感满满&#xff09;&#xff0c;下面是扫雷游戏的源码&#xff0c;快试一试效果如何吧&#xff01; 在test.c里面进行扫雷游戏的测试&#xff0c;game.h和game.c…...

python -从文件夹批量提取pdf文章的第n页,并存储起来

python -从文件夹批量提取pdf文章的第n页&#xff0c;并存储起来 废话不多说&#xff0c;看下面代码 讲解一下下面代码 reader PyPDF2.PdfReader (file) 将文件转化为PdfReader 对象&#xff0c;方便使用内置方法。 first_page reader.pages[0] 提取第一页 writer PyPDF…...

R Excel 文件操作指南

R Excel 文件操作指南 概述 R 语言是一种强大的统计分析工具&#xff0c;广泛用于数据分析和可视化。在实际应用中&#xff0c;经常需要将 R 语言与 Excel 文件结合使用&#xff0c;以便处理和分析数据。本指南将介绍如何在 R 中读取、写入和操作 Excel 文件。 准备工作 在…...

RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange

前言&#xff1a; RabbitMQ 延迟队列插件&#xff08;rabbitmq_delayed_message_exchange&#xff09;是一个社区开发的插件&#xff0c;它为 RabbitMQ 添加了支持延迟消息的功能。通过这个插件&#xff0c;用户可以创建一种特殊的交换机类型 x-delayed-message&#xff0c;该…...

fatal error in include chain (rtthread.h):rtconfig.h file not found

项目搜索这个文件 rtconfig 找到后将其复制粘贴到 你的目录\Keil\ARM\ARMCC\include 应该还有cJSON&#xff0c;rtthread.h和 等也复制粘贴下...

Java 反射(Reflection)

Java 反射&#xff08;Reflection&#xff09; Java 反射&#xff08;Reflection&#xff09;是一个强大的特性&#xff0c;它允许程序在运行时查询、访问和修改类、接口、字段和方法的信息。反射提供了一种动态地操作类的能力&#xff0c;这在很多框架和库中被广泛使用&#…...

Python爬取机车网车型数据并存入Mysql数据库

结果展示&#xff08;文末附完整代码&#xff09;&#xff1a; 一、引言 在当今数字化时代&#xff0c;数据对于各个领域的重要性不言而喻。对于机车行业而言&#xff0c;获取丰富的机车品牌、车型及详细信息数据&#xff0c;能够为市场分析、消费者研究等提供有力支持。本文将…...

fpga 时序分析基础

目录 触发器的动态参数 同步时序电路分析 1. 时钟脉冲的特性 2. 同步时序电路分析 Timing Analyzer的应用 异步时序与亚稳态问题 时序分析就是对时序电路进行时序检查&#xff0c;通过分析电路中所有寄存器之间的路径延迟以检查电路的传输延迟是否会导致触发器的建立时间…...

python学习——二维列表的列表生成式

二维列表的列表生成式允许你生成一个列表&#xff0c;其中每个元素本身也是一个列表。这在处理矩阵或表格数据时非常有用。 以下是如何使用列表生成式来创建二维列表的示例&#xff1a; 文章目录 基本语法示例1. 创建一个 3x3 的单位矩阵2. 创建一个 4x4 的乘法表3. 创建一个 …...

【错误❌】——槽函数定义好但未初始化

public slots:void onClose(); 初始化即可成功&#xff1a;...

OpenCV相机标定与3D重建(6)将3D物体点投影到2D图像平面上函数projectPoints()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::fisheye::projectPoints 是 OpenCV 库中用于鱼眼镜头模型的函数&#xff0c;它将3D物体点投影到2D图像平面上。这个函数对于模拟或者理解鱼眼…...

【Linux】剧幕中的灵魂更迭:探索Shell下的程序替换

&#x1f3ac; 个人主页&#xff1a;谁在夜里看海. &#x1f4d6; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 一念既出&#xff0c;万山无阻 目录 &#x1f4d6;一、进程程序替换 1.替换的演示 ❓替换与执行流 ❓程序替换≠进程替换 2.替换的原理 …...

Tftpd32/Tftpd64不止是TFTP!手把手教你玩转它的DHCP和Syslog服务器功能

Tftpd32/Tftpd64&#xff1a;解锁DHCP与Syslog服务的隐藏潜力当大多数人提起Tftpd32/Tftpd64时&#xff0c;第一反应往往是它作为TFTP服务器的功能。这款轻量级工具确实在文件传输领域表现出色&#xff0c;但它的能力远不止于此。今天&#xff0c;我们将深入探索这款软件中两个…...

ARM PMU外部接口与性能监控寄存器详解

1. ARM性能监控寄存器外部接口深度解析性能监控单元(PMU)是现代处理器架构中用于硬件性能分析的核心模块&#xff0c;它通过一组可编程计数器实时捕获处理器微架构层面的各类事件。在ARMv8/v9架构中&#xff0c;PMU不仅可以通过系统寄存器访问&#xff0c;还提供了标准化的外部…...

如何高效批量下载音乐歌词:智能歌词管理完整指南

如何高效批量下载音乐歌词&#xff1a;智能歌词管理完整指南 【免费下载链接】ZonyLrcToolsX ZonyLrcToolsX 是一个能够方便地下载歌词的小软件。 项目地址: https://gitcode.com/gh_mirrors/zo/ZonyLrcToolsX ZonyLrcToolsX 是一款专业的跨平台歌词下载工具&#xff0c…...

炉石传说自动对战助手:5分钟上手,彻底解放双手的终极指南

炉石传说自动对战助手&#xff1a;5分钟上手&#xff0c;彻底解放双手的终极指南 【免费下载链接】Hearthstone-Script Hearthstone script&#xff08;炉石传说脚本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/he/Hearthstone-Script 还在为每天重复的炉石…...

科华UPS电源全品类汇总:选型与场景适配指南

科华UPS电源作为国内智慧电能领域的主流产品&#xff0c;覆盖家用、办公、机房、工业等全场景&#xff0c;产品系列丰富、规格齐全&#xff0c;但多数用户在选型时&#xff0c;常因分不清系列差异、功率适配、架构类型而踩坑。本文系统汇总科华UPS电源的核心分类、主流系列、核…...

当 AI Coding 进入复杂企业系统,为什么提效远没有宣传里那么美好 ?

以 Claude Code、Codex 为代表的自主编码智能体&#xff08;Coding Agents&#xff09;&#xff0c;正在以惊人的速度席卷软件开发者生态。与此同时&#xff0c;类似“10 倍开发效率”“普通人也能随手构建软件”“程序员即将失业”的说法&#xff0c;也随处可见。这种不分场景…...

基于MAX78000的医疗紧急呼叫系统:边缘AI与低功耗设计实战

1. 项目概述与核心价值大家好&#xff0c;我是Victor Hugo&#xff0c;一名电子工程师。今天我想和大家分享一个我最近完成并参与设计竞赛的项目&#xff1a;一个基于MAX78000 FTHR开发板的医疗紧急呼叫辅助系统。这个项目的核心&#xff0c;不是从零开始造一个新轮子&#xff…...

谷氨酸发酵过程的软测量建模【附模型】

✨ 长期致力于软测量、谷氨酸发酵、动力学模型、支持向量机、高斯过程、变量选择、异常状态研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;多阶段高斯…...

告别Postman!用APIfox搞定接口测试+自动化,这份保姆级教程带你从环境配置到报告生成

从Postman到APIfox&#xff1a;接口测试自动化的高效迁移指南如果你还在为接口测试中的重复劳动和多环境切换头疼&#xff0c;是时候考虑从Postman迁移到APIfox了。作为一名经历过这个转型过程的开发者&#xff0c;我想分享一些实战经验&#xff0c;帮助你平滑过渡并最大化利用…...

【python】ImportError: DLL load failed while importing QtWidgets: 找不到指定的程序。重新安装后搞定

文章目录前言一、PyQt6引用后报错二、使用步骤总结前言 想做个好看的界面&#xff0c;引用了PyQt6&#xff0c;却产生了新问题。 pip install pyqt6-tools&#xff0c;优先做这个动作进行修复。 一、PyQt6引用后报错 python里引用&#xff1a; from PyQt6.QtWidgets import…...