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

頔言頔语：进步，一定要进步，进步是跟收入持平的本钱。

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();}

得到的数据格式如下

然后进行页面的渲染即可

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，我们没有定义父容器高度，所以在刚开始的时候就会触发上拉检测机制。

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

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

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

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

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

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当中

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

0202 轮播图组件提取

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

组件提取的步骤：

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

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

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

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

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

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

<my-swipe url="getlunbo" />

0203 商品详情（路由的本质理解）

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

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

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 }});
}

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

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

若有意见，欢迎留言指正！！！