vue项目中前端页面问题

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;
    }
  },