uni-app--》打造个性化壁纸预览应用平台（二）

🏙️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名前端工程师

🌄个人主页：亦世凡华、

🌆系列专栏：uni-app

🌇座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，对于想从移动端开发方向进一步发展的朋友，希望看到我文章的朋友能对你有所帮助。

        今天开始使用vue3+uni-app搭建一个电商购物的小程序，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的github上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端uni-app知识。

        如果是第一次接触uni-app并且想学习uni-app的朋友，我是不建议直接从此次实战项目开始看起，可以先阅读一下我以前的基础文章：什么是uniapp？如何开发uniapp？按部就班的学习可以让学习变得更轻松更容易上手哦，闲话少说我们直接开始今天的uni-app实战篇。

目录

🏔️分类列表页面

🌋预览壁纸页面

🗻定义头部导航

🏕️公告页面布局

🏔️分类列表页面

当我们点击首页的壁纸图片的时候，肯定是要跳转到对应的详情页面的，这里我们创建一个分类列表页面，用于存放具体的壁纸信息，由于不仅仅只是首页需要跳转，别的页面也是需要该分类页面，所以这里我们就创建与首页平齐的文件夹，如下所示：

创建好分类页面之后，接下来我们开始创建对应的文件内容样式，这里暂时用静态图片代替：

<template><view class="classlist"><view class="content"><navigator url="" class="item" v-for="item in 10" :key="item"><image src="../../common/image/2.jpg" mode="aspectFill"></image></navigator></view></view>
</template><script setup></script><style scoped lang="scss">
.classlist {.content {display: grid;grid-template-columns: repeat(3, 1fr);gap: 5rpx;padding: 5rpx;.item {height: 440rpx;image {width: 100%;height: 100%;display: block;}}}
}
</style>

然后我们在我们上篇文章讲解到的内容选择区域设置的公共组件处设置跳转链接，这里我们直接传入对应的路径即可，如下所示：

因为首页和分类页面采用相同的组件，所以实现的方式是一致的，呈现的效果如下所示：

🌋预览壁纸页面

接下来开始对预览页面的内容进行开发，这里仍然需要在pages目录下新建一个页面，老生常谈的事这里就不再赘述了，因为壁纸要全屏展示，所以这里我们给创建的页面设置一下自定义导航栏，默认导航栏就会被去除掉：

基础的页面布局如下所示，这里我们设置了一下壁纸的一些遮罩内容，当点击图片的时候，遮罩内容消失，然后用户就可以手动滑动图片了，当再次点击壁纸，遮罩又出现了，具体的实现代码如下所示：

<template><view class="preview"><swiper circular><swiper-item v-for="item in 5" :key="item"><image @tap="maskChange" src="../../common/image/2.jpg" mode="aspectFill"></image></swiper-item></swiper><view class="mask" v-show="maskState"><view class="goBack"></view><view class="count">3 / 9</view><view class="time"><uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat></view><view class="date"><uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat></view><view class="footer"><view class="box" v-for="item in information" :key="item"><uni-icons :type="item.icon" size="28" :color="item.color"></uni-icons><view class="text">{{ item.name }}</view></view></view></view>ri</view>
</template><script setup>
import { ref} from 'vue'// 默认显示遮罩内容
const maskState = ref(true)
// 文本信息
let information = ref([{ name: '信息', icon: 'info', color: 'orange' },{ name: '5分', icon: 'star', color: 'yellow' },{ name: '下载', icon: 'download', color: 'green' },
])// 点击图片取消遮罩内容
const maskChange = () => {maskState.value = !maskState.value
}
</script>

最终呈现的效果如下所示：

信息弹窗：然后接下来我们要给这个壁纸设置一个弹出层，用来告知用户当前壁纸的一些相关信息，这里我们用到了uni官网提供的弹出层组件，如下我们需要进行安装：

然后这里我们用到了一个评分的功能，这里我们也可以使用uni官网提供的插件，如下：

设置的代码效果如下所示：

<!-- 弹出层 -->
<uni-popup ref="infoPopup" type="bottom" :safe-area="false"><view class="infoPopup"><view class="popHeader"><view></view><view class="title">壁纸信息</view><view class="close" @tap="handleClose"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view></view><scroll-view scroll-y><view class="content"><view class="row" v-for="item in popData" :key="item"><view class="label">{{ item.label }}</view><view class="value roteBox" v-if="item.label == '评分:'"><uni-rate readonly touchable value="3.5" size="16" /><text class="score">{{ item.value }}</text></view><view class="value tabs" v-else-if="item.label == '标签:'"><view class="tab" v-for="tab in item.tabs" :key="tab">{{ tab }}</view></view><text v-else selectable class="value">{{ item.value }}</text></view><view class="copyright">声明：仅用于学习，切勿商业用途</view></view></scroll-view></view>
</uni-popup>

