首頁父子組元件 ajax陣列請求各個頁面

依米_發表於2018-05-21

元件陣列

首先在home.vue裡建立一個data函式，裡面存放了這個頁面的各種資料

第一步存入city

，

第二步把city傳遞給home-header ,父元件給子元件傳值是通過屬性的形式。

子元件如何接受父元件傳來的值呢，開啟header.vue,在export default裡接收變數city,然後把城市換成{}{}{this.city}

這裡顯示為空

當ajax獲取到資料以後，拿到資料的內容，怎麼獲取呢

在Home.vue裡寫入

在控制檯看到資料結構是這樣的

這是Swiper.vue的原始碼沒有接收到ajax資料的原始碼

<template>
 <div class="wrapper">
  <swiper :options="swiperOption" >

      <swiper-slide v-for="item in swiperList" :key="item.id">
       <img  class="swiper-img" :src="item.imgUrl" >
      </swiper-slide>

      <div class="swiper-pagination"  slot="pagination"></div><!--//顯示分頁的-->
    <!-- 這裡是左右按鍵<div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>-->
    <!--這裡是左右滾動條<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
    </swiper>
 </div>
</template>

<script>
 export default{
  name: 'HomeSwiper',
  data() {
   return {
    swiperOption: {
     pagination:'.swiper-pagination',
     loop:true
    },
    swiperList:[{
     id:'0001',
     imgUrl:'http://img1.qunarzz.com/piao/fusion/1805/e5/59fad13a64807d02.jpg_750x200_713ae984.jpg'
    },{
     id:'0002',
     imgUrl:'http://img1.qunarzz.com/piao/fusion/1805/77/f63bd04dd5319602.jpg_750x200_6ba8e0ca.jpg'
    }
    ]
   }
  }
 }
</script>
<!--<style>-->
  <!--.swiper-pagination-bullet-active {-->
    <!--background:red !important-->
  <!--}-->
<!--</style>-->
<style lang="stylus" scoped>
   .wrapper >>> .swiper-pagination-bullet-active
     background:#fff !important
   .wrapper
     overflow:hidden
     width:100%
     height:0
     padding-bottom:25%
     background:#eee
     .swiper-img
       width:100%
</style>

下面從json檔案獲取輪播圖

同樣在Home.vue裡的data輸入 swiperList這個字串來自json資料

第二步在元件標籤裡用list變數把swiperList陣列傳遞給home-swipter元件

第三步在Swipter裡新增props 接收變數list

在swiper-slide裡迴圈的不是

swiperList，而是

第四步，在HOme.vue裡獲取

此時，輪播圖顯示的不是第一張圖，這是因為剛開始存放的是空陣列，如何解決呢

加上這麼一句話，意思是當list.length傳送的資料是空時，v-if的值是false ,swiper標籤不會被建立，只有當資料真正的過來的時候，swipter才會被建立

在模板裡儘量不要出現邏輯性的程式碼

v-if="list.length"，

所以在Swipter.vue檔案 data下面建立一個computed計算屬性

同時把list 換成showSwipter

下面是Icons.vue 的資料接收

原始碼為

<template>
    <div class="icons">
       <swiper :options="swiperOption">
         <swiper-slide v-for="(page,index) in pages" :key="index">
           <div class="icon" v-for="item in page" :key="item.id">
             <div class="icon-img">
               <img  class="icon-img-content" :src="item.imgUrl">
             </div>
             <p class="icon-desc">{{item.desc}}</p>
           </div>
         </swiper-slide>

       </swiper>
    </div>
</template>

<script>
    export default {
      name: "HomeIcons",
      data() {
        return {
          swiperOption: {
            pagination: '.swiper-pagination',
            loop: true
          },
          iconList:[{
            id:'0001',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
            desc:'景點門票'
          },{
            id:'0002',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
            desc:'景點門票'
          },{
            id:'0003',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
            desc:'景點門票'
          },{
            id:'0004',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
            desc:'景點門票'
          },{
            id:'0005',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
            desc:'必遊榜單'
          },{
            id:'0006',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
            desc:'名勝古蹟'
          },{
            id:'0007',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png',
            desc:'自然放光'
          },{
            id:'0008',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png',
            desc:'全部玩樂'
          },{
            id:'0009',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png',
            desc:'全部玩樂'
          }]
        }
      },

      // 實現一個分頁功能
      computed:{
        pages () {
          const pages = []
          this.iconList.forEach((item,index)=>{
            const page = Math.floor(index/8)
            if(!pages[page]){
              pages[page] = []
            }
            pages[page].push(item)
          })
          return pages
        }
      }
    }
