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

uniapp实现组件竖版菜单

社区图片页面

image-20240504205356409

scroll-view scroll-view | uni-app官网 (dcloud.net.cn)

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。

<template><view class="pics"><scroll-view class="left" scroll-y>  scroll-y 允许纵向滚动<view @click="leftClickHandle(index,item.id)" :class="active===index?'active':''"v-for="(item,index) in cates" :key="item.id">{{item.title}}</view></scroll-view><scroll-view class="right" scroll-y><view class="item" v-for="item in secondData" :key="item.id"><image @click="previewImg(item.img_url)" :src="item.img_url"></image><text>{{item.title}}</text></view><text v-if="secondData.length === 0">暂无数据</text></scroll-view></view>
</template><script>export default {//如何做高亮显示active == 当前选中分类的索引时 表达式 :class="active===index?'active':'' data() {return {cates: [],active: 0,secondData: []}},methods: {//获取分类数据async getPicsCate() {const res = await this.$myRequest({url: '/api/getimgcategory'})this.cates = res.data.messagethis.leftClickHandle(0, this.cates[0].id)//根据一级分类的初始ID获取了二级分类},//获取右侧图片数据async leftClickHandle(index, id) {this.active = index //高亮左侧使用的// 获取右侧的数据const res = await this.$myRequest({url: '/api/getimages/' + id})this.secondData = res.data.message},previewImg(current) {//预览图片const urls = this.secondData.map(item => {//连续预览图片return item.img_url})uni.previewImage({current,//点击的当前图片urls})}},onLoad() {this.getPicsCate()}}
</script><style lang="scss">page {height: 100%;}.pics {height: 100%;display: flex;.left {width: 200rpx;height: 100%;border-right: 1px solid #eee;view {height: 60px;line-height: 60px;color: #333;text-align: center;font-size: 30rpx;border-top: 1px solid #eee;}.active {//选中的样式background: $shop-color;color: #fff;}}.right {height: 100%;width: 520rpx;margin: 10rpx auto;.item {image {width: 520rpx;height: 520rpx;border-radius: 5px;}text {font-size: 30rpx;line-height: 60rpx;}}}}
</style>

获取图片分类

接口地址: /api/getimgcategory

请求方式:GET

参数:无

数据格式:

{"status":0,"message":[{"title":"家居生活","id":14},{"title":"摄影设计","id":15},{"title":"明星美女","id":16},{"title":"空间设计","id":17},{"title":"古典美女","id":24}]
}

二级图片列表

接口地址:/api/getimages/:cateid

请求方式:GET

参数:cateid: 图片的类别id,传入url写法: /api/getimages/23

数据格式:

{"status":0,"message":[{"id":40,"title":"欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果","img_url":"http://demo.dtcms.net/upload/201504/18/thumb_201504181246376332.jpg","zhaiyao":"继上编欧式客厅装修效果图之后,今天,小编为大家带来的是一组不同类型的欧式卧室装修效果图。欧式卧室的设计风格按不同的地域文化可分为北欧卧室、简欧卧室和传统欧式卧室。在中国,因为欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果,也吸取了洛可可风格中唯美、律…"},]
}

相关文章:

uniapp实现组件竖版菜单

社区图片页面 scroll-view scroll-view | uni-app官网 (dcloud.net.cn) 可滚动视图区域。用于区域滚动。 需注意在webview渲染的页面中&#xff0c;区域滚动的性能不及页面滚动。 <template><view class"pics"><scroll-view class"left"…...

osg、osgearth源码编译(二)

如果比较懒&#xff0c;也可以不看这篇文章&#xff0c;网上应该有很多编译好的库。也可以找我要。 本人还是建议学会编译&#xff0c;因为其他人电脑上编译好的&#xff0c;可能在你的电脑环境上&#xff0c;出现这样那样奇怪的问题&#xff0c;所以&#xff0c;最好还是自己能…...

从单一设备到万物互联:鸿蒙生态崛起的未来之路

目录 一、引言&#xff1a;开启智能时代的钥匙 二、鸿蒙生态概述&#xff1a;跨设备协同的核心价值 三、开发者机遇与挑战&#xff1a;抓住鸿蒙崛起的机会 四、鸿蒙生态崛起的前景&#xff1a;万物互联的未来 五、开发者在鸿蒙生态中的实践机遇与挑战 1. 跨设备开发的机遇…...

Kotlin的object修饰符定义类似Java的静态类/静态方法

Kotlin的object修饰符定义类似Java的静态类/静态方法 //类似Java的static类 object StaticCls {//类似Java静态变量private var num 0//类似Java的静态方法fun updateVal(n: Int) {num n}fun getVal(): Int {return num} }class MyTest() {fun setVal() {StaticCls.updateVal…...

html 中的 <code>标签

定义和用途 <code> 标签是HTML中的一个内联元素&#xff0c;用于定义计算机代码片段。当你需要在网页内容中展示代码&#xff0c;比如编程语言代码&#xff08;如JavaScript、Python、Java等&#xff09;、命令行指令、标记语言代码&#xff08;如HTML、XML等&#xff09…...

【Oracle11g SQL详解】GROUP BY 和 HAVING 子句:分组与过滤

GROUP BY 和 HAVING 子句&#xff1a;分组与过滤 在 Oracle 11g 中&#xff0c;GROUP BY 子句用于根据一个或多个列对查询结果进行分组&#xff0c;而 HAVING 子句用于对分组后的结果进行过滤。这两者常结合聚合函数使用&#xff0c;用以实现复杂的数据统计和分析。本文将系统…...

SSE基础配置与使用

什么是 Server-Sent Events (SSE) **Server-Sent Events (SSE) **是一种轻量的服务器向客户端推送消息的机制&#xff0c;基于 HTTP 协议实现单向通信&#xff0c;适用于需要实时更新的场景。 与 WebSocket 不同&#xff0c;SSE 只允许服务器向客户端发送数据&#xff0c;因此…...

Android -- 简易音乐播放器

Android – 简易音乐播放器 播放器功能&#xff1a;* 1. 播放模式&#xff1a;单曲、列表循环、列表随机&#xff1b;* 2. 后台播放&#xff08;单例模式&#xff09;&#xff1b;* 3. 多位置同步状态回调&#xff1b;处理模块&#xff1a;* 1. 提取文件信息&#xff1a;音频文…...

【开源免费】基于Vue和SpringBoot的技术交流分享平台(附论文)

博主说明&#xff1a;本文项目编号 T 053 &#xff0c;文末自助获取源码 \color{red}{T053&#xff0c;文末自助获取源码} T053&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...

Python异步编程新写法:asyncio模块的最新实践

Python异步编程新写法&#xff1a;asyncio模块的最新实践 引言1. 异步编程基础2. 旧写法的问题3. 最新的写法4. 代码解析5. 最佳实践6. 总结7. 参考资料 引言 在现代编程中&#xff0c;异步编程已经成为提高程序性能和响应能力的重要手段。Python的asyncio模块为开发者提供了一…...

【Docker】Docker配置远程访问

配置Docker的远程访问&#xff0c;你需要按照以下步骤进行操作&#xff1a; 1. 在Docker宿主机上配置Docker守护进程监听TCP端口 Docker守护进程默认只监听UNIX套接字&#xff0c;要实现远程访问&#xff0c;需要修改配置以监听TCP端口。 ‌方法一&#xff1a;修改Docker服务…...

网络安全入门之网络安全工具分享-含初期所有工具(附百度网盘链接)

网络安全基础工具 抓包工具 burpsuite 这是一款十分经典的抓包改包工具&#xff0c;在全球范围内使用十分广泛&#xff0c;并且其内置各种插件&#xff0c;具有爆破&#xff0c;自动识别验证码&#xff0c;加解密发包等多种功能 专业版破解网盘链接&#xff1a; 通过百度网…...

玩转 uni-app 静态资源 static 目录的条件编译

一. 前言 老生常谈&#xff0c;了解 uni-app 的开发都知道&#xff0c;uni-app 可以同时支持编译到多个平台&#xff0c;如小程序、H5、移动端 App 等。它的多端编译能力是 uni-app 的一大特点&#xff0c;让开发者可以使用同一套代码基于 Vue.js 的语法编写程序&#xff0c;然…...

Docker 容器隔离关键技术:Seccomp

Docker 容器隔离关键技术&#xff1a;Seccomp 在 Docker 容器中&#xff0c;Seccomp&#xff08;Secure Computing Mode&#xff09; 是一种内核安全机制&#xff0c;用来限制容器内的程序可以调用哪些系统调用&#xff08;Syscalls&#xff09;。通过列清单的方式&#xff0c…...

【大模型】深度解析 NLP 模型5大评估指标及 应用案例:从 BLEU、ROUGE、PPL 到METEOR、BERTScore

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;无论是机器翻译、文本生成&#xff0c;还是问答系统开发&#xff0c;模型性能评估指标始终是开发者绕不开的工具。BLEU、ROUGE、PPL&#xff08;困惑度&#xff09;、METEOR 和 BERTScore 是五个最具代表性的指标&am…...

LinuxC高级

gdb调试工具 gdb调试的作用 gdb用于调试代码中逻辑错误&#xff0c;而非语法错误 gdb调试流程 生成可以使用gdb调试的执行文件 gcc -g xxx.c ---> 生成的文件可以使用gdb调试 进入gdb工具 gdb 可执行文件 ---> 使用gdb工具开始调试可执行文件 r/run&#xff1a;运行代码 …...

实现PDF文档加密,访问需要密码

01. 背景 今天下午老板神秘兮兮的来问我&#xff0c;能不能做个文档加密功能&#xff0c;就是那种用户下载打开需要密码才能打开的那种效果。boss都发话了&#xff0c;那必须可以。 需求&#xff1a;将pdf文档经过加密处理&#xff0c;客户下载pdf文档&#xff0c;打开文档需要…...

LangChain——加载知识库文本文档 PDF文档

文档加载 这涵盖了如何加载目录中的所有文档。 在底层&#xff0c;默认情况下使用 UnstructedLoader。需要安装依赖 pip install unstructuredpython导入方式 from langchain_community.document_loaders import DirectoryLoader我们可以使用 glob 参数来控制加载特定类型文…...

深度学习2:从零开始掌握PyTorch:数据操作不再是难题

文章目录 一、导读二、张量的定义与基本操作三、广播机制四、索引与切片五、内存管理六、与其他Python对象的转换本文是经过严格查阅相关权威文献和资料,形成的专业的可靠的内容。全文数据都有据可依,可回溯。特别申明:数据和资料已获得授权。本文内容,不涉及任何偏颇观点,…...

MyBatis的if标签的基本使用

在MyBatis框架中&#xff0c;if标签用于在构建SQL语句时&#xff0c;根据参数条件判断的结果&#xff0c;动态地选择加入或不加where条件中。 一 常见使用 在使用MyBatis处理查询逻辑的时候&#xff0c;常用的是判断一些参数是否为空&#xff0c;列举常用的几种情况展示 1.1…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...