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":"继上编欧式客厅装修效果图之后,今天,小编为大家带来的是一组不同类型的欧式卧室装修效果图。欧式卧室的设计风格按不同的地域文化可分为北欧卧室、简欧卧室和传统欧式卧室。在中国,因为欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果,也吸取了洛可可风格中唯美、律…"},]
}

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

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

相关文章

Vue教程|搭建vue项目|Vue-CLI2.x 模板脚手架

一、项目构建环境准备 在构建Vue项目之前&#xff0c;需要搭建Node环境以及Vue-CLI脚手架&#xff0c;由于本篇文章为上一篇文章的补充&#xff0c;也是为了给大家分享更为完整的搭建vue项目方式&#xff0c;所以环境准备部分采用Vue教程&#xff5c;搭建vue项目&#xff5c;V…

Rust面向对象特性

Rust的面向对象特性 本文已同步至自建博客 Rust在设计的时候受到很多编程范式的影响&#xff0c;包括面向对象。面向对象的语言共有一些共同的特征&#xff0c;即对象、封装和继承。 封装 一个对象的实现细节对使用该对象的代码不可访问。因此&#xff0c;对象交互的唯一方…

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

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

Python知识分享第十五天

“”" 细节: 1.如下定义的类的几种写法 并无任何区别 最终效果都一样 只是写法不同 2.所有的类都直接或间接继承自object 它是所有类的父类 定义类的格式 格式1 class 类名: pass 格式2 class 类名(): pass 格式3 class 类名(父类名): pass “”" # 需求: 通过上述…

遥感数据集:FTW全球农田边界和对应影像数据,约160万田块边界及7万多个样本

Fields of The World (FTW) 是一个面向农业田地边界实例分割的基准数据集&#xff0c;旨在推动机器学习模型的发展&#xff0c;满足全球农业监测对高精度、可扩展的田地边界数据的需求。该数据集由kerner-lab提供&#xff0c;于2024年8月28日发布&#xff0c;主要特征包括&…

USB Type-C一线通扩展屏:多场景应用,重塑高效办公与极致娱乐体验

在追求高效与便捷的时代&#xff0c;启明智显USB Type-C一线通扩展屏方案正以其独特的优势&#xff0c;成为众多职场人士、娱乐爱好者和游戏玩家的首选。这款扩展屏不仅具备卓越的性能和广泛的兼容性&#xff0c;更能在多个应用场景中发挥出其独特的价值。 USB2.0显卡&#xff…

项目二技巧一

目录 nginx实现根据域名来访问不同的ip端口 配置Maven私服 快照版和发布版的区别 快照版本&#xff08;Snapshot&#xff09; 发布版本&#xff08;Release&#xff09; 导入发布版的父工程 理清楚授权规则 一.首先浏览器发送/manager/**路径请求 第二步&#xff1a;构造…

如何更好地设计SaaS系统架构

SaaS&#xff08;Software as a Service&#xff09;架构设计的核心目标是满足多租户需求、支持弹性扩展和高性能&#xff0c;同时保持低成本和高可靠性。一个成功的SaaS系统需要兼顾技术架构、资源利用、用户体验和商业目标。本文从以下几个方面探讨如何更好地设计SaaS系统架构…

手搓一个不用中间件的分表策略

场景&#xff1a;针对一些特别的项目&#xff0c;不用中间件&#xff0c;以月为维度进行分表&#xff0c;代码详细设计方案 1. 定义分片策略 首先&#xff0c;定义一个分片策略类&#xff0c;用于决定数据存储在哪个分表中 import java.time.LocalDate; import java.time.fo…

详解SpringCloud集成Camunda7.19实现工作流审批(二)

本章将分享的是camunda流程设计器--Camunda Modeler的基本使用&#xff08;对应camunda版本是7.19&#xff09;&#xff0c;包括bpmn流程图画法&#xff0c;各种控件使用以及一些日常业务场景的流程图的实现 参考资料&#xff1a; Camunda BPMN 基础组件-CSDN博客 Camunda: Exe…

webpack(react)基本构建

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的主要功能是将各种资源&#xff08;如 JavaScript、CSS、图片等&#xff09;视为模块&#xff0c;并将它们打包成一个或多个输出文件&#xff0c;以便…

html select下拉多选 修改yselect.js插件实现下拉多选,搜索,限制选中,默认回显等操作

需求&#xff1a;要在select标签实现下拉多选&#xff0c;搜索&#xff0c;限制选中&#xff0c;默认回显等操作&#xff0c;之前同事用的yselect.js&#xff0c;网上用的简直是寥寥无几&#xff0c;找了半天没找到限制选中的方法&#xff0c;看了源代码才发现根本没有&#xf…

c++哈希表(原理、实现、开放寻址法)适合新手

c系列哈希的原理及实现&#xff08;上&#xff09; 文章目录 c系列哈希的原理及实现&#xff08;上&#xff09;前言一、哈希的概念二、哈希冲突三、哈希冲突解决3.1、开放寻址法3.2、删除操作3.3、负载因子四、代码实现 总结 前言 红黑树平衡树和哈希有不同的用途。 红黑树、…

了解HTTPS以及CA在其中的作用

在这个信息爆炸的时代&#xff0c;每一次指尖轻触屏幕&#xff0c;都是一次数据的旅行。但您是否真正了解&#xff0c;这些数据在通往目的地的旅途中&#xff0c;是如何被保护的呢&#xff1f; HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;是一种安全的网…

electron-vite_14窗口默认全屏铺满

有时候应用打包后&#xff0c;希望全屏显示;而默认的宽度和高度,是无法满足的;这时需要单独处理; 核心代码 // 1.引入screen对象 import { BrowserWindow, screen } from electron; function createWindow(): void {// 2.获取屏幕尺寸const { width, height } screen.getPrim…

mysql-为什么需要线程池

mysql-为什么需要线程池 MySQL线程池的概述与应用 MySQL线程池是MySQL数据库中的一个重要组件&#xff0c;旨在提高数据库的性能、吞吐量和可伸缩性。它通过管理数据库服务器的线程生命周期&#xff0c;减少了线程的创建和销毁的开销&#xff0c;并通过优化资源使用&#xff…

【接口封装】——10、系统托盘

解释&#xff1a; 1、定义好按钮的状态&#xff1a;创建 map 映射关系&#xff0c;即 一个名字对应一个按钮 2、对不同按钮实现不同的信号槽函数 头文件&#xff1a; #include "SysTrayIcon.h" #include <qwidget.h> #include "define.h" #include &…

Nginx——配置部署域名服务器路由nginx

文章目录 基本配置报错解决只能通过[域名]:[端口]/[API路径]的方式请求 基本配置 user www-data; worker_processes auto;error_log /var/log/nginx/error.log notice; pid /run/nginx.pid;events {worker_connections 1024; }http {include /etc/nginx/mime…

C. Raspberries

time limit per test 2 seconds memory limit per test 256 megabytes You are given an array of integers a1,a2,…,ana1,a2,…,an and a number kk (2≤k≤52≤k≤5). In one operation, you can do the following: Choose an index 1≤i≤n1≤i≤n,Set aiai1aiai1. F…

Flink学习连载文章8--时间语义

Time的分类 (时间语义) EventTime:事件(数据)时间,是事件/数据真真正正发生时/产生时的时间 IngestionTime:摄入时间,是事件/数据到达流处理系统的时间 ProcessingTime:处理时间,是事件/数据被处理/计算时的系统的时间 EventTime的重要性 假设&#xff0c;你正在去往地下停…