uni-app文章列表制作⑨

文章目录

- 十三、文章列表制作-文章卡片
- - - [一、创建文章相关 listItem 组件](#一、创建文章相关 listItem 组件)
    - 二、文章卡片组件定义
    - [三、定义 uniapp 模版](#三、定义 uniapp 模版)
- 十四、文章列表制作-数据渲染

十三、文章列表制作-文章卡片

一、创建文章相关 listItem 组件

使用 scroll-view 实现竖向滚动容器制作，注意在样式定义时进行多级高度设定

vue 复制代码

<view class="list-scroll-container">
		<scroll-view scroll-y="true" class="list-scroll">
			<view>
				<ListCard v-for="item in 50" :key="item"></ListCard>
			</view>
		</scroll-view>
</view>

二、文章卡片组件定义

创建基本样式及结构
定义多状态卡片模块
1. 通过父组件传递 mode 属性进行条件编译
2. 根据条件进行选项卡卡片展示

三、定义 uniapp 模版

根目录下创建 index.html 文件
参考地址：https://uniapp.dcloud.io/collocation/manifest?id=h5-template
manifest 文件的 html5 配置中进行 index.html 文件引入

十四、文章列表制作-数据渲染

一、云函数创建

定义 articleList 云函数

删除不需要返回的文章详情内容

react 复制代码

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	const list = await db.collection('article')
	.aggregate()
	.project({
		content:0
	})
	.end()
	//返回数据给客户端
	return {
		code:0,
		msg:"数据请求成功",
		data:list.data
	}
};

二、前端进行数据获取

articleList 组件 => created 钩子中进行数据获取

react 复制代码

created () {
    this._getArticleList()
  }
 methods: {
    async _getArticleList () {
      const articleList = await this.$http.get_article_list()
      this.articleList = articleList
    }
  }

三、数据渲染

listItem 组件中进行循环渲染使用

react 复制代码

<view class="list-scroll-container">
		<scroll-view scroll-y="true" class="list-scroll">
			<view>
				<ListCard :item="item" v-for="(item,index) in articleList" :key="index"></ListCard>
			</view>
		</scroll-view>
	</view>

四、根据选项卡分类进行数据渲染

添加全部分类选项

react 复制代码

async _intiLabelList() {
				const labelList = await this.$http.get_label_list()
				this.labelList = [{name:"全部"},...labelList]
			}

请求 articleList 时进行数据传递
1. 为了保证导航数据的正确获取，调整 created 函数的_getArticle_list 方法在 watch 中进行调用
  react 复制代码
```
 watch: {
    labelList(newVal,OldVal) {
    this._getArticleList()
    },
  },
```

云函数进行数据过滤调整

js 复制代码

"use strict";
const db = uniCloud.database();
exports.main = async (event, context) => {
  const { classify } = event;

  let matchObj = {};

  if (classify !== "全部") {
    matchObj = { classify };
  }

  const list = await db
    .collection("article")
    .aggregate() // 使用聚合的形式进行数据的获取
    .match(matchObj) // 根据匹配条件进行数据返回
    .project({
      content: 0, // 本次查询不需要返回文章详情给前端
    })
    .end();
  //返回数据给客户端
  return {
    code: 0,
    msg: "数据请求成功",
    data: list.data,
  };
};

前端对数据进行缓存处理

将原有接受内容数组转换为对象进行存储。每次 change 改变内容时进行判断操作处理

使用$set 方法进行对象的页面重新渲染

js 复制代码

async _getArticleList (currentIndex) {
      const articleList = await this.$http.get_article_list({classify:this.labelList[currentIndex].name})
      this.$set(this.articleData,currentIndex,articleList)
    }