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

已于 2023-04-25 15:51:20 修改
阅读量3.5k 收藏 37
点赞数 3
分类专栏： 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元/天 解锁文章
coderWWH
关注
  • 3
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于uni-app开发的新闻和资讯类App模板
02-22
基于uni-app开发的新闻和资讯类App模板
IT廉连看——Uniapp——页面样式与布局
weixin_72932310的博客
02-27 2444
​
Vue3 + uni-app 微信小程序：仿知乎日报详情页设计及实现
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
07-18 1927
通过本文的介绍，我们不仅学习了如何使用Vue 3结合微信小程序构建知乎日报详情页，还深入了解了从前端设计到开发调试的全过程。希望这篇文章能帮助你提升前端开发技能，为用户提供更优质的移动阅读体验。
uniapp 新闻模板
weixin_46337813的博客
12-04 2107
https://ext.dcloud.net.cn/plugin?id=1988
uni-app零基础入门 uni-app官方案例——新闻展示及详情查看
谢谢你们的关注
08-23 2946
uni-app零基础入门 uni-app官方案例——新闻展示及详情查看
uni-app新闻小程序
qq_55776682的博客
09-15 1585
引入详情页的内容的时候，内容是html格式，所以要用rich-text组件。pages.json : 与vue的router.js差不多，配置路由的。main.js : 入口文件，与vue同。package.json : 包管理器，和vue里面差不多。新闻列表uni-list代码块的自定义方法详见。插入uni-list代码块，构建新闻列表。获取成功后在微信开发者工具进行登录重启。AppID在微信开发者工具中获取。3：配置微信小程序Appid。vue单文件组件规范sfc。4：点击运行到微信小程序。
uniapp做一个新闻类的demo演示--青年新闻（前端部分）
虾米大王的学习历程
12-12 1019
这个案例是一个模仿新闻客户端做的，学习中，我把代码提出来，供大家学习参考。
新闻页面制作
Rubia_befall的博客
02-09 973
新建文档，并保存好。 新闻页面主要分为，标题-标题标签，时间与来源-可用p标签，分行线-hr标签，内容-p标签。 完善标签相对内容。 四． 完成以上效果。 1.h2标签添加属性align-center，并使用font标签包含标题，使用属性face-“微软雅黑编辑字体。” 2.给第一个p标签设定属性align-center，根据需要更改的内容使用<font>标签，修改内容要被<font>标签包含，并在<font>标签内使用添加属性修改，color-颜色，si
【具体到每一步】从0制作一个uniapp的新闻类页面（网络请求数据篇）
coderwwh的博客
04-26 382
手把手从0到1制作uniapp新闻类界面
初识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开发规范:一键登录(univerify)、服务器调用云函数、微信授权登录
iOS逆向与安全
07-13 1017
vue现在是es6的写法，require引入外部的js模块(注意不是文件)或import css。另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。 如需要全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理。 传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。HBuilderX 2.5.5起支持easycom组件模式。easycom将其精简为一步。 只要组件。就可以不用引用、注册，直接在页面中使用。 如下： 1.2 组件/
从零开始开发微信小程序：全面指南
百态老人的博客
06-03 1913
学习制作微信小程序，希望通过这次学习能够实现跨平台的统一开发，从而提高自己的编程和开发能力。
uni-App 新闻资讯
wenxi2367的博客
04-14 1748
重点： 图文列表 每条数据是左右两部分 全局过滤器，格式化时间 富文本组件，格式化富文本 列表页面结构 获取数据 数据保存到本地 数据展示 封装成组件 通过list接收参数 过滤器，用于格式化时间 获取年月日，不足2位的补零 点击标题，导航 调用父组件的方法 调用组件 导入 注册组件 使用组件 点击标题，跳转到资讯详情页面 在父组件定义一个事件 详情 创建详情页面
uni-app新闻模板使用教程
最新发布
gitblog_00553的博客
08-09 544
uni-app新闻模板使用教程 uni-template-news基于uni-app开发的新闻/资讯类App模板项目地址:https://gitcode.com/gh_mirrors/un/uni-template-news 1. 项目介绍 uni-template-news 是由DCloud前端团队开发的一个基于uni-app的新闻/资讯类App模板。它提供了丰富的UI设计和新闻展示功能，包括...
uniapp做一个新闻类的demo演示-青年新闻完整版
虾米大王的学习历程
12-13 1775
这个是全部的代码，我贴出来，供大家学习参考。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值