- 对于多页面中使用同一个组件（导航组件），如何对这个组件的点击状态进行设置，这里以底部导航为例
首先我们要对导航里的内容做数据渲染，如果没有数据那么我们就自己创造数据，然后通过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了
- 多页面应用中多次用到的模块，可以使用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). 在需要渲染数据的父节点上使用
- {{ 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 对于点击多个按钮，如果想点击每个不同的按钮都显示不同的html片段的话，那么可以通过同一个点击事件值传入一个不同的数字来实现，比如
点击购物车要显示的内容....
点击立即购买要显示的内容...
点击选择规格要显示的内容...