頔言頔語：進步，一定要進步，進步是跟收入持平的本錢。

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

關于這個項目的首頁，這是我想分享給你們的

我的知識和文字不成熟，項目也不成熟，但是我在進步！

若有意見，歡迎留言指正 ！！！

總結

以上是生活随笔為你收集整理的ios图文详情加载html_前端项目009 Vue 信息分享系统 商品列表、详情的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。