网站伪静态有什么用/建站公司网站源码

网站伪静态有什么用,建站公司网站源码,南京app网站开发公司,如何做独立手机网站在开发一些业务场景时候&#xff0c;可能需要切换标签栏来展示不同的信息列表。 为此开发了一个Uniapp组件&#xff08;myTab&#xff09;&#xff0c;下面为组件的展示效果&#xff1a; 案例代码&#xff1a; <template><view class"content"><myt…

在开发一些业务场景时候,可能需要切换标签栏来展示不同的信息列表。

为此开发了一个Uniapp组件(myTab),下面为组件的展示效果:

案例代码:

<template><view class="content"><mytab :list="myList" name="category" :current="current" @change="handleChange"></mytab><view><view v-for="(item,index) in myList[current].picList" style="float:left;width:300rpx;height:200rpx;border-radius:20rpx;margin-left:30rpx;overflow:hidden;margin-top:30rpx"><image :src="item" style="width:300rpx;height:200rpx;" mode="aspectFill"></image></view></view></view>
</template><script>export default {data() {return {title: 'Hello',current:0,myList:[{category:"风景",picList:["https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142758A072.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142755A071.jpg"]},{category:"二次元",picList:["https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A069.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A070.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A068.jpg",]},{category:"电影",picList:["https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122925A066.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122912A061.jpg"]},{category:"唯美",picList:["https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122854A051.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122854A048.jpg"]},{category:"动画",picList:["https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122853A042.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122853A043.jpg"]},{category:"蜡笔小新",picList:["https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122853A041.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122853A040.jpg"]},{category:"欧美",picList:["https://bzadmin.ajiexcx.cn/img/2024/09/26/20240926091801A118.jpg","https://bzadmin.ajiexcx.cn/img/2024/09/07/20240907172005A031.jpg"]},{category:"IOS"}]}},onLoad() {},methods: {handleChange(index){console.log("选择了:",index)this.current = index;}}}
</script><style>page{padding: 30rpx;box-sizing: border-box;}.content {}
</style>

案例代码说明:

1、mytab为自己创建的组件,本页面直接使用该组件。

改组件有几个属性和事件动作,分别为name、current、@change事件,其中name代表着集合中对象属性名称,current为当前选中的选项索引(可以默认设置为0),@change事件为item 切换时的回调函数

2、本案例利用mytab组件实现点击不同的标签栏来显示不同的壁纸图片,本页面用myList集合数据来模拟后端传输过来的数据,其中这个集合的每个元素代表着每个标签页的信息,category属性存储标签栏的名称,picList属性存储每个标签页的壁纸图片集合,myList数据如下:

myList:[{category:"风景",picList:["https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142758A072.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142755A071.jpg"]},{category:"二次元",picList:["https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A069.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A070.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A068.jpg",]},{category:"电影",picList:["https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122925A066.jpg","https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122912A061.jpg"]}
]

故此,利用current来获取不同标签栏的壁纸图片集合,current为当前标签页的索引

<view v-for="(item,index) in myList[current].picList" ><image :src="item" style="width:300rpx;height:200rpx;" mode="aspectFill"></image>
</view>

3、本案例的项目结构:

本案例完整源码,可在微信小程序《星梦Blog》免费获取!

欢迎大家点赞、收藏、关注哦!

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

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

相关文章

文本组件+Image组件+图集

Canvas部分知识补充 元素渲染顺序 以Hierarchy参考 下方物体在上方物体前显示 子物体在父物体前显示 下方物体永远在前显示&#xff0c;无论上方的层次结构 资源导入 绝对路径&#xff1a;C:\Windows\Fonts下的许多字体可以用做UIText的字体资源 图片导入&#xff1a; 1.图…

C++初阶——类和对象(二)

C初阶——类和对象&#xff08;二&#xff09; 本期内容书接上回&#xff0c;继续讨论类和对象相关内容。类和对象属于C初阶部分&#xff0c;主要反映了面向对象编程的三大基本特点之一——封装&#xff0c;在C的学习中占有举足轻重的地位&#xff01; 一、类对象模型 1.如何…

LVGL移植到6818开发板

一、移植步骤 1.lv_config.h 配置文件启动 framebuffer 2、lv_config.h 配置文件关闭SDL 2.修改main.c 去掉SDL输入设备 3.修改Makefile 文件启动交叉编译 去掉警告参数 去掉SDL库 4.交叉编译代码 make clean #清空 ⭐ 必须要清空一次再编译&#xff01; 因为修改了 lv_con…

linux系统命令——权限

一、有哪些权限 读&#xff08;r&#xff09;——对应数字4 写&#xff08;w&#xff09;——对应数字2 执行&#xff08;x&#xff09;——对应数字1 二、权限及数字的对应 4对应r-- 2对应-w- 1对应--x 5对应r-x 6对应rw- 7对应rwx 三、文件的基本属性 如图&#…

Django项目之订单管理part3

一.前言 前面两章已经把登录给做完了&#xff0c;这一章节要说的是登录的校验和登录以后的菜单展示&#xff0c;内容还是很多的。 二.菜单和权限 2.1 是否登录 当我们进入其他的页面&#xff0c;我们首先要判断是否登录&#xff0c;这个时候我们就要借助中间件来做session和…

AI大模型测试用例生成平台

AI测试用例生成平台 项目背景技术栈业务描述项目展示项目重难点 项目背景 针对传统接口测试用例设计高度依赖人工经验、重复工作量大、覆盖场景有限等行业痛点&#xff0c;基于大语言模型技术实现接口测试用例智能生成系统。 技术栈 LangChain框架GLM-4模型Prompt Engineeri…

