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

news2024/11/27 8:41:02

目录

项目初始化 / 基础配置

项目创建

 配置路由/页面/tabbar

pages.json配置tabbar

 配置图标/静态资源

导航栏和字体颜色

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

公共模块定义components组件

新建组件

 使用组件

组件里的结构

布局个人中心页面

组件差异化处理

数据传递

导航吸顶效果

 点击高亮

 页面跳转与详情页

点击事件

详情页


 

项目初始化 / 基础配置

项目创建

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

 配置路由/页面/tabbar

 

pages.json配置tabbar

 此时的页面

 配置图标/静态资源

导航栏和字体颜色

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

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

还可以这样写

 然后写写样式就行

公共模块定义components组件

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

新建组件

 使用组件

 

 这时自己写写样式

组件里的结构

 目前的样子

布局个人中心页面

组件差异化处理

 组件页面:

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

数据传递

首页页面:目前是假数据

导航吸顶效果

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

CSS 支持 | uni-app官网

 点击高亮

具体这样写

 

 页面跳转与详情页

点击事件

详情页

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【角色用例图讲解】

角色用例图讲解 一、 用例图的定义及组成要素二、参与者与用例的4种关系三、 常用的用例图软件 我是将军我一直都在,。! 一、 用例图的定义及组成要素 用例图是编写需求说明时经常用到的需求表达方式,用于向开发、测试同事说明需求中用户与系…

【机智云物联网低功耗转接板】+模拟无线远程控制仪表启停

GE211 是机智云自研的定制化的物联网转接板,使用 ESP32-C3-WROOM-02 通讯模块,适用于白色智能家电等设备应用。硬件设计上采用支持 WiFi 和 BLE 的双模无线通信模块,具备TTL电平转换串口,免开发快速接入,提高开发效率。…

SpringBoot 使用 Sa-Token 完成权限认证

一、设计思路 所谓权限认证,核心逻辑就是判断一个账号是否拥有指定权限: 有,就让你通过。没有?那么禁止访问! 深入到底层数据中,就是每个账号都会拥有一个权限码集合,框架来校验这个集合中是…

Linux 常用命令2

文件内容查看 Linux系统中使用以下命令来查看文件的内容: cat 由第一行开始显示文件内容tac 从最后一行开始显示nl 显示的时候,顺道输出行号more 一页一页的显示文件内容less与more 类似,但可以往前翻页head 只看头几行tail 只看尾巴几行 j…

【ZooKeeper to KRaft Migration】kafka 3.4版本zookeeper数据迁移到kraft

引言 kafka在3.X版本后内置了kraft用来替代zookeeper管理集群,但是在升级的过程中发现,许多升级的文档都是只有新部署安装kraft版本,而没有涉及到数据迁移相关的资料,这样如果直接变更的话,会导致kakfa中的数据全部丢…

升级gpt4-GPT最新版本怎么下载使用

怎么 让gpt-3的模型升级gpt4 GPT-4是OpenAI的未来版本,目前还未发布。因此,我们无法准确指导如何将GPT-3升级到GPT-4。要升级GPT-3,需要进行大量的研究和开发工作。如果OpenAI发行了GPT-4的预览版,那么可能需要花费大量的时间和资…

Redission实现分布式锁lock()和tryLock()方法的区别

lock.lock(30, TimeUnit.SECONDS); // 尝试获取锁30秒,如果获取不到则放弃 //尝试获取锁,等待5秒,持有锁10秒钟 boolean success lock.tryLock(0, 10, TimeUnit.SECONDS); Redisson 是一种基于 Redis 的分布式锁框架,提供了 lo…

国产蓝牙芯片OM6621P/HS6621系列门锁方案

在5G、物联网以及互联网家装市场的快速发展等多重因素的作用下,中国智能家居市场展现蓬勃发展态势。作为智能家居“入口”产品以及家庭智能安防产品的核心单品,智能门锁以其区别于传统机械锁更具安全性、便利性、可扩展性的优势,逐渐成为智能…

Java+GeoTools(开源的Java GIS工具包)快速入门-实现读取shp文件并显示

