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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/62491.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

由于导包而引发的错误

今天在调试时发现删除功能无论如何都无法实现&#xff0c;于是调试找到了mapper层的错误但不知道为什么报错。以下是报错信息。 Caused by: org.apache.ibatis.binding.BindingException: Parameter userIds not found. Available parameters are [arg0, collection, list]at o…

网络安全-加密

1.概念 明文&#xff1a;需要被加密的消息&#xff0c;一般是人直接可以阅读理解的内容。(plaintext)密文: 被加密后的消息&#xff0c;一般是人不可直接阅读并理解的。(ciphertext)加密:将明文转换成密文的过程。(encryption)解密:将密文恢复成明文的过程。(decryption)加密…

音视频入门基础:MPEG2-TS专题(9)——FFmpeg源码中,解码TS Header的实现

一、引言 FFmpeg源码对MPEG2-TS传输流/TS文件解复用时&#xff0c;在通过read_packet函数读取出一个transport packet后&#xff0c;会调用handle_packet函数来处理该transport packet&#xff1a; static int handle_packets(MpegTSContext *ts, int64_t nb_packets) { //..…

Pytorch使用手册-使用 TensorBoard 可视化模型、数据和训练过程(专题十)

在 60 分钟速成课程中,我们展示了如何加载数据,将其传递通过我们定义的作为 nn.Module 子类的模型,训练该模型并在测试数据上进行测试。为了查看发生了什么,我们在模型训练过程中打印一些统计信息,以便了解训练是否进展顺利。然而,我们可以做得更好:PyTorch 与 TensorBo…

STM32 ADC --- 知识点总结

STM32 ADC — 知识点总结 文章目录 STM32 ADC --- 知识点总结cubeMX中配置注解单次转换模式、连续转换模式、扫描模式单通道采样的情况单次转换模式&#xff1a;连续转换模式&#xff1a; 多通道采样的情况禁止扫描模式&#xff08;单次转换模式或连续转换模式&#xff09;单次…

Android 引入 proto 项目及使用方法

Proto&#xff08;Protocol Buffers&#xff09;是Google开发的一种语言无关、平台无关的序列化结构数据的方法&#xff0c;它类似于JSON和XML&#xff0c;但相对于XML而言更小&#xff0c;相对于JSON而言解析更快&#xff0c;支持多语言。以下是将Proto引入Android项目的方法及…

Web day02 Js Vue Ajax

目录 1.javascript: 1.js的引入方式&#xff1a; 2.js变量 & 数据类型 & 输出语句&#xff1a; 模板字符串&#xff1a; 3.函数 & 自定义对象&#xff1a; 4. json 字符串 & DOM操作&#xff1a; 5. js事件监听&#xff1a; 6.js的模块化导入或者导出&a…

Kylin Server V10 下 RocketMQ 主备自动切换模式部署

一、NameServer简介 NameServer 是一个注册中心,提供服务注册和服务发现的功能。NameServer 可以集群部署,集群中每个节点都是对等的关系,节点之间互不通信。 服务注册 Broker 启动的时候会向所有的 NameServer 节点进行注册,注意这里是向集群中所有的 NameServer 节点注册…

Spacy小笔记:zh_core_web_trf、zh_core_web_lg、zh_core_web_md 和 zh_core_web_sm区别

Spacy小笔记 最近频繁用到spacy&#xff0c;就小记一下。 2024.11.29 zh_core_web_trf、zh_core_web_lg、zh_core_web_md 和 zh_core_web_sm区别 首先&#xff0c;它们都是预训练的中文模型&#xff1a; zh_core_web_trf:395M 架构: 基于 Transformer 架构&#xff08;bert…

芯片测试-RF中的S参数,return loss, VSWR,反射系数,插入损耗,隔离度等

RF中的S参数&#xff0c;return loss, VSWR&#xff0c;反射系数&#xff0c;插入损耗&#xff0c;隔离度 &#x1f4a2;S参数&#x1f4a2;&#x1f4a2;S11与return loss&#xff0c;VSWR&#xff0c;反射系数&#x1f4a2;&#x1f4a2;S21&#xff0c;插入损耗和增益&#…

