项目开发(2)

首页开发

Feature

feature 特征

其实是一张图片

上下滚动时 要保证 “购物街” 也就是 nav-bar 固定不动 一直显示在最上方

还有个问题 图片被遮住了

直接在home离给个padding-bottom 40px 就好了 后面再用更好的办法

TabControl

在Home里

向下滑动时 tab-control 固定

数据请求

把本来写在created的 封装到methods里

展示数据

先搞个大组件 GoodsList

返回list 数组

再里面放一个一个小组件 GoodsListItem
包括商品名称 价格 收藏数
返回一个对象


子绝父相

TabControl

点击tabControl 切换图片



变量太长不好 给他放到计算属性里

Better-scroll

npm install better-scroll --save

现在分类里试一下


用鼠标上滑，局部滚动
而且有弹簧效果

---

BackTop

点击这个图标 可以直接到首页顶部
最关键的是中间的滚动部分要回到最开始的地方 所以在Home里监听点击事件 而不在backTop里 如果在子组件里监听 还得$emit发射事件到父组件

只需要在Home里

通过this.$refs.scroll 可以访问到设置了ref属性的子组件scroll
在子组件scroll里封装了scrollTo time为默认值缓冲时间

这样就可以直接调用scrollTo方法了
比 原来的 this. $refs.scroll.scroll.scrollTo(0,0) 优雅一点

---

只有滚到某个位置的时候 回到顶部图标才显示出来
所以需要

监听滚动的位置

得有probeType属性才能监听
最好不写在创建BScroll对象里 因为 别的组件也要调用scroll 但是不一定实时监听
所以用props
Home需要监听就 :probe-type=“3” 不加冒号传的是字符串 加了才是变量 类型为number

probeType默认为0，
为1时，滑动超过一定时间才发送scroll事件
为2时，滑动过程中发送
为3时，不仅滑动过程中，而且滚动动画中也发送

pullUpLoad 上拉加载 默认为false 可以配置threshold （阈值）决定什么时候开始加载

创建scroll对象
Click为true时 才可以发送点击事件 因为better-scroll会阻止浏览器的click事件
probeType
pullUpLoad

监听滚动位置
子组件自定义事件scroll 传给父组件 position

父组件

谁想实时监听 就 @监听这个事件scroll

一样可以打印position 有x，y值

要滚动到某个值的时候显示回到顶部图标 默认是不显示
使用v-show 因为要动态变化 所以不能直接写true 或 false
用变量isShowBackTop



因为position里的y值都是负数 所以加个负号
我记得是和坐标轴相反的 越往下则距离0越远 y值在变大
但这里是往上滑动 算的是负值 往上滚动的距离越多 则-222 -234 -256 这样
往下滑 则往上滚动的距离变小 则 -222 -201 -199

---

往上滑加载更多图片

pullUpload

better-scroll
最外层的是wrapper 滚动的是内层的content

当DOM结构发生变化时 也就是滑不动了 应该是高度变了 就需要重新计算高度
用refresh 刷新下

每次上拉加载完都需要finishPullUp 这样才能继续下一次的上拉加载
因为有封装finishPullUp 所以只写一次scroll

---

回顾

FeatureView
div>a>img

TabControl
props->titles
div> v-for titles > span {{item}}
css
选择tab 会变色

 :class="{active: index===currentIndex }"
@click="itemClick(index)"

getHomeGoods

goods:{
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]}
      }

在home.js里封装 getHomeGoods
在Home.vue中 又在methods里 getHomeGoods（type）
调用getHomeGoods（‘pop’）getHomeGoods（‘new’）getHomeGoods（‘sell’）

created() {
    this.getHomeMultidata(),
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
    
  }

page 动态获取对应的page

const page = this.goods[type].page + 1

获取数据 res

getHomeGoods(type,page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page+=1

GoodsList
props:goods 是某一个list

<goods-list-item v-for="(item,id) in goods"  :goods-item="item" :key="id">

GoodsListItem
props:goodsItem
用goodsItem 取出数据 用 div p span 进行展示

<div class="goods-item" @click="itemClick">
    <img :src="goodsItem.show.img" alt="">
    <div class="goods-info">
      <p>{{goodsItem.title}}</p>
      <span class="price">{{goodsItem.price}}</span>
      <span class="collect">{{goodsItem.cfav}}</span>
    </div>
  </div>

better-scroll

this.scroll = new BScroll(this.$refs.wrapper, {

监听滚动 probeType ：3

 this.scroll.on('scroll', (position) => {
        // console.log(position);
        this.$emit('scroll', position)
      })

上拉加载 pullUpLoad:true

 this.scroll.on('pullingUp', () => {
        this.$emit('pullingUp')
        // console.log('pp');
      })

click:false
button可以监听点击
div不可以

BackTop

对BackTop的监听

<back-top @click.native="backClick"  v-show="isShowBackTop"></back-top>

因为这里用了ref 所以可以用this.$ref.scroll 就能去scroll.vue里调用方法

回到顶部

this.$refs.scroll.scrollTo(0,0)

BackTop显示和隐藏
isShowBackTop:false
监听滚动的位置position

this.isShowBackTop = (-position.y) > 1000