场景 GeoTools GeoTools 是一个开源的 Java GIS 工具包,可利用它来开发符合标准的地理信息系统。 GeoTools 提供了 OGC (Open Geospatial Consortium) 规范的一个实现来作为他们的开发。 官网地址: GeoTools The Open Source Java GIS Toolkit — GeoTools 参考…

Linux账号密码安全策略设置

前言 随着云计算厂商的兴起,云资源如ECS不再只有企业或者公司才会使用,普通人也可以自己买一台ECS来搭建自己的应用或者网站。虽然云计算厂商帮我们做了很多安全相关的工作,但并不代表我们的机器资源就绝对是安全的。 要知道有很多事情是云…

群策群力:组织效率,管理?沟通?协作?

你好,我是苏杰。今天让我们一起聊聊组织效率的话题。 团队大了,也能够自我造血以后,如何可持续发展就会成为我们关注的焦点。产品会衰退、行业有生命周期,但人的成长,以及人构成的组织,可以帮我们不断成功…

【大厂直通车】飞猪旅行日常实习_测开面经

📑哈喽,大家好,我是小浪;📱本专栏致力于持续更新最新各大厂面经,实习消息,招聘要求; 那么目前价格也仅仅是定到了29.9💰;非常的实惠,一杯奶茶钱🍵; 🧃对于订阅本专栏的同学们,博主在努力更新,那么最近忙于学校的考试,没来得及正常更新,非常抱歉,这几…

论文综述——DORE: Document Ordered Relation Extraction based on Generative Framework

DORE: Document Ordered Relation Extraction based on Generative Framework 文章的主要目标是对文档级的关系抽取。以往的研究主要是基于分类的研究,生成式关系抽取研究较少而且性能不佳。 文档级相比于句子级的关系抽取存在序列长度过长,以及实体定位…

消息队列选型

消息队列选型 大家好,我是易安!今天我们聊下消息队列常见选型。 消息队列作用 谈选型之前我们先讲下我们为什么需要消息队列。 消息队列是一种很流行的技术,自从系统间开始通信时,消息队列就出现了。然而,对消息队列给…

java--时间类实例2--毫秒/秒运算(instant、ZoneDateTime)

有些时候给出毫秒值来让我们计算时间该怎么办。 文章目录 介绍[蓝桥杯 2021 省 B] 时间显示题目描述代码 蓝桥杯–航班时间 介绍 将毫秒值直接转成日期的有 new Date(毫秒)Instant.ofEpochMilli(毫秒)Instant.ofEpochSecond(秒)Instant.ofEpochSecond&…

k8s知识整理(继续整理中)

文章目录 k8s组件master节点kube-apiserverkube-schedulerkube-controller-manageretcd work节点kube-proxykubeletcontainer runtime add onsCoreDNSingress controller Pod常用控制器k8s pod创建调度过程k8s pod删除过程k8s 灰度发布(金丝雀部署)k8s 蓝…

日撸 Java 三百行day37

文章目录 说明day37 十字链表1.思路整理1.1十字链表的数据结构:1.2 手动模拟十字链表 2.代码分析2.1 十字链表的构造2.2 单元测试 说明 闵老师的文章链接: 日撸 Java 三百行(总述)_minfanphd的博客-CSDN博客 自己也把手敲的代码放…

ambari的kafka服务开启sasl

添加 sasl 配置⽂件 集群部署 Kafka2.2下载地址 http://archive.apache.org/dist/kafka/2.2.1/kafka_2.11-2.2.1.tgz 解压安装包 tar -zxvf kafka_2.11-2.2.1.tgz 部署略 ambari 数据kafka服务 在kafka的conf目录下创建sasl_conf目录,将kafka_client_jaas.conf/kafka_se…

深入浅出MySQL——CRUD

文章目录 表的增删改查Create单行数据全列插入多行数据指定列插入插入否则更新替换——REPLACE RetrieveSELECT 列WHERE 条件结果排序筛选分页结果 UpdateDelete删除数据截断表 插入查询结果聚合函数group bywhere和having SQL查询中各个关键字的执行先后顺序函数日期函数字符串…

SQL优化(3):order by优化

MySQL的排序,有两种方式: Using filesort : 通过表的索引或全表扫描,读取满足条件的数据行,然后在排序缓冲区sort buffer中完成排序操作,所有不是通过索引直接返回排序结果的排序都叫 FileSort 排序。 Using index :…