【具体到每一步】从0制作一个uniapp的新闻类页面(界面篇)

news/2024/12/29 7:10:13/

目录

项目初始化 / 基础配置

项目创建

 配置路由/页面/tabbar

pages.json配置tabbar

 配置图标/静态资源

导航栏和字体颜色

 scroll-view实现横向滚动条样式

公共模块定义components组件

新建组件

 使用组件

组件里的结构

布局个人中心页面

组件差异化处理

数据传递

导航吸顶效果

 点击高亮

 页面跳转与详情页

点击事件

详情页


 

项目初始化 / 基础配置

项目创建

这就是创建好的默认的页面

 配置路由/页面/tabbar

 

pages.json配置tabbar

 此时的页面

 配置图标/静态资源

导航栏和字体颜色

 scroll-view实现横向滚动条样式

 写一下大致的结构,也就是写一个假数据,先把结构写出来吗,再放进去真是的数据

还可以这样写

 然后写写样式就行

公共模块定义components组件

 这明显是一个东西,可以做成一个组件,在2个页面里进行复用

新建组件

 使用组件

 

 这时自己写写样式

组件里的结构

 目前的样子

布局个人中心页面

组件差异化处理

 组件页面:

 两个一样的盒子,根据条件判断

数据传递

首页页面:目前是假数据

导航吸顶效果

这里要注意:不同平台存在一定的差异

CSS 支持 | uni-app官网

 点击高亮

具体这样写

 

 页面跳转与详情页

点击事件

详情页

详情页就不是组件了,需要新建页面了

本内容于学习B站课程所记录,具体源码见源码


http://www.ppmy.cn/news/50553.html

相关文章

成基于时间轮实现的定时器解决方案

文章目录 定时器的使用场景定时器与其他组件的关系定时器与网络事件在一个线程定时器与网络事件在不同线程当中处理大量定时任务怎么处理 定时器设计接口设计数据结构的抉择 时间轮时间轮的概念设计单层级时间轮1、时间轮大小2、时间精度 空推进问题多层时间轮 Skynet定时器实现…

vim small trick

一下配置都是在IDEA环境下运行的 R和E可以在IDEA窗口间切换如何交换两行 ddp跳到某一行 {number}Gcw 删除某词并切换到插入模式f{character} find 后面的第一个character,; 重复查找上次 f{char} 搜到的字符,, 可以往回重复查找F{character} Forword 找到…

PICO一方打造:VR音游《闪韵灵境》体验

​《闪韵灵境》本周正式上线,作为PICO一方工作室的首款作品,不少玩家对此寄予厚望。即便是作为一个轻轻度VR音游的用户,经过简短体验,我也发现了闪韵灵境和目前热门的Beat Saber之间的一些差异点。以下是我在简短体验后的一些看法…

本地缓存解决方案Caffeine | Spring Cloud 38

一、Caffeine简介 Caffeine是一款高性能、最优缓存库。Caffeine是受Google guava启发的本地缓存(青出于蓝而胜于蓝),在Cafeine的改进设计中借鉴了 Guava 缓存和 ConcurrentLinkedHashMap,Guava缓存可以参考上篇:本地缓…

PowerShell install go+caddy+filebrowser+nssm 实现部署文件系统

filebrowser filebrowser 是一个使用go语言编写的软件,功能是可以通过浏览器对服务器上的文件进行管理。可以是修改文件,或者是添加删除文件,甚至可以分享文件,是一个很棒的文件管理器,你甚至可以当成一个网盘来使用。…

微软的“牛头怪时刻”

2014年,当萨提亚纳德拉接任微软CEO时,他面对的是一家停滞且难以在快速发展的技术领域保持竞争优势的公司。自那以后,纳德拉将其重点从传统操作系统和生产力软件,转向云计算和人工智能,被认为重振了微软。​ 让我们以O…

WuThreat身份安全云-TVD每日漏洞情报-2023-04-25

漏洞名称:PaperCut NG 访问控制错误漏洞 漏洞级别:严重 漏洞编号:CVE-2023-27350,CNNVD-202304-1720 相关涉及:Sonos One Speaker 漏洞状态:在野 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-10011 漏洞名称:LIBTIFF TIFFCROP 基于堆的溢出 漏洞级别:中危…

k8s部署Pyroscope并分析golang性能瓶颈

Pyroscope是什么 Pyroscope是一种开源的应用程序性能分析工具,它可以帮助我们发现和解决应用中的性能问题。Pyroscope支持多种编程语言并提供了丰富的性能数据,可以帮助我们跟踪应用程序的执行情况,并根据收集到的数据来识别性能瓶颈。 Pyros…