</script>

<style  lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'

  .icons >>> .swiper-container
    height :0
    padding-bottom :50%
  .icons
    marign-top:.2rem
    .icon
      position: relative
      overflow :hidden
      float:left
      width: 25%
      height: 0
      padding-bottom: 25%

      .icon-img
        position: absolute
        top:0
        left :0
        right:0
        bottom:.44rem
        box-sizing:border-box
        padding:.09rem

        .icon-img-content
          display:block
          marign:0 auto
          height:100%
          margin-left :0.2rem
      .icon-desc
         position:absolute
         left:0
         right :0
         bottom :0
         height :0.44rem
         line-height :0.44rem
         text-align:center
         color :$darkTextColor
         ellipsis()
</style>

在home.vue裡

開啟Icons.vue檔案，接收來自父元件的引數

把整個data全部刪除，

下面獲取recommend.vue的資料

這是原始碼

<template>
  <div>
    <div class="title">熱銷推薦</div>
    <ul>
      <li class="item" v-for="item in recommendList" :key="item.id">

        <img class="item-img" :src="item.imgUrl">

        <div  class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">檢視詳情</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "HomeRecommend",
        props:{
            list:Array
        },
        data () {
          return {
            recommendList:[{
              id:'0001',
              imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
              title:'清泉，煙幕，輕舟',
              desc:'盡覽名勝旖旎風光，到古蹟弔古憑今'
            },{
              id:'0002',
              imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
              title:'清泉，煙幕，輕舟',
              desc:'盡覽名勝旖旎風光，到古蹟弔古憑今'
            },{
              id:'0003',
              imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
              title:'清泉，煙幕，輕舟',
              desc:'盡覽名勝旖旎風光，到古蹟弔古憑今'
            },{
              id:'0004',
              imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
              title:'清泉，煙幕，輕舟',
              desc:'盡覽名勝旖旎風光，到古蹟弔古憑今'
            }]

          }
        }
    }
</script>

<style  lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title
    margin-top:.2rem
    line-height :.8rem
    background :#eee
    text-indent:.2rem
  .item
    overflow :hidden
    display :flex
    height:1.9rem

    .item-img
      width:1.7rem
      height:1.7rem
      padding:.1rem
    .item-info
      flex:1
      padding:.1rem
      min-width:0
      .item-title
        line-height :.4rem
        font-size:.32rem
        ellipsis()
      .item-desc
        line-height:.6rem
        color:#ccc
        ellipsis()
      .item-button
        line-height :0.44rem
        margin-top .2rem
        background: #Ff9300
        padding:0 .2rem
        border-radius:.06rem
        color:#fff

</style>

下面是wekend.vue

<template>
  <div>
    <div class="title">週末去哪</div>
    <ul>
      <li class="item" v-for="item in recommendList" :key="item.id">
        <div class="item-img-wrapper">
          <img class="item-img" :src="item.imgUrl">
        </div>
        <div  class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">檢視詳情</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeWeekend",
    props:{
      list:Array
    },
    data () {
      return {
        recommendList:[{
          id:'0001',
          imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
          title:'清泉，煙幕，輕舟',
          desc:'盡覽名勝旖旎風光，到古蹟弔古憑今'
        },{
          id:'0002',
          imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
          title:'清泉，煙幕，輕舟',
          desc:'盡覽名勝旖旎風光，到古蹟弔古憑今'
        },{
          id:'0003',
          imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
          title:'清泉，煙幕，輕舟',
          desc:'盡覽名勝旖旎風光，到古蹟弔古憑今'
        },{
          id:'0004',
          imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
          title:'清泉，煙幕，輕舟',
          desc:'盡覽名勝旖旎風光，到古蹟弔古憑今'
        }]

      }
    }
  }
</script>

