uniapp学习（007-2 壁纸项目:详细设计css代码较多）

最新推荐文章于 2025-04-05 22:49:07 发布
最新推荐文章于 2025-04-05 22:49:07 发布
阅读量1.2k 收藏 9
点赞数 32
分类专栏： uniapp 文章标签： uni-app 学习 css vue 微信小程序 前端框架 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_book/article/details/143112009
版权

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第70p-第p78的内容

文章目录

客服消息

按钮的open-type属性

在这里插入图片描述

在这里插入图片描述

添加客服

要添加客服 需要在微信开放平台里 找到 开发管理
配置AppID
在这里插入图片描述
放到程序的mainifest.json里

在这里插入图片描述

然后回到开放平台 找到客服 添加客服
在这里插入图片描述

在这里插入图片描述

然后手机扫码登录
在这里插入图片描述

设置按钮

这里我们使用的是view open-type只能在按钮上使用 我们把按钮覆盖view 然后透明度改成0 即可
在这里插入图片描述

先看一下半透明效果
在这里插入图片描述
在这里插入图片描述

全透明效果
在这里插入图片描述

在这里插入图片描述
这里也可以用label标签实现，按钮用hidden属性隐藏

ifdef和ifndef 实现多端匹配

语法

<!-- #ifdef xxx  --> 代表属于xxx 是这种效果 
<!-- #ifndef xxx  --> 代表属于除了xxx 都是这种效果

实现

让h5拨打电话 小程序联系客服

两个按钮叠加在这里 使用 ifdef 实现多端匹配
在这里插入图片描述

查看编译器
在这里插入图片描述

在这里插入图片描述

各种值 我们主要使用 H5 \APP \ MP(所有小程序)
在这里插入图片描述

在这里插入图片描述
在html\css\js代码都可以使用
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
拨打电话功能
在这里插入图片描述
在这里插入图片描述

渐变效果

效果

在这里插入图片描述

编写

添加一个类给这个页面的最外围
在这里插入图片描述

在全局scss文件里定义类

单层渐变

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

双重渐变

在这里插入图片描述
在这里插入图片描述

也可以用transparent来充当透明效果
在这里插入图片描述

在这里插入图片描述
添加透明的位置
在这里插入图片描述

在这里插入图片描述

推荐选择颜色的网站ColorDrop
ColorDrop
在这里插入图片描述

选择两个好看的颜色
在这里插入图片描述
最终效果
在这里插入图片描述

颜色全局变量

创建一个scss文件

在这里插入图片描述

引入我们的scss文件 在里面定义变量

在这里插入图片描述
记得加前面加 @/代表根目录下的文件
在这里插入图片描述

我们定义一些变量

在这里插入图片描述

添加后记得重启程序，要不然可能会报错

在这里插入图片描述

这里直接引用即可

如果希望我们的css生效 可以添加 !important 提升权重
在这里插入图片描述

小程序穿透才可以
使用:deep 进行穿透
在这里插入图片描述

vue3有个:v-deep

uni-app 有个导出功能
在这里插入图片描述

分类列表页面

图片记得加aspectFill 让最短边展示出来
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

跳转

在这里插入图片描述

更多按钮 要跳转的是tabBar页面 所以要加上 open-type=“reLaunch”

在这里插入图片描述

nav下添加row 实现跳转 需要修改所有选项的结构
方法一是 使用前面提到的：deep()
方法二是使用 相对定位 透明度改为0
方法三就是 click事件方法跳转 这里感觉还是用事件跳转好

图片详情页面

设置页面图片样式

在这里插入图片描述

在这里插入图片描述
前面记得添加衔接滑动
在这里插入图片描述

添加遮罩层

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
当前效果
在这里插入图片描述

只设置margin:auto; 会拉满这个dom元素
在这里插入图片描述

在这里插入图片描述

有了宽度 并且margin:auto; 会自动居中
在这里插入图片描述

在这里插入图片描述

width:fit-content 有多少内容宽度就是多少
在这里插入图片描述
在这里插入图片描述

模糊一下
在这里插入图片描述
在这里插入图片描述

这代表mask的子view（第一层子view们）
在这里插入图片描述
在这里插入图片描述

提出去一个公用的class，就不用每个都这么写了
在这里插入图片描述

在这里插入图片描述

也可以用@mixin 像写函数一样传参
在这里插入图片描述

