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

已于 2023-04-25 15:51:20 修改
阅读量3.8k 收藏 37
点赞数 4
分类专栏： uniapp 文章标签： uni-app
于 2023-04-25 15:50:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44215654/article/details/130361793
版权
本文记录了一次uni-app项目的学习过程，包括项目创建、配置页面及tabbar、设置图标和静态资源、实现滚动条样式、定义公共组件、数据传递、导航吸顶效果以及页面跳转至详情页的实现。通过组件差异化处理提高代码复用性，并提供了详细步骤。
摘要由CSDN通过智能技术生成

目录

项目初始化 / 基础配置

项目创建

 配置路由/页面/tabbar

pages.json配置tabbar

 配置图标/静态资源

导航栏和字体颜色

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

公共模块定义components组件

新建组件

 使用组件

组件里的结构

布局个人中心页面

组件差异化处理

数据传递

导航吸顶效果

 点击高亮

 页面跳转与详情页

点击事件

详情页

 

项目初始化 / 基础配置

项目创建

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

 配置路由/页面/tabbar

 

pages.json配置tabbar

 此时的页面

 配置图标/静态资源

导航栏和字体颜色

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

最低0.47元/天 解锁文章
uni-app开发规范:一键登录(univerify)、服务器调用云函数、微信授权登录
专注于计算机研发知识和资讯分享
07-13 1210
vue现在是es6的写法，require引入外部的js模块(注意不是文件)或import css。另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。 如需要全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理。 传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。HBuilderX 2.5.5起支持easycom组件模式。easycom将其精简为一步。 只要组件。就可以不用引用、注册，直接在页面中使用。 如下： 1.2 组件/
新闻页面制作
Rubia_befall的博客
02-09 1004
新建文档，并保存好。 新闻页面主要分为，标题-标题标签，时间与来源-可用p标签，分行线-hr标签，内容-p标签。 完善标签相对内容。 四． 完成以上效果。 1.h2标签添加属性align-center，并使用font标签包含标题，使用属性face-“微软雅黑编辑字体。” 2.给第一个p标签设定属性align-center，根据需要更改的内容使用<font>标签，修改内容要被<font>标签包含，并在<font>标签内使用添加属性修改，color-颜色，si
基于uni-app开发的新闻和资讯类App模板
02-22
基于uni-app开发的新闻和资讯类App模板
uniapp 新闻模板
weixin_46337813的博客
12-04 2150
https://ext.dcloud.net.cn/plugin?id=1988
使用 UniApp 实现简单的个人中心页面
最新发布
博客
12-13 1154
张三</text><text class="account">微信号: zhangsan123
uniapp做一个新闻类的demo演示--青年新闻（前端部分）
虾米大王的学习历程
12-12 1148
这个案例是一个模仿新闻客户端做的，学习中，我把代码提出来，供大家学习参考。
uni-app零基础入门 uni-app官方案例——新闻展示及详情查看
谢谢你们的关注
08-23 3160
uni-app零基础入门 uni-app官方案例——新闻展示及详情查看
uni-app新闻小程序
qq_55776682的博客
09-15 1649
引入详情页的内容的时候，内容是html格式，所以要用rich-text组件。pages.json : 与vue的router.js差不多，配置路由的。main.js : 入口文件，与vue同。package.json : 包管理器，和vue里面差不多。新闻列表uni-list代码块的自定义方法详见。插入uni-list代码块，构建新闻列表。获取成功后在微信开发者工具进行登录重启。AppID在微信开发者工具中获取。3：配置微信小程序Appid。vue单文件组件规范sfc。4：点击运行到微信小程序。
【具体到每一步】从0制作一个uniapp的新闻类页面（网络请求数据篇）
coderwwh的博客
04-26 413
手把手从0到1制作uniapp新闻类界面
uniapp项目实践总结(七)编写一个简单的应用页面
Guan'Blog
09-02 488
之前自定义了顶部和底部导航栏，那接下来就写一个简单的二级页面，这个是出了导航页面之外经常用到的。以上就是编写一个简单的应用页面的主要内容，有不足之处，请多多指正。
初识uniapp：如何创建一个简单的uniapp项目
# 1. uniapp简介 ### 1.1 什么是uniapp？ 在这一部分，我们将介绍uniapp是什么，它的定义和概念，以及它可以为我们带来什么样的便利和优势。...在这一章节中，我们将学习如何创建一个新的uniapp项
uni-template-news:基于uni-app开发的新闻资讯类App模板
05-07
uni-template-news 基于uni-app开发的新闻/资讯类App模板 体验方式 同步/下载项目后，拖入 HBuilderX 中即可运行体验。 特点 兼容多个平台 自定义组件实现顶部选项卡切换 App 平台使用 nvue 进一步优化体验 平台支持 app-vue app-nvue H5 微信小程序 支付宝小程序 百度小程序 头条小程序 注意事项 非 App-nvue 平台暂不支持下拉刷新
uni-app-template:uni-app的项目模板
05-11
uni-app项目模板（不喜勿喷） 一个5年的web前端开源的uni-app快速开发模板，参考学习一同进步 建议uni-app使用时间达到1年以上的程序员来学习 使用步骤 下载下来，解压成文件夹 把项目包丢到HBuilder X里面 HBuilder X要安装scss/sass编译插件 运行项目 觉得不错，给个5星好评吧 QQ交流群(607391225) 微信交流群（加我好友备注"进群"） QQ群号：607391225 微信号：zhou0612wei 开源不易，需要花费很多精力，打个赏吧 微信打赏码 支付宝打赏码 空项目模板GitHub地址（开发用这个） 聊天案例项目 聊天案例项目H5地址 聊天案例项目安卓APP安装包下载地址 文件说明 components/chat-emojis.nvue 表情组件（表情、收藏表情图、表情包） components/chat-message.nvue 消
uniapp模板--主页
06-06
uni-app页面含轮播，flex布局，饼状图，折线图，应用swiper的等
uni-app新闻模板使用教程
gitblog_00553的博客
08-09 771
uni-app新闻模板使用教程 项目地址:https://gitcode.com/gh_mirrors/un/uni-template-news 1. 项目介绍 uni-template-news 是由DCloud前端团队开发的一个基于uni-app的新闻/资讯类App模板。它提供了丰富的UI设计和新闻展示功能，包括自定义组件以实现顶部选项卡切换，适用于多种平台，如app-vue、app-nvue...
uni-App 新闻资讯
wenxi2367的博客
04-14 1823
重点： 图文列表 每条数据是左右两部分 全局过滤器，格式化时间 富文本组件，格式化富文本 列表页面结构 获取数据 数据保存到本地 数据展示 封装成组件 通过list接收参数 过滤器，用于格式化时间 获取年月日，不足2位的补零 点击标题，导航 调用父组件的方法 调用组件 导入 注册组件 使用组件 点击标题，跳转到资讯详情页面 在父组件定义一个事件 详情 创建详情页面
uniapp云开发之搜索页面详情模板
新钢小猪编程
10-14 498
云开发的搜索页面 注意：将组件放在文件components中，无需引用。 进入搜索页面 以上就是简单的搜索页面的模板，如有不足指出，请留言。
uniapp做一个新闻类的demo演示-青年新闻完整版
虾米大王的学习历程
12-13 1851
这个是全部的代码，我贴出来，供大家学习参考。
uni-app悬浮框模板
weixin_34409703的博客
06-15 3440
1. uni-app悬浮框模板 1.1. 目标 模仿饿了吗app的悬浮框效果，即上移过程中，中间的某个组件框到顶部后不再上移，呈类似置顶的效果 1.2. 问题 中间遇到fixed固定组件导致flex失效问题，这会导致样式的混乱，后通过这篇文章解决 1.3. 效果 最后实现效果 1.4. 移步 具体代码见我的github 转载于:https://www.cnblogs.com/sk...
uniapp上跳转到安卓原生界面activity
06-06
uniapp作为一款跨平台开发框架，可以实现在一个代码库中编写一次代码，就可以同时在不同的移动操作系统上运行。但是，如果需要在uniapp中调起安卓原生界面activity，则需要使用uniapp的插件机制调用安卓的Java代码。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值