页面部件确定及开发

底部导航

主要功能，根据页面自动判断选中一项

设计思路

1. 定义菜单项结构

   interface IMenu {
    name: string, // 显示的文字
    icon: string, // 显示的图标
    url: string   // 链接
   }

   12345

2. 定义可接受参数 menus: IMenu[]
3. 通过 $route.name 判断当前的路由，选中菜单

下拉刷新上拉加载

大致分为六个状态

1. 无
2. 下拉过程中 显示下拉刷新
3. 到达下拉距离限制 显示释放刷新
4. 向上脱离下拉 显示停止刷新
5. 直接释放 显示刷新中
6. 底部 显示加载更多
7. 触底 显示加载中
8. 加载完成 显示加载完成 1s 后自动恢复无状态

左滑删除

大致思路

1. 一般的分为左滑和右滑
2. 滑动的距离不能大于可显示的宽度，例如 左滑删除，当删除按钮完全显示后不再继续向左滑
3. 左滑到底是可以继续回撤的（即右滑），如果支持左右滑，那个应该已开始滑的方向为准，不能左滑开始，以实际右滑结束
4. 收起状态，
5. 滑动距离大于1/3可以动画补全但是完成滑动，小于1/3需动画补全恢复原始状态
6. 点击事件，需恢复原始无滑动状态
7. 排异模式，一个开始滑动，应该把其他的恢复到无滑动状态，动画过渡

时间选择

首先确定输入和输出，输入字符串就要输出字符串，输入Date 就要输出Date。

既然要输出字符串，那么就要支持格式化，就要有输入格式化定义 format

一个日期，应该是 年月日时分秒， 那个 年月日 是必须的，时分秒可选 通过 format 判断就行了

还需要有一个选择范围 min max

多语言？暂不考虑

还需要一个触发显示框，不需要外部代码手动触发，

<div @click="showCalendar" class="datepicker__input-container">
    <slot></slot>
</div>

这样就好了，使用方法

<DatePicker v-model="user.birthday" format="yyyy-mm-dd">
    <div class="line-item">
        <span>生日</span>
        <span>{{user.birthday}}</span>
        <i class="fa fa-chevron-right"></i>
    </div>
</DatePicker>

import DatePicker from '@/components/DatePicker.vue';

@Component({
    components: {
        DatePicker,
    },
})

地区选择（多级滑动选择）

为什么不用多个select 联动？

1. 为了同意样式，全部仿照 ios 底部弹出滑动选择
2. 为了方便，多个 select 占地方而且获取不方便，因为地区是不确定几级的，而且我只要最后的选择id

不确定几级，那么就用一个 v-for 就行了

要通过上下滑动进行选择，加上滑动事件 @touchstart='touchStart' @touchmove='touchMove'

转载请保留原文链接： https://zodream.cn/blog/id/64.html