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;