- 对于多页面中使用同一个组件（导航组件），如何对这个组件的点击状态进行设置，这里以底部导航为例
首先我们要对导航里的内容做数据渲染，如果没有数据那么我们就自己创造数据，然后通过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了
- 多页面应用中多次用到的模块，可以使用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]
}
-
vue里通过触摸滑动执行的方法写在@touchmove=""里
-
使用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 }) } } -
对于点击多个按钮，如果想点击每个不同的按钮都显示不同的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>
上面就是默认第一个也就是购物车内的内容显示，点击不同按钮，不同的内容显示
- 点击按钮实现数值加减
也是同样写一个方法就可以，然后按钮里面传入每次点击要加的数量，加按钮就传入这个数量的正数，减按钮就传如负数，利用这个方法实现购物车商品数量的加减
<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>
网友评论