当前位置: 首页 > 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…...

【Azure Cache for Redis】Redis的导出页面无法配置Storage SAS时通过az cli来完成

问题描述 在Azure Redis的导出页面&#xff0c;突然不能配置Storage Account的SAS作为授权方式。 image.png 那么是否可以通过AZ CLI或者是Powershell来实现SAS的配置呢&#xff1f; 问题解答 可以的。使用 az redis export 可以实现 az redis export --container --prefix[--a…...

【微服务】Nacos

一、安装 1、官网地址&#xff1a;https://nacos.io/download/nacos-server/ 2、启动&#xff1a;找到bin目录下的startup.cmd双击启动&#xff0c;或者打开一个命令窗口输入&#xff1a; startup.cmd -m standalone双击启动后如下&#xff1a;可以访问控制台地址 访问后的…...

5、定义与调用函数

大家好,欢迎来到Python函数入门课程! 在编程中,函数就像一个可以重复使用的代码块,它接受输入(参数),执行特定的任务,并可能返回一个结果。想象一下,函数就像一个厨房里的搅拌机,你放入水果(参数),按下按钮(调用函数),它就会帮你制作出美味的果汁(返回值)。…...

Linux 网络编程之TCP套接字

前言 上一期我们对UDP套接字进行了介绍并实现了简单的UDP网络程序&#xff0c;本期我们来介绍TCP套接字&#xff0c;以及实现简单的TCP网络程序&#xff01; &#x1f389;目录 前言 1、TCP 套接字API详解 1.1 socket 1.2 bind 1.3 listen 1.4 accept 1.5 connect 2、…...

前海湾地铁的腾通数码大厦背后的临时免费停车点探寻

临时免费停车点&#xff1a;前海湾地铁的腾通数码大厦背后的桂湾大街&#xff0c;目前看不仅整条桂湾大街停了​车&#xff0c;而且还有工地餐点。可能是这个区域还是半工地状态&#xff0c;故暂时还不会有​罚单的情况出现。 中建三局腾讯数码大厦项目部A栋 广东省深圳市南山…...

OpenCV相机标定与3D重建(7)鱼眼镜头立体校正的函数stereoRectify()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::fisheye::stereoRectify 是 OpenCV 中用于鱼眼镜头立体校正的函数。该函数计算两个相机之间的校正变换&#xff0c;使得从两个相机拍摄的图像…...

前端如何获取unpkg的资源链接

在现代前端开发中&#xff0c;快速获取和使用npm包是一个常见需求。unpkg是一个全球性的CDN服务&#xff0c;它为npm上的每个包提供了快速访问。通过unpkg&#xff0c;你可以轻松地通过URL获取任何npm包的文件。本文将介绍如何获取unpkg的资源链接。 unpkg简介 unpkg是一个快…...

Flink 离线计算

文章目录 一、样例一&#xff1a;读 csv 文件生成 csv 文件二、样例二&#xff1a;读 starrocks 写 starrocks三、样例三&#xff1a;DataSet、Table Sql 处理后写入 StarRocks四、遇到的坑 <dependency><groupId>org.apache.flink</groupId><artifactId&…...

Git | 理解团队合作中Git分支的合并操作

合并操作 团队合作中Git分支的合并操作分支合并过程1.创建feature/A分支的过程2. 创建分支feature/A-COPY3.合并分支查看代码是否改变 团队合作中Git分支的合并操作 需求 假设团队项目中的主分支是main,团队成员A基于主分支main创建了feature/A&#xff0c;而我又在团队成员A创…...

C++多态的实现原理

【欢迎关注编码小哥&#xff0c;学习更多实用的编程方法和技巧】 1、类的继承 子类对象在创建时会首先调用父类的构造函数 父类构造函数执行结束后&#xff0c;执行子类的构造函数 当父类的构造函数有参数时&#xff0c;需要在子类的初始化列表中显式调用 Child(int i) : …...

wow电影在线观看/系统清理优化工具

[转载自博客](http://blog.csdn.net/huang_wei_cai/article/details/52515817) 前言&#xff1a; Android Studio中对一个自己库进行生成操作时将会同时生成.jar与.aar文件。如下是本人测试可行的方案&#xff0c;需要学习的可以参考。 分别存储位置&#xff1a; *.jar&#x…...

上海著名网站建设/seo排名优化公司哪家好

1.深圳大学计算机考研个人建议中山大学&#xff01;中山大学计算机科学系成立于1979年&#xff0c;是我国最早招收计算机本科专业的单位之一&#xff0c;也是华南地区最早招收计算机硕士、博士的单位之一。现有计算机软件与理论博士点&#xff0c;计算机软件与理论、计算机应用…...

沈阳网站建设建设公司/软文推广模板

问题&#xff1a; Pro环境2.9&#xff1b;关联了Revit贴图文件夹&#xff0c;仍然出现贴图丢失问题。 可尝试方法&#xff1a; 1. 本机安装Revit 本机可尝试安装Revit新版本软件&#xff0c;例如Revit2021&#xff1b;然后清除Pro的显示缓存&#xff0c;重新加载revit数据。…...

o2o电子商务网站建设/南宁百度seo

360/3D Spin & Zoom JavaScript Player 功能非常强大的一款插件&#xff0c;支持缩放&#xff0c;360度旋转&#xff0c;全屏浏览等等&#xff0c;特别适合用于产品图片展示。 在线演示 源码下载 360 Degrees Product View 兼容性非常好的一款360度产品展示插件&#…...

做网站注册的商标类别/深圳网络推广案例

2019独角兽企业重金招聘Python工程师标准>>> 你英语四级过了吗&#xff1f;功夫熊猫2看了吗&#xff1f;去除停用词后&#xff0c;功夫熊猫2使用了816个英语单词&#xff0c;你会说很简单吧&#xff0c;别急&#xff0c;我给你分析一下&#xff0c;这些单词中有125个…...

asp源码网站/图片优化网站

1.列表生成式 # 单层循环: 生成一个列表,列表元素为[1*1,2*2...9*9] print([i*i for i in range(1,10)])输出结果如下: [1, 4, 9, 16, 25, 36, 49, 64, 81]# 多层循环: print([ ij for i in ABC for j in XYZ])输出结果如下: [AX, AY, AZ, BX, BY, BZ, CX, CY, CZ]# 循环判断语…...