mall开发第三天

1.实现局部的滚动：

原生的局部滚动

使用better-scroll的滚动
1.整体的布局是一个wrapper里面只能包含一content大标签

2.wrapper要有一个自己固定的高度，

3 之后就是导入better-scroll

这里是创建一个better-scroll的对象来管理滚动，其中，new BScroll（）第一个参数是要把wrapper元素传进去

注意这里不能在creaded方法中，因为creaded函数，只是创建这个组件，但是里面的元素还没有挂载到组件上，所以是找不到wrapper类的，

1.想要监听滚动到哪一个位置

sroll.on()代表是要监听一个事件，第一个参数是事件名类型（type），第二个参数是要调用的回调函数，当监听scroll事件时，默认会传递一个参数position，position中有位置的信息。
2.想要下拉加载更多的功能
1）
这里有一个属性pullUpLoad,默认是false

2）

之后是要监听pullingUp的事件，
注意：这里在完成一次之后，需要调用一次finishPullUp，确保还可以进行下一次的下拉加载更多。

属性：
proboType：确保可以实时的更新
click： 是contend里面的如button的事件也可以监听到，默认的content里面的事件是监听不到的
pullUpLoad：上拉加载

3.滚动在项目中的使用

2.实现点击回到顶部的功能

1）.native

默认是不能监听一个组件的事件的，需要加一个修饰符 .native

2)实现滚动到一定的位置，显示一个回到顶部的按钮：
整体的思路是：利用scroll监听scroll事件，一旦滚动事件发生了，就把这个事件的通过emit发射到父组件，之后父组件根据拿到的position的值，来给show赋值（v-show = ‘show’）

3）实现点击回到顶部的功能，通过scrollTo方法

4）实现加载更多数据的功能：
方法类似

3.通过点击不同的图片，之后跳转到另一个页面，但页面展示的信息不同的实现

1.首先有一个detial的页面，并给这个detial页面配置动态的路由
2.肯定是要向detial页面传递一个信息，detail根据拿到的信息不同，向服务器请求来的数据也不同，但现在的问题就是如何通过点击跳转到detial页面，并且传递一个信息过去，
此时就有两种通过路由器传递信息的方式，一种是params，一种是query

params方式
1）跳转的反方式

 this.$router.push('/detail/' + this.goodsItem.iid)

2）在detail页面获取参数的方式

 this.iid = this.$route.params.iid

query方式
1）跳转的方式

 this.$router.push({
        path: '/detail',
        query: {
          iid: this.goodsItem.iid,
          name: 'guodong'
        }
      })

2）在detail页面获取的方式

this.iid = this.$route.query.iid

方式的选择：如果参数不止一个就选择query的方式
一个参数的话，就可以选择params的方式

跳转到detial之后，也拿到了数据，这个时候需要做的就是用拿到的数据去服务器请求数据：
此时需要使用axios，对detail页面，单独的再封装一个detial.js,专门做detail页面的请求

import { request } from './request'

export function getDetail (iid) {
  return request({
    url: '/detail',
    params: {
      iid
    }
  })
}

注：此时需要把request（config）return出去，如果对服务器的请求需要参数的话，这里的方法是需要带上参数的，到时候在detail页面，就可以把拿到的数据当做参数传递过去，
调用完请求数据的方法后，就可以通过回调函数来把数据存储起来，如果数据很杂乱的话，可以创建一个对象，之后就是面对对象来拿数据

export class Goods {
  constructor (itemInfo, colums, services) {
    this.title = itemInfo.title
    this.desc = itemInfo.desc
    this.newPrice = itemInfo.newPrice
    this.oldPrice = itemInfo.oldPrice
    this.discount = itemInfo.discount
    this.colums = colums
    this.services = services
    this.realPrice = itemInfo.lowNowPrice
  }
}

4.通过点击一个dom元素实现局部的数据更新

和上面不同的是，这里是子组件告诉父组件应该展示什么内容，如果是像上上面那样，点击一个图片直接是跳到详情页，那就是两个毫无关系的组件之间的数据传递，这个时候就需要使用路由让两个组件之间产生联系。
一般情况下，父向子传递的消息，都是在父组件向服务器发送了请求，父组件拿到数据，之后父组件把需要在子组件展示的数据传递给子组件。而像组件的点击这种，都是子向父传递消息，父组件通过子组件传的消息，从而可以选择自己传的是哪些数据