有赞商城实战项目

  1. 对于多页面中使用同一个组件（导航组件），如何对这个组件的点击状态进行设置，这里以底部导航为例
    首先我们要对导航里的内容做数据渲染，如果没有数据那么我们就自己创造数据，然后通过v-for遍历
<template>
    <div class="bottom-nav">
      <ul>
        <li :class="{active:current===index}" 
        v-for="(list,index) in navLists"
        @click="changeNav(list,index)"
        >
          <a>
            <i :class="list.icon"></i>
            <div>{{list.name}}</div>
          </a>
        </li>
      </ul>
    </div>
</template>
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了

  1. 多页面应用中多次用到的模块，可以使用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]
}

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

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

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

Vue.use(InfiniteScroll);

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

    <ul
  v-infinite-scroll="getLists"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
  <li v-for="item in list">{{ item }}</li>
</ul>

    上面的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<this.pageSize){
                this.allLoaded = true
            }
            if(this.list){
                //如果已经获取了list，就让list在已经存在的数据基础上添加新的数据
                this.list = this.list.concat(curLists)
            }else{
                //初始化
                this.list= curLists
            }
            //数据加载完成后继续使用无限滚动
            this.loading = false
        })
    }
}

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

<button @click="getMain(1)">购物车</button>
<button @click="getMain(2)">立即购买</button>
<button @click="getMain(3)">选择规格</button>
<div v-show="1">
  点击购物车要显示的内容....
</div>
<div v-show="2">
  点击立即购买要显示的内容...
</div>
<div v-show="3">
  点击选择规格要显示的内容...
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      dis: 1
    },
    methods: {
      getMain(index){
        this.dis = index
      }
    }
  })
<script>

上面就是默认第一个也就是购物车内的内容显示，点击不同按钮，不同的内容显示

  1. 点击按钮实现数值加减
    也是同样写一个方法就可以，然后按钮里面传入每次点击要加的数量，加按钮就传入这个数量的正数，减按钮就传如负数，利用这个方法实现购物车商品数量的加减
<buttton @click="changeNum(-1)"  :class="{disabled: count===1}">-</button>
<input type="text" :value="count">
<button @click="changeNum(1)">+</button>

<script>
var app = new Vue({
  el: '#app',
  data: {
    count: 1,
  },
  methods: {
    changeNum(num){
      if(num===-1 && this.count===1) return
      //如果num是-1就是加-1，num是1就是+1
      this.count += num
    }
  }
})
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,255评论 4赞 61
  • 假设你真的不结婚
    “如果让我许一个愿，第一件事就是希望全部社交媒体封掉！” 当然，这件事不可能实现 写这篇文章的初衷，并不是批判某些...
    一眸一忆阅读 286评论 1赞 1
  • 备忘录临摹 荷包蛋
    好久没打卡喇～临摹简书上面的一位同学的
    一只无聊的龟阅读 295评论 0赞 1
  • 理解OAuth 2.0
    OAuth是一个关于授权（authorization）的开放网络标准，在全世界得到广泛应用，目前的版本是2.0版。...
    猎人1987阅读 268评论 0赞 0