最终呈现的效果如下所示：

评分弹窗：评分弹窗的话也是需要借助上面的uni提供的组件进行设置，具体的代码如下所示：

<!-- 评分弹出层 -->
<uni-popup ref="scorePopup" :is-mask-click="false"><view class="scorePopup"><view class="popHeader"><view></view><view class="title">壁纸评分</view><view class="close" @tap="handleScoreClose"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view></view><view class="content"><uni-rate v-model="userScore" allowHalf /><text class="text">{{ userScore }}分</text></view><view class="footer"><button @tap="submitScore" :disabled="!userScore" type="default" size="mini" plain="">确认评分</button></view></view>
</uni-popup>

最终呈现的效果如下所示：

返回按钮：这里我们在左上角做一个返回的按钮进行返回上一层的回调事件，这里用到了一个计算高度的函数，在下面的标题中将着重讲解一下：

<view class="goBack" :style="{ top: getStatusBarHeight() + 'px' }" @tap="goBack"><uni-icons type="back" size="24" color="#fff"></uni-icons>
</view>
// 点击返回按钮
const goBack = () => {uni.navigateBack()
}

最终呈现的效果如下所示：

🗻定义头部导航

在首页顶部的地方，我们需要做一个头部的导航搜索栏，便于用户进行搜索操作，这里我们也做一个公共的组件，便于使用，如下所示：

因为我们要自定义导航栏的内容，所以在首页页面，我们也需要对其的pages文件设置自定义导航栏，如下所示：

然后我们开始设置自定义导航栏的内容，这里我们需要通过借助uni提供的API来计算手机顶部的高度：

<template><view class="custom-nav-bar"><view class="navbar"><view class="statusBar" :style="{ height: statusBarHeight+'px' }"></view><view class="titleBar" :style="{ height: titleBarHeight+'px' }"><view class="title">标题</view><view class="search"><uni-icons class="icon" type="search" size="18" color="#888"></uni-icons><text class="text">搜索</text></view></view></view><view class="fill" :style="{ height: statusBarHeight + titleBarHeight + 'px' }"></view></view>
</template><script setup>
import { ref } from 'vue'
// 获取手机系统相关信息
let system = uni.getSystemInfoSync() 
// 获取内容距离手机顶部的高度
let statusBarHeight = ref(system.statusBarHeight)
// 获取胶囊按钮的顶部距离及其自身高度
let { top, height } = uni.getMenuButtonBoundingClientRect() 
let titleBarHeight = ref(height + (top - statusBarHeight.value)*2)
</script>

最终呈现的效果如下所示：

因为获取系统相关信息可能是通用的功能，这里我们可以通过将其抽离出一个单独的钩子函数来进行操作，如下所示：

// 获取手机系统相关信息
const system = uni.getSystemInfoSync() 
// 获取内容距离手机顶部的高度
export const getStatusBarHeight = () => system.statusBarHeight || 0
// 获取胶囊按钮的高度操作
export const getTitleBarHeight = () => {if (uni.getMenuButtonBoundingClientRect) {let { top, height } = uni.getMenuButtonBoundingClientRect()return height + (top - getStatusBarHeight())*2} else {return 40}
}
// 整体的nav高度操作
export const getNavBarHeight = () => getStatusBarHeight() + getTitleBarHeight()

然后我们在相应的组件中进行引入然后使用即可，也能达到相同的效果：

然后我们可以给我们设置的公共nav组件设置一个props来传递不同的title展示不同的标题：

🏕️公告页面布局

接下来完成首页中对公告部分内容，点击跳转到具体的公告页面的内容进行相应的布局，这里我们仍然要创建一个页面出来，这里我们使用到了uni官网提供的一个标签，如下所示：

然后页面我们简单的布局一下：

