uniapp实现组件竖版菜单
社区图片页面
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渲染的页面中,区域滚动的性能不及页面滚动。 <template><view class"pics"><scroll-view class"left"…...
osg、osgearth源码编译(二)
如果比较懒,也可以不看这篇文章,网上应该有很多编译好的库。也可以找我要。 本人还是建议学会编译,因为其他人电脑上编译好的,可能在你的电脑环境上,出现这样那样奇怪的问题,所以,最好还是自己能…...
从单一设备到万物互联:鸿蒙生态崛起的未来之路
目录 一、引言:开启智能时代的钥匙 二、鸿蒙生态概述:跨设备协同的核心价值 三、开发者机遇与挑战:抓住鸿蒙崛起的机会 四、鸿蒙生态崛起的前景:万物互联的未来 五、开发者在鸿蒙生态中的实践机遇与挑战 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中的一个内联元素,用于定义计算机代码片段。当你需要在网页内容中展示代码,比如编程语言代码(如JavaScript、Python、Java等)、命令行指令、标记语言代码(如HTML、XML等)…...
【Oracle11g SQL详解】GROUP BY 和 HAVING 子句:分组与过滤
GROUP BY 和 HAVING 子句:分组与过滤 在 Oracle 11g 中,GROUP BY 子句用于根据一个或多个列对查询结果进行分组,而 HAVING 子句用于对分组后的结果进行过滤。这两者常结合聚合函数使用,用以实现复杂的数据统计和分析。本文将系统…...
SSE基础配置与使用
什么是 Server-Sent Events (SSE) **Server-Sent Events (SSE) **是一种轻量的服务器向客户端推送消息的机制,基于 HTTP 协议实现单向通信,适用于需要实时更新的场景。 与 WebSocket 不同,SSE 只允许服务器向客户端发送数据,因此…...
Android -- 简易音乐播放器
Android – 简易音乐播放器 播放器功能:* 1. 播放模式:单曲、列表循环、列表随机;* 2. 后台播放(单例模式);* 3. 多位置同步状态回调;处理模块:* 1. 提取文件信息:音频文…...
【开源免费】基于Vue和SpringBoot的技术交流分享平台(附论文)
博主说明:本文项目编号 T 053 ,文末自助获取源码 \color{red}{T053,文末自助获取源码} T053,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...
Python异步编程新写法:asyncio模块的最新实践
Python异步编程新写法:asyncio模块的最新实践 引言1. 异步编程基础2. 旧写法的问题3. 最新的写法4. 代码解析5. 最佳实践6. 总结7. 参考资料 引言 在现代编程中,异步编程已经成为提高程序性能和响应能力的重要手段。Python的asyncio模块为开发者提供了一…...
【Docker】Docker配置远程访问
配置Docker的远程访问,你需要按照以下步骤进行操作: 1. 在Docker宿主机上配置Docker守护进程监听TCP端口 Docker守护进程默认只监听UNIX套接字,要实现远程访问,需要修改配置以监听TCP端口。 方法一:修改Docker服务…...
网络安全入门之网络安全工具分享-含初期所有工具(附百度网盘链接)
网络安全基础工具 抓包工具 burpsuite 这是一款十分经典的抓包改包工具,在全球范围内使用十分广泛,并且其内置各种插件,具有爆破,自动识别验证码,加解密发包等多种功能 专业版破解网盘链接: 通过百度网…...
玩转 uni-app 静态资源 static 目录的条件编译
一. 前言 老生常谈,了解 uni-app 的开发都知道,uni-app 可以同时支持编译到多个平台,如小程序、H5、移动端 App 等。它的多端编译能力是 uni-app 的一大特点,让开发者可以使用同一套代码基于 Vue.js 的语法编写程序,然…...
Docker 容器隔离关键技术:Seccomp
Docker 容器隔离关键技术:Seccomp 在 Docker 容器中,Seccomp(Secure Computing Mode) 是一种内核安全机制,用来限制容器内的程序可以调用哪些系统调用(Syscalls)。通过列清单的方式,…...
【大模型】深度解析 NLP 模型5大评估指标及 应用案例:从 BLEU、ROUGE、PPL 到METEOR、BERTScore
在自然语言处理(NLP)领域,无论是机器翻译、文本生成,还是问答系统开发,模型性能评估指标始终是开发者绕不开的工具。BLEU、ROUGE、PPL(困惑度)、METEOR 和 BERTScore 是五个最具代表性的指标&am…...
LinuxC高级
gdb调试工具 gdb调试的作用 gdb用于调试代码中逻辑错误,而非语法错误 gdb调试流程 生成可以使用gdb调试的执行文件 gcc -g xxx.c ---> 生成的文件可以使用gdb调试 进入gdb工具 gdb 可执行文件 ---> 使用gdb工具开始调试可执行文件 r/run:运行代码 …...
实现PDF文档加密,访问需要密码
01. 背景 今天下午老板神秘兮兮的来问我,能不能做个文档加密功能,就是那种用户下载打开需要密码才能打开的那种效果。boss都发话了,那必须可以。 需求:将pdf文档经过加密处理,客户下载pdf文档,打开文档需要…...
LangChain——加载知识库文本文档 PDF文档
文档加载 这涵盖了如何加载目录中的所有文档。 在底层,默认情况下使用 UnstructedLoader。需要安装依赖 pip install unstructuredpython导入方式 from langchain_community.document_loaders import DirectoryLoader我们可以使用 glob 参数来控制加载特定类型文…...
深度学习2:从零开始掌握PyTorch:数据操作不再是难题
文章目录 一、导读二、张量的定义与基本操作三、广播机制四、索引与切片五、内存管理六、与其他Python对象的转换本文是经过严格查阅相关权威文献和资料,形成的专业的可靠的内容。全文数据都有据可依,可回溯。特别申明:数据和资料已获得授权。本文内容,不涉及任何偏颇观点,…...
MyBatis的if标签的基本使用
在MyBatis框架中,if标签用于在构建SQL语句时,根据参数条件判断的结果,动态地选择加入或不加where条件中。 一 常见使用 在使用MyBatis处理查询逻辑的时候,常用的是判断一些参数是否为空,列举常用的几种情况展示 1.1…...
【Azure Cache for Redis】Redis的导出页面无法配置Storage SAS时通过az cli来完成
问题描述 在Azure Redis的导出页面,突然不能配置Storage Account的SAS作为授权方式。 image.png 那么是否可以通过AZ CLI或者是Powershell来实现SAS的配置呢? 问题解答 可以的。使用 az redis export 可以实现 az redis export --container --prefix[--a…...
【微服务】Nacos
一、安装 1、官网地址:https://nacos.io/download/nacos-server/ 2、启动:找到bin目录下的startup.cmd双击启动,或者打开一个命令窗口输入: startup.cmd -m standalone双击启动后如下:可以访问控制台地址 访问后的…...
5、定义与调用函数
大家好,欢迎来到Python函数入门课程! 在编程中,函数就像一个可以重复使用的代码块,它接受输入(参数),执行特定的任务,并可能返回一个结果。想象一下,函数就像一个厨房里的搅拌机,你放入水果(参数),按下按钮(调用函数),它就会帮你制作出美味的果汁(返回值)。…...
Linux 网络编程之TCP套接字
前言 上一期我们对UDP套接字进行了介绍并实现了简单的UDP网络程序,本期我们来介绍TCP套接字,以及实现简单的TCP网络程序! 🎉目录 前言 1、TCP 套接字API详解 1.1 socket 1.2 bind 1.3 listen 1.4 accept 1.5 connect 2、…...
前海湾地铁的腾通数码大厦背后的临时免费停车点探寻
临时免费停车点:前海湾地铁的腾通数码大厦背后的桂湾大街,目前看不仅整条桂湾大街停了车,而且还有工地餐点。可能是这个区域还是半工地状态,故暂时还不会有罚单的情况出现。 中建三局腾讯数码大厦项目部A栋 广东省深圳市南山…...
OpenCV相机标定与3D重建(7)鱼眼镜头立体校正的函数stereoRectify()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::fisheye::stereoRectify 是 OpenCV 中用于鱼眼镜头立体校正的函数。该函数计算两个相机之间的校正变换,使得从两个相机拍摄的图像…...
前端如何获取unpkg的资源链接
在现代前端开发中,快速获取和使用npm包是一个常见需求。unpkg是一个全球性的CDN服务,它为npm上的每个包提供了快速访问。通过unpkg,你可以轻松地通过URL获取任何npm包的文件。本文将介绍如何获取unpkg的资源链接。 unpkg简介 unpkg是一个快…...
Flink 离线计算
文章目录 一、样例一:读 csv 文件生成 csv 文件二、样例二:读 starrocks 写 starrocks三、样例三: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,而我又在团队成员A创…...
C++多态的实现原理
【欢迎关注编码小哥,学习更多实用的编程方法和技巧】 1、类的继承 子类对象在创建时会首先调用父类的构造函数 父类构造函数执行结束后,执行子类的构造函数 当父类的构造函数有参数时,需要在子类的初始化列表中显式调用 Child(int i) : …...
wow电影在线观看/系统清理优化工具
[转载自博客](http://blog.csdn.net/huang_wei_cai/article/details/52515817) 前言: Android Studio中对一个自己库进行生成操作时将会同时生成.jar与.aar文件。如下是本人测试可行的方案,需要学习的可以参考。 分别存储位置: *.jar&#x…...
上海著名网站建设/seo排名优化公司哪家好
1.深圳大学计算机考研个人建议中山大学!中山大学计算机科学系成立于1979年,是我国最早招收计算机本科专业的单位之一,也是华南地区最早招收计算机硕士、博士的单位之一。现有计算机软件与理论博士点,计算机软件与理论、计算机应用…...
沈阳网站建设建设公司/软文推广模板
问题: Pro环境2.9;关联了Revit贴图文件夹,仍然出现贴图丢失问题。 可尝试方法: 1. 本机安装Revit 本机可尝试安装Revit新版本软件,例如Revit2021;然后清除Pro的显示缓存,重新加载revit数据。…...
o2o电子商务网站建设/南宁百度seo
360/3D Spin & Zoom JavaScript Player 功能非常强大的一款插件,支持缩放,360度旋转,全屏浏览等等,特别适合用于产品图片展示。 在线演示 源码下载 360 Degrees Product View 兼容性非常好的一款360度产品展示插件&#…...
做网站注册的商标类别/深圳网络推广案例
2019独角兽企业重金招聘Python工程师标准>>> 你英语四级过了吗?功夫熊猫2看了吗?去除停用词后,功夫熊猫2使用了816个英语单词,你会说很简单吧,别急,我给你分析一下,这些单词中有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]# 循环判断语…...