刘伯温期期准选一肖

刘伯温期期准选一肖

“Linux” 小程序Web版开发(二):UI开发


发布日期:2020-02-05 10:01   来源:未知   阅读:

  列表页:列表页面则是在搜索过程中,如果有多个结果,则进入到列表页面。如果有单个结果,则应该进入到详情页面。

  根据实际的工作拆分组件的化,我需要有一个 Layout 组件来负责整体的页面的环境渲染。但是,考虑到组件的复用,于是决定将首页的 Title 进行优化,使首页和详情页保持一致。

  在新版的布局情况下,我就可以将顶部的的 title 和底部的 Link 放在最外侧的组件中。

  在思考情况后,接下来我们来创建 Router 和 Page。首先,删除views下的About.vue(因为这个页面我们不需要)。然后创建List.vue和Result.vue,用作后续的开发准备。

  接下来需要编写 Home、List 和 Result 这三个页面。由于这三个页面在内容方面没有太多的可以借鉴的点,所以我们更多关注于使用页面中script的部分。

  上述代码是我在三个页面几乎都会使用到的结构,删除其中的一些无用的代码以后,基本上在每个页面都可以看到。这里我重点说一下其中的一些比较特殊的用法。

  首先第一个是在v-text-field上加入的@keydown=onKeyDown这个绑定,这个绑定将会帮助实现用户点击回车以后,自动触发事件。这样在用户输入完命令后,按下回车就自动执行后续的操作,而不需要再移动鼠标指针去点击按钮启动搜索。

  其次,在v-text-field上加入了autofocus,来实现进入页面后,自动为输入框加入focus,从而实现页面加载完成后,用户就可以输入命令。

  除此之外,我还用到了computed,来做数据调整,确保我可以控制内容。

  由于我们的应用在列表页面和详情页面存在数据的查询时间,为了让应用在加载的时候,不会因为加载中而退出页面,我加入了 v-skeleton-loader 组件,这样用户在数据查询的时候,看骨架图来缓解用户的焦虑。

  在组件层面,我配置了v-if来做显示的控制,并将 type 设置为card,article,card,article来实现多样化的组件加载支持。

  在这一部分中,借助 Vue 的method、onkeydown和computed实现了页面基本逻辑的构建。并借助 Vuetify 的一些基础组件来构建页面。

  在这一部分,我想告诉大家的更多是在 UI 的部分,我们在做的时候不仅仅需要考虑的是界面,更多还需要考虑在 UX 侧体验的优化,组件库提供给我们的配置项目,可以优化产品体验。