首页列表加载更多
2023-04-08 23:49:47 2 举报
思维导图
作者其他创作
大纲/内容
在script中定义list空数组,分别定义好loading,finished初始值(都为false),定义触底事件函数onLoad,在onLoad事件函数中调用后台接口函数,将返回的后台数据push到list数组中去,如果后台数据返回的页面总数小于等于1,finished的值为true,页面加载完成,最后给loading值设为false,列表加载渲染完成
通过van-list组件实现列表加载更多效果:将van-list组件套在文章组件(Knowlege-car)组件外层,给van-list绑定v-model:loading,控制页面加载效果,动态绑定finished属性,控制页面数据是否加载完成,通过@load绑定触底事件,发请求,获取后台数据
通过查看后台接口文档,在consult.d.ts文件中定义首页tab栏切换所需的文章类型type KnowledgeType =‘like’| ‘recommend’|‘fatReduction’| ‘food’
使用van-tabs组件,重置样式,通过shrink实现收缩布局;通过sticky实现吸顶效果
tab栏组件页面切换页面布局思路:外面一层是列表组件,列表组件中套了一个文章组件,获取后台数据渲染出每个文章组件的内容
首页模块-列表加载更多
将公共组件中的列表组件引入到首页index组件中,挂载到每个van-tab组件上,呈现出每一个tab组件中的文章内容
在首页Home文件夹下新建一个公共文件夹components,分别创建Knowledge-list(列表组件)和Knowledg-card(文章组件)组件,将文章内容组件引入到列表组件中进行渲染
开始
结束
实现tab栏点击高亮效果,给van-tabs组件绑定v-model:active =active,给每个子组件van-tab添加name=”文章类型“;在script中声明active的基本类型并添加默认选中“推荐”栏效果:const active = ref<KnowledgeType>('recommend')
0 条评论
下一页