<style  lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title

    line-height :.8rem
    background :#eee
    text-indent:.2rem
  .item-img-wrapper
      overflow: hidden
      height:0
      padding-bottom:33.9%
      .item-img
        width:100%
        padding:.1rem
    .item-info
      padding:.1rem
      min-width:0
      .item-title
        line-height :.4rem
        font-size:.32rem
        ellipsis()
      .item-desc
        line-height:.6rem
        color:#ccc
        ellipsis()

</style>

發現那8個輪播圖，定時旋轉，如何去除呢

在icons.vue裡定義option 和data

已經完成首頁的資料傳遞，把程式碼傳到git

輸入 clear

cd 到資料夾輸入 git add .

git commit -m 'index finish'

git push

此時已經被扔到線上，

master分支是穩定的程式碼，所以要更新輸入 git checkout master,

讓master分支合併最新的分支上的程式碼輸入 git merge index-ajax

然後 git push

WebForm 頁面ajax 請求後臺頁面方法
2018-11-22
WebORM
首頁使用axios 傳送ajax請求
2018-05-21
iOS
html頁面中如何傳送ajax請求
2024-03-20
HTML
Element頁面內多個上傳元件超時使用abort取消請求
2020-10-22
元件
【面試】Web 頁面請求歷程
2019-03-29
面試Web
鴻蒙HarmonyOS實戰-Web元件（請求響應和頁面除錯）
2024-06-01
鴻蒙Web元件除錯
實現不同頁面不同頁首
2024-03-15
performance-report頁面效能、資源、錯誤、ajax，fetch請求上報外掛完善小巧
2019-03-04
ORM
iframe父子頁面通訊解決方案
2018-08-30
從頁面載入到資料請求，前端頁面效能優化實踐分享
2021-07-14
前端優化
ajax請求
2019-02-26
Vue router 使用 History 模式導致頁面請求 404
2020-07-01
Vue模式
數控開發 · 元件 · 仿微信的首頁面
2020-12-02
元件
PHP 陣列搜尋 sdk & 陣列分頁
2020-02-04
PHP陣列
404頁面自動跳轉到首頁
2018-09-28
位元組跳動面試官：請用JS實現Ajax併發請求控制
2021-01-12
面試JS
ajax請求 juery
2020-04-06
sendBeacon 重新整理/關閉頁面之前傳送請求
2019-02-25
求陣列中k個數的所有組合
2020-09-27
陣列
jQuery 使用ajax，並重新整理頁面
2018-12-20
jQuery
ajax實現頁面非同步載入
2020-11-15
非同步
遞迴元件組合拳，無懼頁面巢狀
2024-02-24
遞迴元件巢狀
我對請求做了個效能小最佳化，提升了50%的頁面效能
2023-09-24
Web Beacon 重新整理/關閉頁面之前傳送請求
2019-02-25
Web
列印頁面時怎樣自定義列印頁首頁尾或者去掉眉頁尾？
2024-12-05
原生ajax請求&JSONP
2019-01-07
JSON
webpack4下import()模組按需載入,打包按需切割模組，減少包體積，加快首頁請求速度
2019-05-16
WebImport
將個人註冊資訊傳到另一個頁面（包含陣列的傳遞）
2020-12-23
陣列
SpringBoot專案的html頁面使用axios進行get post請求
2024-11-21
Spring BootHTMLiOS
使用陣列建立分頁資料
2019-08-20
陣列
vue頁面表格元件高度控制
2024-04-17
Vue元件
Vue 頁面掉東西元件
2019-03-03
Vue元件
使用Web元件載入頁面
2024-10-19
Web元件
在VUE中改變陣列、物件。頁面沒有變化
2018-03-28
Vue陣列物件
封裝ajax、axios請求
2019-01-23
封裝iOS
springmvc處理ajax請求
2024-06-26
SpringMVC
網站提示404 - 頁面未找到：伺服器無法找到請求的網頁怎麼辦
2024-08-27
網站伺服器網頁
laravel-admin 來使用前端元件做個後臺首頁吧
2020-08-21
Laravel前端元件

首頁父子組元件 ajax陣列請求各個頁面

下面是Icons.vue 的資料接收

相關文章