201203-4-對昨天內容的回顧

Better-scroll
####一. FeatureView
獨立元件的封裝=>FeatureView
props ->titles
div>根據titles v-for遍歷 div->span{{title}}
css相關
選中哪一個tab，哪個tab的顏色會變色。
div>a>img
*currentIndex

---

商品資料的請求
goods: {
pop: page/list
new: page/list
cell: page/list
}
在home.js中封裝getHomeGoods(type. page)
在home.vue中，又在methods中getHomeGoods(type)
呼叫getHomeGoods(‘pop’)
*page: 動態獲取對應的page
獲取資料：res
*this.goods[type].list.push(…res.data.list);
*this.goods[type].page += 1;
goods: {
pop: page/list[30]
new: page/list[30]
cell: page/list[30]
}

---

四.對商品的資料進行戰術
4.1 封裝GoodsList.vue

• props: goods ->list[40]
• v-for goods -> GoodsListItem[30]
• GoodsListItem元件 -》 GoodsItem
  4.2 封裝GoodsIistItem.vue元件
• props: goodsItem
• goodsItem取出資料，並且使用正確的div/span/img等標籤進行展示
  ************************************************************************************五. 對滾動進行重構

1. 在index.html中使用Better-Scroll
2. const bscroll = new BScroll(el,{});
3. 注意：wrapper->content->很多內容

• 1. 監聽滾動
• 2. probeType：0/1/2（手指滾動）/3（只要是滾動）
• bscroll.on(‘scroll’, position=>{})
• 3. 上拉載入
• pullUpLoad: true
• bscoll.on(‘pullingUP’, ()=>{})
• 4. click: false
• • button可以監聽點選
• • div不可以
    ****5.2 在Vue專案中使用Better-Scroll
• 在Profile.vue中簡單的演示
• 對Better-Scroll進行封裝: Scroll.vue
  
  Home.vue和Scroll.vue之間進行通訊
  Home.vue probeType:3
  Scroll.vue需要通過KaTeX parse error: Expected 'EOF', got '#' at position 23: …將事件傳送到Home.vue #̲###############…refs.scroll.scrollTo(0,0,500);
  ######## 6.3 BackTop元件的顯示和隱藏
  ** isShowBackTop: false
  ** 監聽滾動，拿到滾動的位置：
  *:-position.y > 1000 -> isShowBackTop: true;
  *:isShowBackTop = (-position.y) > 1000;