<template><view class="notice"><view class="title"><view class="tag"><uni-tag inverted text="置顶" type="error" /></view><view class="font">这个区域填写标题</view></view><view class="info"><view class="item">author</view><view class="item"><uni-dateformat :date="Date.now()" format="yyyy-MM-dd hh:mm:ss" /></view></view><view class="content">内容区域</view><view class="count">阅读 5888</view></view>
</template><script setup></script><style scoped lang="scss">
.notice {padding: 30rpx;.title {font-size: 40rpx;color: #111;line-height: 20rpx;padding-bottom: 30rpx;display: flex;.tag {transform: scale(0.8);transform-origin: left center;flex-shrink: 0;}.font {padding-left: 6rpx;}}}
</style>

然后我们在首页给公告栏的文字内容套上navigator属性进行页面跳转，如下所示：

最终呈现的效果如下所示：

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

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

相关文章

深度学习的量化和剪枝

深度学习的量化和剪枝

一&#xff1a;背景 如果要将深度学习的AI模型部署到受限设备&#xff08;FPGA&#xff09;上&#xff0c;往往需要更小的存储需求和最低的计算复杂度。当然&#xff0c;还得保持一定的性能&#xff08;下降在能够接受的范围&#xff09;。受限设备资源的环境&#xff0c;一般是…
阅读更多...
数据结构与算法--插入排序与选择排序

数据结构与算法--插入排序与选择排序

文章目录 回顾提要排序基本概念排序的分类排序算法的稳定性排序算法的性能指标内排序 排序方法直接插入排序直接插入排序的要点直接插入排序的实现直接插入排序性能分析直接插入排序的适用情景 简单选择排序简单选择排序的要点简单选择排序的执行过程简单选择排序的实现简单选择…
阅读更多...
分布式锁：Mysql实现，Redis实现，Zookeeper实现

分布式锁：Mysql实现，Redis实现，Zookeeper实现

目录 前置知识 Mysql实现分布式锁 1.get_lock函数 Java代码实现&#xff1a; 2.for update尾缀 Java代码实现&#xff1a; 3.自己定义锁表 Java代码实现&#xff1a; 4.时间戳列实现乐观锁 Java代码实现&#xff1a; Redis实现分布式锁 Zookeeper实现分布式锁&#…
阅读更多...
完整搭建windows下mysql8.0源码编译调试环境!

完整搭建windows下mysql8.0源码编译调试环境!

背景&#xff1a; 前段时间一直在看mysql相关的博客&#xff0c;所以对源码起了浓厚的兴趣&#xff0c;所以尝试通过vmware和vscode在windosw环境中搭建一套编译调试的环境~ 看了一下网上的搭建教程基本杂乱无章&#xff0c;想要从零跟着搭建出一个完善的调试环境也不是易事&…
阅读更多...
Leetcode3232. 判断是否可以赢得数字游戏

Leetcode3232. 判断是否可以赢得数字游戏

Every day a Leetcode 题目来源&#xff1a;3232. 判断是否可以赢得数字游戏 解法1&#xff1a;3232. 判断是否可以赢得数字游戏 用一个 sum1 统计个位数的和&#xff0c;sum2 统计十位数的和。 只要 sum1 和 sum2 不相等&#xff0c;Alice 拿大的就能赢得这场游戏。 代码…
阅读更多...
Maven的依赖范围

Maven的依赖范围

依赖的jar包&#xff0c;默认情况下&#xff0c;可以在任何地方使用&#xff0c;可以通过scope来设置作用范围 作用范围&#xff1a; 主程序范围有效&#xff08;main文件夹范围内&#xff09;测试程序范围有效&#xff08;test文件夹范围内&#xff09;是否参与打包运行&…
阅读更多...
一次日志记录中使用fastjson涉及到ByteBuffer的教训

一次日志记录中使用fastjson涉及到ByteBuffer的教训

背景 目前本人在公司负责的模块中&#xff0c;有一个模块是负责数据同步的&#xff0c;主要是将我们数据产线使用的 AWS Dynamodb 同步的我们的测试QA 的环境的 MongoDB 的库中&#xff0c;去年开始也提供了使用 EMR 批量同步的功能&#xff0c;但是有时候业务也需要少量的数据…
阅读更多...
【OpenCV_python】凸包检测 轮廓特征 直方图均衡化 模板匹配 霍夫变换

【OpenCV_python】凸包检测 轮廓特征 直方图均衡化 模板匹配 霍夫变换

凸包特征检测 凸包就是图像的最小外接多边形&#xff0c;通过图像的轮廓点&#xff0c;找到距离最远的两个点的直线&#xff0c;根据直线找到距离最远的下一个点&#xff0c;直到所有的点被包围在多边形内 读取图像二值化找图像的轮廓获取凸包点的坐标绘制凸包点 convexHull 获…
阅读更多...
程序员如何写PLC程序

程序员如何写PLC程序

PLC是可编程逻辑控制器的简称&#xff0c;常用的编程语言是IEC61131-3&#xff08;梯形图、结构化文本、指令表、功能块、顺序功能图&#xff09;和西门子的SCL。程序员常用的编程语言是JS、Java、Python、C/C、Go等。PLC广泛采用编程工具有codesys、博图等。程序员常用的编程工…
阅读更多...
敏捷架构在数字时代的应用：从理论到实践的全面指南

敏捷架构在数字时代的应用：从理论到实践的全面指南

在数字化转型和技术变革的浪潮中&#xff0c;企业面临着不断提升敏捷性和应对复杂环境的挑战。敏捷架构在数字时代的应用不仅从理论层面阐述了敏捷架构的基本原理&#xff0c;还为企业提供了详细的实践指南&#xff0c;帮助企业从理论走向实际操作。本文将从理论与实践的双重视…
阅读更多...
STM32——CAN通讯基础知识

STM32——CAN通讯基础知识

CAN 协议简介 CAN 是控制器局域网络 (Controller Area Network) 的简称&#xff0c;它是由研发和生产汽车电子产品著称的德国 BOSCH 公司开发的&#xff0c;并最终成为国际标准(ISO11519以及ISO11898),是国际上应用最广泛的现场总线之一。差异点如下&#xff1a; 高速CAN可以达…
阅读更多...
YOLOv8_det/seg/pose/obb推理流程

YOLOv8_det/seg/pose/obb推理流程

本章将介绍目标检测、实例分割、关键点检测和旋转目标检测的推理原理，基于onnx模型推理，那么首先就需要了解onnx模型的输入和输出，对输入的图片需要进行预处理的操作，对输出的结果需要进行后处理的操作，这部分内容在我的另一个专栏《YOLOv8深度剖析》中也有介绍，如果对YO…
阅读更多...
《机器学习》一元、多元线性回归的实现 No.4

《机器学习》一元、多元线性回归的实现 No.4

一、一元线性回归实现 先直接看完整代码&#xff1a; import pandas as pd import matplotlib.pyplot as plt from sklearn.linear_model import LinearRegressiondate pd.read_csv(data.csv) #导入数据plt.scatter(date[广告投入],date[销售额]) # 用散点图展示数据 plt.sh…
阅读更多...
实训第二十八天（haproxy与利用python实现mysql主从的读写分离）

实训第二十八天（haproxy与利用python实现mysql主从的读写分离）

1、练习 [rootnat ~]# ipvsadm -d -t 192.168.10.101:3306 -r 10.0.0.22:3306 #删除真实主机 nat: [rootnat ~]# ifconfig ens33: flags4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500 inet 10.0.0.10 netmask 255.255.255.0 broadcast 10.0.0.25…
阅读更多...
【JVM】深入理解类加载机制(二)

【JVM】深入理解类加载机制(二)

深入理解类加载机制 HSDB工具的使用 Hotspot Debugger(HSDB):JDK原生自带 以Windows系统为例&#xff0c;jdk8的环境&#xff0c;在jdk的lib目录下&#xff0c;启动之前&#xff0c;你需要确保你进入的lib目录和你当前的JAVA_HOME配置的JDK是相同的&#xff0c;否则可能会出现…
阅读更多...
2.1 文件内容差异对比方法

2.1 文件内容差异对比方法

2.1 文件内容差异对比方法 文件内容差异对比方法2.1.1 两个字符串的差异对比2.1.2 生成美观的HTML格式文档2.1.3 对比nginx 配置文件差异代码封装 文件内容差异对比方法 介绍如何通过difflib模块实现文件内容差异对比。difflib作为Python的标准库模块无需安装&#xff0c;作用…
阅读更多...
2024年运营技术与网络安全态势研究报告：遭遇多次网络威胁的比例暴增

2024年运营技术与网络安全态势研究报告：遭遇多次网络威胁的比例暴增

随着 OT 组织不断在其业务环境中集成各种数字工具和技术&#xff0c;它们面临的安全挑战也日益变得愈加复杂和多样化。正如 NIST 指出&#xff0c; “虽然安全解决方案旨在解决典型 IT系统中的一些问题&#xff0c;但将这些相同的解决方案引入不同的 OT 环境时&#xff0c;必须…
阅读更多...
ruoyi-vue-pro项目新建模块的接口都报404错误

ruoyi-vue-pro项目新建模块的接口都报404错误

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 新建模块之后，该模块后端的请求都是返回404，如图所示： 2. 原理分析 抛开这个项目，对于路径请求不成功，返回404 主要的步骤如下： 检查路由配置： 确保在路由配置文件中添加了新模块的路由 例如，在Spring Boot中，这…
阅读更多...
vue3+ts 前端word文档下载文件时不预览直接下载方法(支持 doc / excel / ppt / pdf 等)

vue3+ts 前端word文档下载文件时不预览直接下载方法(支持 doc / excel / ppt / pdf 等)

前端word文档下载文件时不预览直接下载方法支持 doc / excel / ppt / pdf 等 根据需要&#xff0c;要实现一个下载文档的需要 最简单的方法就是使用a标签 如果是相同域可以直接下载&#xff0c;但如果是不同域的&#xff0c;就会先打开一个预览页&#xff0c;在预览页再点下载…
阅读更多...
StarRocks Lakehouse 快速入门——Apache Paimon

StarRocks Lakehouse 快速入门——Apache Paimon

StarRocks Lakehouse 快速入门指南为您提供了湖仓技术概览&#xff0c;旨在帮助您迅速掌握其核心特性、独特优势和应用场景。本指南将指导您如何高效地利用 StarRocks 构建解决方案。文章末尾&#xff0c;我们集合了来自阿里云、饿了么、喜马拉雅和同程旅行等行业领导者在 Star…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发