uniapp学习（007-1 壁纸项目:页面框架搭建） - 悦读

uniapp学习（007-1 壁纸项目:页面框架搭建）

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

总时长 23:40:00 共116P

此文章包含第61p-第p69的内容

文章目录

壁纸项目

在这里插入图片描述

在这里插入图片描述

设计

在这里插入图片描述

原型设计工具

这里我们使用计时设计、也可以使用蓝湖、墨刀、PhotoShop、PIXSO （流畅度好打开大文件）
在这里插入图片描述

可以把ui图拖进来锁定住
在这里插入图片描述

使用切片获取某个元素的大小
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

创建一个common文件夹进行存放图片等文件

因为微信小程序的最大数据量是2兆，图片信息放到static文件夹下生成小程序的时候会把里面的内容都打包进去
而我们创建一个common文件夹把图片放到那里，只有引用的图片会被打包进小程序
在这里插入图片描述

我们写一个自定义scss文件也放到common文件夹里
在这里插入图片描述
在App.vue引入，其他的组件也就有了

首页页面编写

banner模块编写

在这里插入图片描述

在这里插入图片描述
== &代表上一级的名字这里的&代表swiper ，即swiper-item缩写成&-item ==

在这里插入图片描述

让组件变成内填充
在这里插入图片描述
最终css

效果

公告模块编写

在这里插入图片描述

行高改成80
在这里插入图片描述
水平垂直居中

高度太高了我们给轮播器加个height：100% 这样就行了

== css块里尽量用class名，直接用标签名的话会覆盖 ==

文字过长让其变成…省略号
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

每日推荐滑动scroll-view布局

让最右边的图片的右间距是30rpx 跟左边一样
在这里插入图片描述

具名插槽

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

制作模糊磨砂玻璃效果

设置1行3个
在这里插入图片描述

设置布局

在这里插入图片描述

在这里插入图片描述

模糊磨砂玻璃效果css

在这里插入图片描述

在这里插入图片描述

左上角效果

在这里插入图片描述

在这里插入图片描述

这里的文字大小最小是12px 这里的22rpx是11px 已经是最小了所以我们想要缩小可以使用缩放属性
transform:scale(0.8); ----缩放到80%；

在这里插入图片描述
这样缩放是按中心缩放

改成按左上缩放即可

添加更多模块

在这里插入图片描述

在这里插入图片描述

添加一个传入参数，判断显示图片还是更多
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

创建底部导航栏

在这里插入图片描述

添加图标

在这里插入图片描述

在这里插入图片描述

分类页面编写

直接复用首页那里即可
在这里插入图片描述

我的页面编写

在这里插入图片描述

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

在这里插入图片描述

换行
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

两端对齐
在这里插入图片描述

最后一行的下划线去掉
加粗样式

在这里插入图片描述

悦读

道可道，非常道；名可名，非常名。无名，天地之始，有名，万物之母。故常无欲，以观其妙，常有欲，以观其徼。此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

RabbitMQ的详解和使用

【Halcon】1D测量之一

鸿蒙网络编程系列39-Web组件打印示例

人工智能：重塑医疗、企业与生活的未来知识管理——以HelpLook为例

响应HttpServletResponse

Faster R-CNN学习笔记

初识分支语句

[AWS]MSK调用，报错Access denied

城市轨道交通高峰时段客流协调控制的强化学习方法

pyecharts图表库学习:Pie（饼图）

;