当前位置： 首页 > news >正文

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

news 2024/10/22 21:05:48

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

总时长 23:40:00 共116P

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

文章目录

    • 壁纸项目
    • 设计
      • 原型设计工具
      • 创建一个common文件夹进行存放图片等文件
    • 首页页面 编写
      • banner模块编写
      • 公告模块编写
      • 每日推荐滑动scroll-view布局
      • 具名插槽
      • 制作模糊磨砂玻璃效果
        • 模糊磨砂玻璃效果css
        • 左上角效果
      • 添加更多模块
    • 创建底部导航栏
    • 分类 页面编写
    • 我的 页面编写

壁纸项目

在这里插入图片描述

a

在这里插入图片描述

设计

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

原型设计工具

这里我们使用计时设计 、也可以使用蓝湖、墨刀、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%；

在这里插入图片描述
这样缩放是按中心缩放
在这里插入图片描述
改成按左上缩放即可
在这里插入图片描述
在这里插入图片描述

添加更多模块

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

创建底部导航栏

在这里插入图片描述

添加图标

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

在这里插入图片描述

分类 页面编写

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

我的 页面编写

在这里插入图片描述

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

在这里插入图片描述

换行
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

两端对齐
在这里插入图片描述
在这里插入图片描述
最后一行的下划线去掉
加粗样式
在这里插入图片描述

在这里插入图片描述


http://www.mrgr.cn/news/56226.html

相关文章：

  • 微服务开发-Nacos服务治理
  • OpenIPC开源FPV之Channel配置
  • 51单片机快速入门之 LCD1602 液晶显示屏2024/10/19
  • 深度学习-机器学习与传统编程区别
  • 云原生:一张图了解devops 中CI/CD
  • UICollectionView 的UICollectionReusableView复用 IOS18报错问题记录
  • Go：error处理机制和函数
  • 基于Java+springboot的博客系统
  • 深入理解Linux内核网络（三）：内核发送网络包
  • 服务器的介绍
  • 服务器安装Anaconda，Anaconda安装Pytorch
  • 【信息安全服务】常见服务高危端口排查（含内网）
  • [Linux进程概念]命令行参数|环境变量
  • netty的网络IO模型
  • 音乐之趣：叶珂吐槽伍佰，黄晓明笑对人生
  • Git 完整教程：版本管理、分支操作与远程仓库解析
  • 链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序：提升企业产品方便性的创新策略
  • 云原生技术：nacos进化到servicemash
  • 多模态数据融合最新Nature来袭！四种方法就上岸，可别错过了这波好思路！
  • RunMe_About BIOS Connect Server Auto Setting.cmd
  • 端口频繁遭遇攻击，又该如何应对？
  • 骨传导耳机哪款好？五大热门畅销骨传导耳机推荐！
  • 无人机电机损耗！
  • JAVA接口，继承，和抽象类的使用
  • 自动裁剪图像的智能方法：Smart Image Cropping API指南
  • 跨境电商批量自养号测评是怎么做到的？