首页列表加载更多
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 条评论
下一页
