有赞商城实战项目

1. 对于多页面中使用同一个组件（导航组件），如何对这个组件的点击状态进行设置，这里以底部导航为例
   首先我们要对导航里的内容做数据渲染，如果没有数据那么我们就自己创造数据，然后通过v-for遍历

let navLists = [{
  "name": "有赞",
  "icon": "icon-home",
  "href": "/index.html"
},{
  "name": "分类",
  "icon": "icon-category",
  "href": "/category.html"
},{
  "name": "购物车",
  "icon": "icon-cart",
  "href": "/cart.html"
},{
  "name": "我",
  "icon": "icon-user",
  "href": "/member.html"
}]
export default {
    name: 'Footer',
    data(){
      return {
        navLists,
        current: 0//默认第0个选中
      }
    },
    methods: {
      changeNav(list,index){
       this.current = index
      }
    }
}

上面虽然在每个页面里都可以正常显示组件里的内容了，但是因为点击要跳转到不同的页面，所以你每次current的值都会重新渲染为0，没办法点击哪个页面当前导航添加指定类。

解决办法：将你的每个的index传入你点击跳转后的url中的查询参数中，然后通过location.search获取查询参数，这里需要将你拿到的查询参数转成一个对象比如index=1转成{index:'1'}这样方便进行数据的操作，所以我们要使用一个qs插件

import qs from 'qs'
//qs.parse(location.search.substring(1))就是{index:'1'}
//这里拿到的index的值是字符串类型的
//因为location.search拿到的查询参数包含?所以从第一个开始获取
let {index} = qs.parse(location.search.substring(1))
export default {
    name: 'Footer',
    data(){
      return {
        navLists,
        //index这个变量存在current就是将index转成number的值，不存在也就是刚进首页的时候current就是0
        current: Number(index) || 0
      }
    },
    methods: {
      changeNav(list,index){
        location.href=`${list.href}?index=${index}`
        //http://localhost:8080/category.html?index=1
      }
    }
}

这样每次点击就可以把你当前的index传给current了

---

2. 多页面应用中多次用到的模块，可以使用mixins混合。
   接受一个混入对象的数组
   比如：我很多页面中都需要用到一个价格的过滤器和底部导航组件，这时就可以在公用的js里创建一个mixin.js将他们写在一个对象里

//mixin.js
import Foot from 'components/Foot.vue'
let mixin = {
    filters: {
        priceNum(value){
            let newValue = value + '';
            if(newValue.indexOf('.') !== -1){
                let arr = newValue.split('.')
                return arr[0] + '.' + (arr[1]+ '0').substring(0,2)
            }else{
                return value + '.00'
            }
        }
    },
    components: {
        Foot
    }
}
export default mixin

然后在需要使用的地方引入，在实例里通过mixins:[你定义的名字]来使用

//category.js
import mixin from 'js/mixin.js'
let app = new Vue({
    el: '#app',
    mixins: [mixin]
}

---

3. vue里通过触摸滑动执行的方法写在@touchmove=""里

4. 使用mint-ui组件实现一个滚动条滚动到底部的时候加载更多数据
   1). 安装使用

   npm i mint-ui -S
   //在需要使用的地方引入
   import { InfiniteScroll } from 'mint-ui';
   
   Vue.use(InfiniteScroll);
   

   2). 在需要渲染数据的父节点上使用

   
     
   {{ item }}
   
   

   上面的getLists是你滚动条滚动的时候执行的加载更多数据的方法，infinite-scroll-disabled后面的loading是布尔值，是否禁用无限滚动，默认是false，可以触发无限滚动加载数据，true就是不触发，infinite-scroll-distance无限滚动距离，上面当滚动距离为10的时候再次触发getLists这个方法

   import { InfiniteScroll } from 'mint-ui';
   Vue.use(InfiniteScroll);
   let app = new Vue({
   el: '#app',
   data: {
       list: null,
       //默认为false可以使用无限滚动加载数据
       loading: false,
       //是否完全加载完成
       allLoaded: false,
   },
   created(){
       this.getLists()
   },
   methods: {
       getLists(){
           //如果所有数据都加在完了，那么就不去执行这个方法了
           if(this.allLoaded) return;
           //是否正在加载，当数据还未完成加载就禁用无限滚动 
           this.loading = true
           axios.get(url.hostlists).then((res)=>{
               let curLists = res.data.lists;
               //所有数据是否加载完毕
               if(curLists.length

5. 对于点击多个按钮，如果想点击每个不同的按钮都显示不同的html片段的话，那么可以通过同一个点击事件值传入一个不同的数字来实现，比如

购物车
立即购买
选择规格

  点击购物车要显示的内容....


  点击立即购买要显示的内容...


  点击选择规格要显示的内容...