1.页面点击input输入框后，整个页面变大
解决方法：在根目录下的index.html中修改meta
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale =1.0,user-scalable=0">
2.vux tabbar底部栏激活
//阅读官方文档后，按照步骤
<tabbar>
<tabbar-item :link="{path:'/home'}" :selected="$route.path==='/home">
<img slot="icon-active" src="../../assets/footer1.png">
<img slot="icon" src="../../assets/footer2.png">
<span slot="label">会员中心</span>
</tabbar-item>
<tabbar-item show-dot link="/productHome" :selected="$route.path==='/productHome'">
<img slot="icon-active" src="../../assets/footer3.png">
<img slot="icon" src="../../assets/footer4.png">
<span slot="label">我的产品</span>
</tabbar-item>
</tabbar>
注：（1）两个img标签分别是激活状态和非激活状态的图标
按照官方文档，会遇到一个问题，就是虽然点击跳转后路由激活，底部栏变色，但是在跳转到子路由，例如“/home/***”后，再刷新页面，会发现底部栏激活已经消失。
//解决方式
<template>
<tabbar>
<tabbar-item :link="{path:'/home'}" :selected="isHome">
<img slot="icon-active" src="../../assets/footer1.png">
<img slot="icon" src="../../assets/footer2.png">
<span slot="label">会员中心</span>
</tabbar-item>
<tabbar-item show-dot link="/productHome" :selected="isProductHome">
<img slot="icon-active" src="../../assets/footer3.png">
<img slot="icon" src="../../assets/footer4.png">
<span slot="label">我的产品</span>
</tabbar-item>
</tabbar>
</template>
<script>
export default {
computed:{
isHome () {
return /home/.test(this.$route.path)
},
isProductHome () {
return /productHome/.test(this.$route.path)
}
}
};
</script>
//路由：例子
{
path:'/productHome',
component:productHome,
children:[
{
path:'',
component:productList
},
{
path:'register',
component:register
}
]
},
{
path:'/home',
// name:'HomeBase',
component:indexHome,
children:[
{
path:'',
component:home
},
{
path:'editUserInfo',
component:editUserInfo
},
]
},
用computed中的方法解决后，跳转到子路由再刷新页面，底部都是激活状态
3.vue.js 中vue-pull-to插件的使用
官网：https://www.npmjs.com/package/vue-pull-to
按照官网，引入插件
<pull-to
:top-load-method="refresh"
:bottom-load-method="loadMore"
style="margin-bottom:5rem;">
<div class="mb">
<div class="point">
<div class="point-content">
<divider><span>积分明细</span></divider>
<div class="point-list" v-for="list in dataList">
<div class="list-left">
<span class="left-text">{{list.pointOperationTypeDesc}}</span> <br>
<span class="left-time">{{list.pointDT}}</span>
</div>
<div class="list-right " v-if="list.pointValue > 0">
<span class="plus">+{{list.pointValue}}</span>
</div>
<div class="list-right " v-if="list.pointValue < 0">
<span class="minus">{{list.pointValue}}</span>
</div>
</div>
</div>
</div>
</div>
<load-more v-show="isLoading" :show-loading="true" tip="正在加载" background-color="#fbf9fe"></load-more>
<pull-to>
<script>
import { Divider ,LoadMore } from "vux";
import { mapState, mapMutations } from "vuex";
import PullTo from "vue-pull-to";
import { get, post } from "@/util/http";
export default {
components: {
Divider,
PullTo,
LoadMore
},
data() {
return {
isLoading:true,
curPage: "",
pageSize:"",
sw: true,
dataList: [],
};
},
methods: {
load: function(index, callback) {
this.sw = false;
post("/user/point", null, {
pageIndex: index
}).then(
// data => {},
data => {
this.sw = true;
var temp = data;
for (var i in temp) {
this.dataList.push(temp[i]);
}
if(typeof(callback)=="function"){
callback("done");
}
},
data => {
this.sw = true;
if(typeof(callback)=="function"){
callback("done");
}
}
);
},
//下拉刷新
refresh(loaded) {
console.log("刷新");
this.dataList = [];
this.load(1, loaded);
console.log("刷新完成");
},
//上拉加载更多
loadMore(loaded) {
console.log("加载更多");
if (this.sw == true && this.curPage < this.pageSize) {
// 将开关关闭
this.load(this.curPage + 1, loaded);
}else{
loaded("done");
}
}
},
mounted: function() {
this.load(1);
//因为我初次加载会出现页面渲染快，数据慢，所以用了vux的load-more
setTimeout(() => {
this.isLoading = false
},500)
};
</script>
4.vue-router 传参
//路由传参有两种方式
（1）router.push({ name: 'user', params: { userId: 123 }})
.vue文件
router.push({ name: 'user', params: { userId: 123 }})
5.解决困扰的切换路由滑动页面，在进入别的页面，滑动的位置会记忆的问题
只要你在app.vue中加几行代码就能轻易解决为题
watch: {
$route: function(to, from) {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
},
网友评论