【具体到每一步】从0制作一个uniapp的新闻类页面（网络请求数据篇）

最新推荐文章于 2023-12-12 09:52:09 发布
最新推荐文章于 2023-12-12 09:52:09 发布
阅读量275 收藏 1
点赞数
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44215654/article/details/130367112
版权

目录

 发请求获取数据

执行位置

点击导航跳转不同内容

无数据处理

滑动到底部加载更多

 优化细节：loading加载中

跳转详情页并传参

 

 发请求获取数据

执行位置

 把假数据删掉，用真数据

内容循环也换成真数据

点击导航跳转不同内容

就是点击导航的时候，传参过去，然后执行一次带分类参数的请求

无数据处理

条件判断，没数据的时候展示一个“无内容”的图图

滑动到底部加载更多

 这里uniapp已经帮我们做了

只需调用这个生命周期即可

 优化细节：loading加载中

0代表初始化不显示子，1代表加载中，2代表没有更多数据 

 

跳转详情页并传参

 

 然后发请求，渲染就好了

coderWWH
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于uni-app开发的新闻和资讯类App模板
02-22
基于uni-app开发的新闻和资讯类App模板
uni-app实现用接口编写新闻
weixin_69352142的博客
06-22 1232
uni-app是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uniapp新闻列表-上拉刷新-下拉加载更多.zip
12-08
1、使用uniapp编写。 2、新闻列表。 3、上拉刷新。 4、下拉加载更多。 5、图片在左，文字在右。
uni-app学习笔记(一):新闻列表实战
qq_45753838的博客
10-04 1952
uni-app新闻项目实战笔记 最近在上安卓开发课程，使用的是HbuilderX进行uni-app的开发，刚刚看了腾讯课堂上的一个相关入门课程，跟着视频进行了一下项目实战，就随带记了一些笔记，方便自己以后复习。 关于接口的说明在另一篇博客中： https://blog.csdn.net/qq_45753838/article/details/108917277 新建项目news和hello。 将hello项目里的common文件夹复制到news项目中，照着hello项目里的App.vue，在ne
uniapp做一个新闻类的demo演示--青年新闻（前端部分）
最新发布
虾米大王的学习历程
12-12 992
这个案例是一个模仿新闻客户端做的，学习中，我把代码提出来，供大家学习参考。
iOS当多个网络请求完成后执行下一步的方法详解
08-28
本文将详细介绍如何在iOS中实现这一功能，具体涉及到的知识点包括并发执行网络请求、同时处理多个网络请求以及网络请求的管理。 首先，让我们回顾一下问题背景。在实际应用中，比如加载一个页面时，可能需要获取多...
详解iOS中多个网络请求的同步问题总结
08-30
YTKNetwork 框架对于批量网络请求失败的处理是，只要一个失败就立即停止请求，调用失败回调。失败回调方法中，会停止所有请求，遍历请求实例数组，并停止每个请求，然后执行失败回调。 五、结论 iOS 中多个网络...
Python数据分析实战篇：从数据搜集到数据可视化一步一步完成二手房价数据分析
06-14
本课程是Python数据分析实战课程，从数据搜集、数据存取、数据清洗、数据分析、数据可视化一步一步完成北京二手房价数据分析过程。
一个万能的php分页类.zip
07-11
这一步通常是通过SQL查询来实现的，比如`SELECT COUNT(*) FROM table`，然后将结果存储到类的一个属性中。 2. **每页显示条数设置**：用户可以自定义每页显示的记录数量，这可以通过类的构造函数或者设置方法来实现...
uniApp 新闻详情页语音播报，百度语音合成app端、H5端语音播报实例
zhkyzj的博客
10-28 1225
非常轻便的语音合成接口，可以用于新闻详情页语音播报，实例功能：点击“播放”按钮播放新闻详情页面的内容，播放按钮文字也图标变为“暂停”，再点击重新播放。
uniapp——新闻列表（uni-list、uni-list-item）--顶部下拉刷新--上拉加载更多--顶部提示语
热门推荐
wy313622821的博客
12-07 2万+
1、新闻列表模式 效果图： 代码 <template> <uni-list> <!-- title、note设置标题和小文字 --> <uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date"> <!-- 通过v-slot:
uni-app 使用uni.request封装发送api请求文档服务器请求导航守卫
路虽远行则将至，事虽难做则必成。
07-24 1607
刚刚接触uni-app时候想着直接使用axios发请求，可以发送成功但是请求头有点问题后面发现教程都是使用@escookrequest-miniprogram三方包发送请求-是没有问题为什么不直接用uni.request（）发送请求，是因为每次请求都要写一次添加请求头不合理后面随着深入了解uni-app，发现开源框架，若依，芋道，都是封装一层uni.request发请求解决了统一添加请求头问题，使用uni.request比较合理，自己写可能不全面，可以直接搬。
uni-app开发微信小程序个人中心页面适用头条/百度/支付宝小程序
qq_16800845的博客
03-02 7794
<template> <view class="container"> <view class="user-section"> <image class="bg" src="/static/user-bg.jpg"></image> <view cl...
uni - app 新闻项目 - 首页内容及组件化
qq_25906119的博客
02-04 209
uni-app 首页部分组件模块化使用
uniapp点击进入详情页（加上搜索栏，以及滑动删除）
温温的博客
08-04 1520
实现效果有个bug，从下往上删除会出现报错，以及下面几个删除出现问题，应该是splice的问题。 在使用本地数据的情况下
uniapp对uni.request()的封装以及使用
关北道.
08-04 1万+
uni.request()等封装以及页面中如何使用
(十七)、个人中心页面中更多功能完善+操作权限+不同用户角色对数据的修改【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
tigerhhzz的博客
02-20 624
个人中心页面中更多功能完善+操作权限+不同用户角色对数据的修改【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
(二) uni 实现个人中心头像上传
SsStr的博客
06-08 1651
先看效果 说下实现思路，在用户点击头像的时候 弹出选项 选择相册打开，选择头像后跳转到 头像裁剪页面，裁剪完成点击上传图像 上传到服务器上，返回个人主页并刷新本地个人图像 大概实现方式 ...
uni - app 新闻项目解析
qq_25906119的博客
02-05 2029
uni - app 新闻项目详细解析
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值