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

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

总时长 23:40:00 共116P

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

文章目录

- 客服消息
- - 按钮的open-type属性
  - 添加客服
  - 设置按钮
- ifdef和ifndef 实现多端匹配
- - 语法
  - 实现
- 渐变效果
- - 效果
  - 编写
  - - 单层渐变
    - 双重渐变
- 颜色全局变量
- - 创建一个scss文件
  - 引入我们的scss文件在里面定义变量
  - 我们定义一些变量
  - 添加后记得重启程序，要不然可能会报错
  - 这里直接引用即可
- 分类列表页面
- - 跳转
- 图片详情页面
- - 设置页面图片样式
  - 添加遮罩层
  - 底部按钮
  - 添加点击事件隐藏遮罩层
  - 信息弹窗
  - - 编写点击事件
    - 添加评分组件
    - 版权声明
- 评分
- - 效果
  - 代码

客服消息

按钮的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提出到最外面这样就都可以使用了
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！