vue手机端常用功能

一、详情页返回列表页记住滚动条位置；
①在app.vue中配置keep-alive缓存；

<div id="app">
    <keep-alive>
      <router-view :key="$route.fullPath" v-if="$route.meta.keepAlive"
      ></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"
    ></router-view>
</div>

②router中设置keepAlive:true;

{
      path: '/reserved',
      name: 'reserved',
      component: () => import('@/views/personReserve/reserved/index.vue'),
      meta: {
          title: '个人预约列表',
          keepAlive: true
      }
},

③列表页使用activated函数查询最新数据;

activated() {
  this.getReserveList();
},

二、下拉刷新数据；上拉加载更多数据；
这里主要介绍使用vant框架中方法；
①下拉刷新使用PullRefresh；

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <p>刷新次数: {{ count }}</p>
</van-pull-refresh>

import { Toast } from 'vant';

export default {
  data() {
    return {
      count: 0,
      isLoading: false,
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};

②上拉加载更多使用list列表；

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
</van-list>

export default {
  data() {
    return {
      loading: false,
      finished: false,
    };
  },
  methods: {
    getReserveList() {
      //预约列表
      this.loading = true;
      getTeamReserveListApi(this.listQuery)
        .then((res) => {
          if (res.data.code == 1) {
            this.reserveList =
              this.listQuery.curPage == 1
                ? res.data.data
                : this.reserveList.concat(res.data.data);
            this.loading = false;
            this.refreshing = false;
            if (this.reserveList.length >= res.data.totalCount) {
              this.finished = true;
            }
          } else {
            //给予提示
            this.loading = false;
            this.refreshing = false;
            handleMessage(res.data.msg);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.refreshing = false;
          handleMessage(err);
        });
    },
    onLoad() {
      //下拉刷新
      setTimeout(() => {
        this.listQuery.curPage++;
        this.getReserveList();
      }, 1000);
    },
  },
};

三、返回顶部；

<template>
  <div class="center">
    <div class="btnTop" v-if="btnFlag" @click="backTop()">
      <i class="el-icon-top"></i>顶部
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnFlag: false,
      scrollTop: "",
    };
  },

  // vue的两个生命钩子，这里不多解释。
  // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },

  methods: {
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      let that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },

    // 为了计算距离顶部的高度，当高度大于200显示回顶部图标，小于200则隐藏
    scrollToTop() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 200) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
  },
};
</script>
<style scoped>
.center .btnTop {
  text-align: center;
  position: fixed;
  right: 20px;
  bottom: 30px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  background: #0464c6;
  color: #fff;
}
</style>

四、左上角返回到指定页面；

在返回页面根据beforeRouteEnter函数判断跳转路径

beforeRouteEnter(to, from, next) {
  if (from.name == "home") {
    next((vm) => {
      //跳转代码
    });
  } else {
    next();
  }
},

五、ios系统与安卓系统日期格式问题；

说明:ios系统时间格式不支持毫秒和特殊符号短横线；

this.currentDate = new Date(timeRemoveMill(day).replace(/-/g, "/"))

function timeRemoveMill(time) { // 时间去掉毫秒
  if (time) {
    let date = ''
    if (typeof time === 'number') {
      date = parseTime(time)
    } else {
      date = time
    }
    if (date && date.indexOf('.') > -1) {
      date = date.substr(0, date.indexOf('.'))
    }
    return date
  }
}