ios图文详情加载html_前端项目009 Vue 信息分享系统 商品列表、详情

eab1467b0ae23884b00f0c9c70a36861.png
頔言頔语:进步,一定要进步,进步是跟收入持平的本钱。

01 商品列表

0101 路由配置和数据请求

0102 上拉加载更多

02 商品详情

0201 详情数据请求和展示

0202 轮播图组件提取

0203 商品详情(路由的本质理解)

01 商品列表

0101 路由配置和数据请求

{title:'商品展示',className:'back-goods',route:{name:'GoodsShow',params:{page:1} } }

路由配置信息

{path:'/goods/list/:page',name:'GoodsShow',component:GoodsShow }

在created()当中发起请求

created() {this.$axios.get('goods/getshopcarlist/88,89').then(res=>{console.log(res)}).catch(console.log)// 获取页码// let { page } = this.$route.params;this.loadGoodsByPage();}

得到的数据格式如下

d7bf2baab2c13789059c57750edb1e42.png

然后进行页面的渲染即可

0102 上拉加载更多

当我们上拉加载更多的时候,会继续请求数据并且完成数据的拼接

loadBottom() {this.loadGoodsByPage();// 通知状态改变this.$refs.loadmore.onBottomLoaded();
}

在这里需要完成一个赋值和追加的判断

if (this.page === 1) {this.goodsList = res.data.message;} 
else {this.goodsList = this.goodsList.concat(res.data.message);}

当我们翻页后拿到的数据不足10条,说明已经是最后一页了。后续不能在进行上拉操作

 if (length < 10) {
this.$toast('没有更多数据了');
this.allLoaded = true; 
}

此时遇见一个bug,我们没有定义父容器高度,所以在刚开始的时候就会触发上拉检测机制。

进入上拉检测机制的判定条件是:可视高度+卷进去的高度 = 总长度

ac3a697f5febd6cc5b369b42f6a8c5dd.png

所以我们需要动态检测父亲容器的高度

 mounted() {// 父容器高度(可视) = 设备高度 - 父容器的topthis.wrapperHeight = 
document.documentElement.clientHeight 
- this.$refs.wrapper.getBoundingClientRect().top;
}

并且将wrapperHeight作为高度值绑定在父元素的上

<div :style="{ height:wrapperHeight + 'px' }" ref="wrapper">
</div>

51f2716142668a4315bb0c4966d22a10.png

02 商品详情

0201 详情数据请求和展示

在商品详情页面,我们需要请求商品轮播图还有商品信息像两个数据,若是有一个数据请求失败,则判定数据请求失败

这个时候需要使用 $axios.all([]).then(传播响应).catch()进行合并请求

 created() {// 商品轮播图 getthumimages/:imgid// 商品信息 goods/getinfo/:goodsidlet imgReq = this.$axios.get(`getthumimages/${this.goodsId}`);let infoReq = this.$axios.get(`goods/getinfo/${this.goodsId}`);this.$axios.all([imgReq,infoReq]).then(this.$axios.spread((imgRes,infoRes)=>{this.imgs = imgRes.data.message;this.info = infoRes.data.message[0];})).catch(console.log)
}

数据请求成功进行传播响应。使用this.$axios.spread( ),在传播响应的时候,将拿到的两个结果保存在我们data当中

拿到的数据格式如下所示:

55d53ca17324cbf900801ed5d62f7e57.png

0202 轮播图组件提取

轮播图部分考虑到和Home组建的轮播图相似,所以我们进行组件提取

组件提取的步骤:

  • 01. 样式是否一样
  • 02. 轮播图请求的URL是否一致
  • 03. 响应回来的数据是否一致

Home组件部分和商品详情部分的数据发送请求还响应回来的数据格式稍有不同,需要对代码进行健壮性调整:

01. 响应回来的图片数据的url部分不同

<img :src="item.img||item.src" alt="">

02. 因为轮播图请求的URL也不同

所以url采用父组件传递的方式

<my-swipe url="getlunbo" />

0203 商品详情(路由的本质理解)

我们发现,商品图文介绍和新闻详情的页面是一致的,当我们不想将图文介绍提取出来成为一个全局组件,可以在跳转的时候直接跳转到新闻详情页面

这个时候就必须看看路由跳转的详细流程了

d9370573975703670816038a696168e0.png
goGoodsInfo() {
// 直接进入到新闻详情
this.$router.push({name:'NewsDetail',params:{id:this.$route.query.id}
});
},

所以此时的新闻详情不仅要显示新闻详情,还需要显示商品详情信息

素以新闻详情的页面需要进行传递过来的参数的判定

这个参数在局部路由钩子里进行

beforeRouteEnter (to, from, next) {let title = '详情';// 1: 判断from是新闻列表,还是商品详情if (from.name === 'NewsList') {title = '新闻详情'; } 
else if (from.name === 'GoodsDetail') {title = '商品图文信息' }// 这里没有this,因为组件还没有被实例化next(vm => {// 通过 `vm` 访问组件实例 就是这里未来的thisvm.myTitle = title;});}

但是注意此时还没有this,所以需要通过next()函数传递过来一个vm进行数据的传递

在商品详情被点击的时候,跳转到商品图文详情页面, 为了确定是那个商品,我们传进来一个商品的ID过来。

goGoodsInfo() {// 直接进入到新闻详情this.$router.push({name:'NewsDetail',params:{id:this.$route.query.id }});
}

关于这个项目的首页,这是我想分享给你们的

我的知识和文字不成熟,项目也不成熟,但是我在进步!

若有意见,欢迎留言指正 !!!

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

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

相关文章

理解函数指针

在学习函数指针, 我遇到了问题, 我定义一个指针指向负责打印参数的函数, 1 void (*p)( int ) Fun; 好奇该指针存放的是什么&#xff08; 原以为是函数的入口地址&#xff09;&#xff0c;便调试观察一下他们的内存&#xff0c; Fun的值是 函数入口地址 0x00401030 Fun(i…

单元测试概念记录

单元测试 孤立的运行和测试某一个单元&#xff08;注重于每一个可能出错的细节&#xff09;。 优秀的单元测试的特性 1.自动的&#xff0c;可重复的 2.容易实现的 3.一旦写好将来都可以使用 4.任何人都可以运行 5.单击一个按钮就可以运行 6.可以快速的运行 判断是否是单元测试 …

zemax设置 像方远心_ZEMAX相机标定非常不完全指南

ZEMAX是广为使用的一款光学仿真软件&#xff0c;是进行光路设计和分析的利器&#xff1b;而相机标定&#xff0c;则是进行机器视觉任务时&#xff0c;拿到一款相机&#xff0c;对其实际参数进行确定的过程。因此看起来&#xff0c;二者其实主要是针对不同的侧重点。前者主要面向…

[转载]大型网站架构演变和知识体系

之前也有一些介绍大型网站架构演变的文章&#xff0c;例如LiveJournal的、ebay的&#xff0c;都是非常值得参考的&#xff0c;不过感觉他们讲的更多的是每次演变的结果&#xff0c;而没有很详细的讲为什么需要做这样的演变&#xff0c;再加上近来感觉有不少同学都很难明白为什么…

activiti 生命周期_一文让你读懂什么是Activiti工作流

Activiti工作流学习经验总结(一)什么是工作流&#xff1f;工作流指通过计算机对业务流程进行自动化管理&#xff0c;实现多个参与者按照预定义的流程去自动执行业务流程。什么是Activiti&#xff1f;Activiti 是一个开源架构的工作流引擎&#xff0c;基于bpmn2.0 标准进行流程定…

关于hkcmd.exe造成的和Eclipse之间热键冲突

可能是自己新买的笔记本比较强大,显卡也比较牛叉.当使用一些常用的Eclipse快捷键的时候Eclipse本身没有反应,反而显示器有了反应. 经常用的Eclispse中的快捷键CtrlAlt↑ 和CtrlAlt↓ 造成显示器内容的上翻转和下翻转 解决方式: 下载Windows Hot Key Explore 软件 在安装启动后…

中对曲线进行斜率提取_Au中的EQ处理方法——图形均衡器和参数均衡器

之前的文章详细讲过使用Cubase进行EQ处理&#xff0c;其实如果只是要对录音进行混音修音的话&#xff0c;使用Au也可以&#xff0c;Adobe Audition作为音乐录制及后期软件&#xff0c;具有很强大的后期功能&#xff0c;而且也可以添加插件&#xff0c;是修音混音非常好的工具。…

YUV格式转换RGB(基于opencv)

在编写代码将需要处理YUV格从每个视频帧中提取&#xff0c;然后将其保存为图片。有两种常见的方法在线&#xff0c;第一种是通过opencv自带cvCvtColor&#xff0c;可是这样的方法有bug。得到的图片会泛白。另外一种方法是公式法。 法一&#xff1a;opencv自带cvCvtColor 说明&a…

2 数据源配置_Spring, MyBatis 多数据源的配置和管理

作者&#xff1a;digdeep出处&#xff1a;https://www.cnblogs.com/digdeep/p/4512368.html热门推荐vuewebsocketSpringboot实现的即时通信开源项目springboot炸翔版CMS开源系统同一个项目有时会涉及到多个数据库&#xff0c;也就是多数据源。多数据源又可以分为两种情况&#…

(九十)使用多个storyboard+代码实现控制器的分开管理

使用单个storyboard会使得项目难与管理&#xff0c;使用纯代码又会过于麻烦&#xff0c;因此如果能将二者结合起来&#xff0c;并且使用多个storyboard&#xff0c;会使得项目简单简单、方便许多。 下面以一个简单的视图关系为例&#xff0c;介绍多个storyboard的用法。 ①有pa…

吗 支持windows_M1能否原生支持Windows 苹果把问题抛给了微软

关于苹果M1处理器近期已经有了非常多的报道&#xff0c;人们对其出色的性能表现以及较低的功耗还是充满了期待。那么最后一个也是最重要的一个问题&#xff0c;基于苹果M1处理器的电脑能原生支持微软Windows吗&#xff1f;毕竟很多人买回苹果MacBook第一件事就是安装Windows 10…

数据库设计五要点 让数据库设计更加规范

通常情况下&#xff0c;可以从两个方面来判断数据库是否设计的比较规范。一是看看是否拥有大量的窄表&#xff0c;二是宽表的数量是否足够的少。若符合这两个条件&#xff0c;则可以说明这个数据库的规范化水平还是比较高的。当然这是两个泛泛而谈的指标。为了达到数据库设计规…

4怎么放大字体_win8.1系统如何放大所有字体?

电脑安装上[color#070c0 !important]win8.1正式版系统&#xff0c;发现桌面的字体和网页的字体比较小&#xff0c;看起来比较吃力&#xff0c;从而影响操作。一般win8.1系统字体都默认设置好的&#xff0c;不过用户可以进行放大&#xff0c;那么win8.1系统怎么放大所有字体&…

进程 zabbix_Zabbix监控在windows的进程(非进程数)

场景介绍&#xff1a;小Z同学最近遇到个项目需求&#xff0c;需求是用zabbix监控运行在windows的进程。然鹅&#xff0c;当小Z同学在网上搜了一大堆&#xff0c;发现基本上都是使用官方的proc.num(***.exe)键值拿到进程数量&#xff0c;很显然&#xff0c;这并不符合客户实际的…

spring配置数据库

一.加载数据库驱动 1.利用hibernate.properties文件加载 <bean class"org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">   <property name"locations">     <list>       <value>classpath…

golang 切片 接口_如何理解Golang中的接口?

个人认为&#xff0c;要理解 Go 的接口&#xff0c;一定先了解下鸭子模型。鸭子模型那什么鸭子模型&#xff1f;鸭子模型的解释&#xff0c;通常会用了一个非常有趣的例子&#xff0c;一个东西究竟是不是鸭子&#xff0c;取决于它的能力。游泳起来像鸭子、叫起来也像鸭子&#…

batchnomal_pytorch的batch normalize使用详解

torch.nn.BatchNorm1d()1、BatchNorm1d(num_features, eps 1e-05, momentum0.1, affineTrue)对于2d或3d输入进行BN。在训练时&#xff0c;该层计算每次输入的均值和方差&#xff0c;并进行平行移动。移动平均默认的动量为0.1。在验证时&#xff0c;训练求得的均值/方差将用于标…

phpcms文件所需权限

转载于:https://www.cnblogs.com/zhongheng/p/4684087.html

mysql 设置大小写_mysql修改大小写参数注意事项

原由&#xff1a;数据库中原本参数lower_case_table_names的值为0&#xff0c;应开发要求需要修改为不区分大小写&#xff0c;即修改为1。但是修改完之后&#xff0c;发现本来建立的大写字母的表查不到。修改过程1&#xff0c;在参数文件中修改lower_case_table_names12&#x…

论文中如何写mysql的介绍_mysql优化写论文,从哪几方面入手啊解决方法

引用第7章&#xff1a;优化目录7.1. 优化概述7.1.1. MySQL设计局限与折衷7.1.2. 为可移植性设计应用程序7.1.3. 我们已将MySQL用在何处&#xff1f;7.1.4. MySQL基准套件7.1.5. 使用自己的基准7.2. 优化SELECT语句和其它查询7.2.1. EXPLAIN语法(获取SELECT相关信息)7.2.2. 估计…