【论文笔记】Contrastive Learning for Compact Single Image Dehazing(AECR-Net)

文章目录 问题创新网络主要贡献Autoencoder-like Dehazing NetworkAdaptive Mixup for Feature PreservingDynamic Feature Enhancement1. 可变形卷积的使用2. 扩展感受野3. 减少网格伪影4. 融合空间结构信息 Contrastive Regularization1. 核心思想2. 正样本对和负样本对的构建…

异步加载错误如何解决

首先是 提供两张图 如果数据过多的情况下我在所内和住家形式频繁的来回切换 导致数据展示的不一样 大家是不是有这样的问题 这个是导致了数据展示有问题的情况 住家的情况本来是没有几层的 下面我帮大家解决一下 // 防止异步延迟 const Noop () > { } const lhl (resDa…

编译支持 RKmpp 和 RGA 的 ffmpeg 源码

一、前言 RK3588 支持VPU硬件解码&#xff0c;需要rkmpp进行调用&#xff1b;支持2D图像加速&#xff0c;需要 RGA 进行调用。 这两个库均能通过 ffmpeg-rockchip 进行间接调用&#xff0c;编译时需要开启对应的功能。 二、依赖安装 编译ffmpeg前需要编译 rkmpp 和 RGA&#xf…

Java多线程与高并发专题——原子类和 volatile、synchronized 有什么异同?

原子类和 volatile异同 首先&#xff0c;通过我们对原子类和的了解&#xff0c;原子类和volatile 都能保证多线程环境下的数据可见性。在多线程程序中&#xff0c;每个线程都有自己的工作内存&#xff0c;当多个线程访问共享变量时&#xff0c;可能会出现一个线程修改了共享变…

207、【图论】孤岛的总面积

题目 思路 相比于 206、【图论】岛屿数量&#xff0c;就是在这个代码的基础上。先遍历边界&#xff0c;将边界连接的岛屿变为0&#xff0c;然后再计算一遍当前为1的岛屿面积。 代码实现 import collectionsn, m list(map(int, input().split())) graph []for _ in range(n…

【GPT入门】第21课 langchain核心组件

【GPT入门】第21课 langchain核心组件 1. langchain 核心组件2.文档加载器 Document loader3.文档处理器3.1 langchain_text_splitters3.3 FAISS向量数据库和向量检索主要作用应用场景4. 对话历史管理1. langchain 核心组件 模型 I/O 封装 LLMs:大语言模型 Chat Models:一般…

应急响应靶机练习-Linux2

1.背景 前景需要&#xff1a;看监控的时候发现webshell告警&#xff0c;领导让你上机检查你可以救救安服仔吗&#xff01;&#xff01; 挑战内容&#xff1a; &#xff08;1&#xff09;提交攻击者IP &#xff08;2&#xff09;提交攻击者修改的管理员密码(明文) &#xff08;…

分享一个免费的CKA认证学习资料

关于CKA考试 CKA&#xff08;Certified Kubernetes Administrator&#xff09;是CNCF基金会&#xff08;Cloud Native Computing Foundation&#xff09;官方推出的Kubernetes管理员认证计划&#xff0c;用于证明持有人有履行Kubernetes管理的知识&#xff0c;技能等相关的能力…

【最新】 ubuntu24安装 1panel 保姆级教程

系统&#xff1a;ubuntu24.04.1 安装软件 &#xff1a;1panel 第一步&#xff1a;更新系统 sudo apt update sudo apt upgrade 如下图 第二步&#xff1a;安装1panel&#xff0c;运行如下命令 curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o …

UE4-UE5虚幻引擎,前置学习一--Console日志输出经常崩溃,有什么好的解决办法

有些差异 这么牛逼的引擎&#xff0c;居然有这种入门级别的问题&#xff0c;一触发清理&#xff0c;大概率(80%)会崩溃 无论虚幻5还是UE4都有这个问题&#xff0c;挺烦人的 实在忍不了了&#xff0c;这次&#xff0c;今天 就想问问有什么好的处理方法么&#xff1f;&#x…

【微服务】Nacos 配置动态刷新(简易版)(附配置)

文章目录 1、实现方法2、配置依赖 yaml3、验证效果 1、实现方法 环境&#xff1a;Nacos、Java、SpringBoot等 主要是在boostrap.yaml中的data-id属性下配置refresh:true来实现动态更新 2、配置依赖 yaml 具体的版本参考官方的说明&#xff1a;官方版本说明 <!--读取boo…

设计模式之备忘录设计模式

备忘录设计模式&#xff08;Memento Pattern&#xff09; 在不破坏封闭的前提下&#xff0c;捕获一个对象的内部状态&#xff0c;保存对象的某个状态&#xff0c;以便在适当的时候恢复对象&#xff0c;又叫做快照模式&#xff0c;属于行为模式备忘录模式实现的方式需要保证被保…

【最后203篇系列】016 Q201架构思考

前言 Q200已经达到了我既定的目标&#xff0c;在最近的3个月&#xff0c;我需要进一步完善&#xff0c;达到可以试产的程度。 在这个过程当中&#xff0c;许多知识和体会一直在变。 qtv200到目前&#xff0c;虽然通过习惯(每晚运行离线策略和比对)方式维持了注意力的集中&…

音视频入门基础:RTP专题(20)——通过FFprobe显示RTP流每个packet的信息

通过FFprobe命令&#xff1a; ffprobe -protocol_whitelist "file,rtp,udp" -of json -show_packets XXX.sdp 可以显示SDP描述的RTP流每个packet&#xff08;数据包&#xff09;的信息&#xff1a; 对于RTP流&#xff0c;上述的“packet”&#xff08;数据包&#…