底部按钮

在这里插入图片描述
在这里插入图片描述

让按钮都在一行 display:flex;
在这里插入图片描述
在这里插入图片描述

底部平均分配 justify-content:space-around;
在这里插入图片描述
在这里插入图片描述
添加阴影和模糊
在这里插入图片描述

在这里插入图片描述

给按钮进行调整

.box{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

添加点击事件 隐藏遮罩层

这里使用v-show更好 更省性能
在这里插入图片描述

在这里插入图片描述

使用时间插件替换写死的日期和时间的值
在这里插入图片描述

信息弹窗

在这里插入图片描述

下载插件
在这里插入图片描述

导入到项目当中 （导入后记得重启项目）
在这里插入图片描述

编写点击事件

在这里插入图片描述
vue2的写法
在这里插入图片描述

vue3的写法
在这里插入图片描述

弹出
这里写一个空盒子放在上面 到时候可以进行左中右展示
在这里插入图片描述

在这里插入图片描述
让标题左中右设置

在这里插入图片描述

在这里插入图片描述

给close加点区域 要不然不好点
在这里插入图片描述

设置一下弹窗的最大高度不要超过60%
在这里插入图片描述

selectable要长按
在这里插入图片描述

添加评分组件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

版权声明

在使用互联网图片时，最好写声明（避免不必要的官司）
在这里插入图片描述

在这里插入图片描述

评分

效果

在这里插入图片描述

代码

在这里插入图片描述

在这里插入图片描述

将头部css提出到最外面 这样就都可以使用了
在这里插入图片描述

Uniapp 从入门到精通：动画与过渡效果的运用
CSDN博客专家，系统架构师，有合作、疑惑请私信博主。
02-26 6万+
Uniapp 从入门到精通：动画与过渡效果的运用，本文从 Uniapp 的基础回顾入手，介绍了 CSS 动画和 Vue 过渡效果的基础知识，然后深入讲解了 Uniapp 中动画与过渡效果的高级应用，包括使用uni.createAnimation创建复杂动画和配置页面切换动画。最后，探讨了动画与过渡效果的性能优化方法。通过本文的学习，开发者可以掌握在 Uniapp 中运用动画与过渡效果的技巧，提升应用的交互性和用户体验。
uniapp新闻列表-上拉刷新-下拉加载更多.zip
12-08
【uniapp新闻列表-上拉刷新-下拉加载更多】是一个基于uniapp框架开发的应用功能模块，主要用于构建具有动态加载和刷新...通过这个项目，开发者不仅可以学习到uniapp的基本操作，还能提升对移动端应用交互设计的理解。
分享自己在uniapp开发中用的css样式
小虎哥的技术博客
10-28 1733
分享自己在uniapp开发中用的css样式和布局
uni-app--》打造个性化壁纸预览应用平台（一）
ztK63LrD的博客
08-17 1781
今天开始使用vue3+uni-app搭建一个电商购物的小程序，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的github上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端uni-app知识。然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（阅读此次项目实践文章能够学习到的技术）：
Day2-2：前端项目uniapp壁纸实战
最新发布
2301_82019265的博客
04-05 717
在components下新建组件common-title。再在wallpaper新建一个目录components。图片换了下，原来的有点丑，图片可按自己喜欢在网上下载。来到common-title.vue。想要好看点就下载多一点图片哈。接下来我们来弄一下公共标题。下载好了，最好重启一下哈。记得点击创建同名目录。再去uniapp官网。
uniapp中view设置为透明
我有故人折剑去，斩尽春风不曾归
03-15 5847
index.vue(这是你要变透明的页面这里用index举例)
uniapp APP端 如何自定义导航栏背景颜色(渐变)
SLife4599的博客
08-30 7623
效果如图 需要注意的点,这个效果只能在真机调试下看见,在预览模式下是看不到的.而且只针对app 管用. 代码如下: { "path": "pages/shoppingMall/productDetails", "style": { "navigationBarTitleText": "商品详情", "navigationBarTextStyle":"white", // "enablePullDownRefresh": false, "app-plus": {
# uni-app开发攻略 # 个人封面页 （透明导航栏、源码）
ZHENGCHUNJUN的博客
08-24 2641
需求：制作一个类似于某博的个人主页的封面板块 效果图： 思路： 拿到设计图以后，我们需要先进行拆解页面结构， 这个页面主要由三大板块组成：导航栏+背景图+用户信息 拆解完结构以后，下一步是进行细分板块， 看每一个板块里面有什么特点，会用到什么知识点 下面是每个版块的思路及知识点 一、导航栏： （tip：这里我们采用的是uview里面的组件——u-navbar， 所以第一步是先要在page.json里面的这个页面加上"navigationStyle":"custom"） 然后我.
uniapp插件：基于CSS实现的进度环.zip
01-23
在IT行业中，尤其是在移动应用开发领域，uniapp是一个非常受欢迎的框架，它允许开发者使用一套代码来构建跨平台的应用程序，覆盖iOS、Android、Web、小程序等多个平台。本压缩包“uniapp插件：基于CSS实现的进度环....
uni-app 基于chat（聊天窗口组件）实现uniapp-chat-master
04-10
5. **状态管理**：当聊天记录较多时，使用Vuex进行全局状态管理可以优化性能，避免每次加载都重新获取所有消息。Vuex可以帮助管理共享状态，提供了一套规则确保状态以一种可预测的方式发生变化。 6. **网络请求**：...
基于Java和Vue的ruoyi-uniapp高端养生项目设计源码
10-06
uniapp作为一套使用Vue.js开发所有前端应用的框架，支持跨平台运行，意味着一套代码可以编译到iOS、Android、Web以及各种小程序等多个平台，这大大提升了开发效率和项目质量。 在这个项目中，Java和Vue的结合使用，...
uniapp滑动屏幕导航栏背景渐变
yangyishinanshen的博客
10-31 866
uniapp滑动屏幕导航栏背景渐变
学习咸虾米壁纸项目
m0_73638967的博客
08-02 1113
这样实现了不使用定位和浮动，则使.left,.right,.center分成三部分做出如上布局效果图，可采用实现上述壁纸信息和叉号的布局
Uniapp 导航栏教程：全局设置、局部定制和动态更改一步到位！ Uniapp 新手必看：如何轻松设置顶部栏样式（完整代码示例） 全面解析 Uniapp 顶部栏颜色设置：从全局配置到动态切换 Unia
南北极之间
12-26 4153
Uniapp 导航栏教程：全局设置、局部定制和动态更改一步到位！ Uniapp 新手必看：如何轻松设置顶部栏样式（完整代码示例） 全面解析 Uniapp 顶部栏颜色设置：从全局配置到动态切换 UniaUniapp 导航栏教程：全局设置、局部定制和动态更改一步到位！ Uniapp 新手必看：如何轻松设置顶部栏样式（完整代码示例） 全面解析 Uniapp 顶部栏颜色设置：从全局配置到动态切换 UniaUniapp 导航栏教程：全局设置、局部定制和动态更改一步到位！ Uniapp 新手必看：如何轻松设置顶部栏样式
uniapp，使用css设置背景宫格
m0_71513265的博客
07-03 433
uniapp，使用css设置背景宫格。
【uniapp】app端压窗屏设计
欢迎来到☆槿畔☆的博客
05-26 1851
众所周知，在app端中，普通的组件是无法覆盖原生组件，即使是官方提供的`cover-view`也只是在实体内容中覆盖一些原生的如地图。但是无法覆盖底部的tabbar。
vue3+uniapp咸虾米壁纸项目实战
weixin_65574176的博客
08-14 1523
目前已完成的效果如下所示，因为要自己去申请域名才能实现网络图片下载的api，有需要的朋友可以去咸虾米老师的视频教程了解。目前已完成的效果如下图所示，限于篇幅原因，因为代码真的太多了，写多了自己都头大，懒得搬过来了，请各位移步仓库QAQ。PS:这个项目后期需要给配置域名，得自己去申请。如果使用腾讯云服务的话，应该就不用了。uni-app官网 (dcloud.net.cn)项目实战教程 哔哩哔哩搜索 咸虾米。
uni-app 设置页面导航条颜色
m0_50953782的博客
12-21 5991
uni-app 设置页面导航条颜色
uniapp壁纸商城4.0：无需第三方接口，即刻下载使用
uniapp特别适用于那些需要一套代码同时部署到多个平台的场景，例如壁纸商城这类应用，能通过uniapp实现一次开发多端运行，极大地提升了开发效率和维护便捷性。壁纸商城4.0版本作为当前提供的版本，据描述，目前尚未...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值