Rust个人认为将抢占C和C++市场,逐渐成为主流的开发语言

本人使用C开发8年、C#开发15年、中间使用JAVA开发过项目、后期在学习过程中发现了Rust语言说它是最安全的语言&#xff0c;能够解决C、C的痛点、于是抽出一部分时间网上买书&#xff0c;看网上资料进行学习&#xff0c;这一学习起来发现和其它语言比较起来&#xff0c;在编码的…

解析类的泛型参数 Spring之GenericTypeResolver.resolveTypeArgument

GenericTypeResolver 是 Spring 的一个实用类&#xff0c;提供了在运行时解析泛型类型信息的能力。它包含了若干静态方法&#xff0c;可以用于解析类的泛型参数。GenericTypeResolver.resolveTypeArgument 方法可以用于解析一个具体类实现指定的泛型接口时&#xff0c;实际的泛…

tensorflow.python.framework.errors_impl.FailedPreconditionError

以下是我的报错 Traceback (most recent call last):File "e:\tool\anaconda\envs\openmmlab\lib\runpy.py", line 194, in _run_module_as_mainreturn _run_code(code, main_globals, None,File "e:\tool\anaconda\envs\openmmlab\lib\runpy.py", line 8…

一个开源轻量级的服务器资源监控平台,支持告警推送

大家好&#xff0c;今天给大家分享一款开源的轻量级服务器资源监控工具Beszel&#xff0c;提供历史数据记录、Docker容器统计信息监控以及多种警报功能&#xff0c;用于监控服务器资源。 项目介绍 Beszel由hub&#xff08;中心服务器端应用&#xff0c;基于PocketBase构建&…

linux centos nginx编译安装

编译安装nginx&#xff08;Centos&#xff09; 编译需要的基础环境yum -y install pcre-devel openssl openssl-devel gd-devel gcc gcc-c1.下载nginx源码包 Nginx源码包下载地址&#xff1a;nginx源码包下载 2. 上传nginx源码包到服务器 我上传的地址是/home/chenhao/nginx…

性能监控框架的底层原理

性能监控框架的原理可以分为数据采集、数据传输、数据分析与展示三个主要步骤。本质上&#xff0c;这些框架通过与应用程序运行的底层系统&#xff08;如CPU、内存、线程、网络等&#xff09;以及语言级机制&#xff08;如字节码、虚拟机、操作系统接口等&#xff09;交互&…

【面试重难点问题】c++中为什么可以函数重载,但是c语言中不可以

本文章是对于“c中为什么可以函数重载&#xff0c;但是c语言中不可以”这个问题的探究&#xff1a; 当然这是一个值得深入探讨的问题。在面对难题时&#xff0c;我们常常会竭尽全力寻找答案&#xff0c;不惜挖掘三尺以探究竟。面对上面这个问题时&#xff0c;理解计算机系统的…

Linux,如何将文件从一台服务器传到另一台服务器上

摘要 将文件从一台服务器上传到另一台服务器上用到了scp命令。 scp&#xff08;Secure Copy Protocol&#xff09;命令用于在本地和远程主机之间或两个远程主机之间安全地复制文件或目录。它基于SSH协议&#xff0c;因此文件传输过程中会进行加密。以下是scp命令的详细解释及…

日常应用开发遇到的小问题二三则

文章目录 前言Redis问题启用碎片自动回收失败启动Redis未脱离终端 Vercel问题未在Vecel团队的人提交无法触发自动部署更新package.json后部署Vercel时报错 Android问题主动请求通知权限网络状态变化的监听不能使用静态注册各种Service介绍和对比 总结 前言 这两天的工作又相对…

AI实践项目——图片视频自动上色系统,让旧照片焕然一新

1.主要内容 &#xff08;1&#xff09;项目概述 在图片处理的世界中&#xff0c;AI不仅用于识别和分析&#xff0c;还可以赋予灰度照片色彩&#xff0c;为其注入新的生命。今天&#xff0c;我们将探讨一种通过深度学习模型为灰度图片上色的技术。 ①参考文献 Colorful Image…