赞
踩
目录
一共两个页面,主页是这样的,主页有上拉触底,和下拉刷新两个功能,其余就没有别的功能了
我的 是这样的,我的 这一页没有接任何的数据,他是一个死的页面
使用了vant组件库,vant是一个移动端组件库,vant4官网 Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.
这里你其实就可以直接用了,下面是优化的方面,如果你的开发完之后,项目打开的非常慢,这个时候你可以考虑按需引入vant,按需引入vant会减少一部分体积
按需引入vant需要使用插件 unplugin-vue-components
如果是按需引入css,你需要找到项目中的 vue.config.js 然后加上如下内容
如果不按需引入css,就按照下面的方式在main.js引入css,按需与否只有css的区别 import { Button } from 'vant'的用法是相同的
全都是在 main.js 中进行引用的
下面简单说一下每个组件的用法,用法也都可以在文档中查到
navbar是导航栏,这里直接就当作标题用了
像 v-model:loading="update_loading" 你可以理解为 van-list 这个组件,需要一个名为 loading 的变量,但是他的值你可以自定义,我自定义为update_loading
这个就是单纯的样式,van-cell中给的插槽就像下面这样写的,但是我们没用到插槽
就是这里的叉
建议通过调试工具找到具体的类名,然后将其原来的css覆盖掉
也可以这样在App.vue中定义整体风格,我现在把上图的样式注释掉,然后在App.vue中加入这些
这样他在某些地方能满足你的要求,但是某些地方不能,比如你的标题
我们希望页面切回来的时候,保持滚动条的位置
实现的原理是这样的
执行起来的这样的,首先你要保证HOME组件的活性(如果死了所以信息就都没了)
然后你的路由也需要有一个信息存放的地方,我们称其为元信息
之后处理发信息的一端,有下面几点需要注意
最后让路由每次访问 /HOME 时跳转到元数据存储的位置
视频中返回的是 {x:0,y:0}这种格式,你把savedPostion打印出来,savedPostion是{left:0,top:0}这种格式,由于版本的不同格式会不同,具体使用方式需要看文档
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。