# 列表详情
## 前言
我们使用 `M8.3移动前端框架` 进行下拉刷新列表、详情页面的开发
已根据 教程 章节了解 `M8` 开发的思路
## 新建模块
模块代码统一放在 `src/pages` 下，每个模块应用对应一个文件夹。
我们在此路径下新建文件夹，例如 `m8demo`。
在 `m8demo` 文件夹下新建 `router.js` 文件，如下：
`src/pages/m8demo/router.js` :
```js
/**
* router.js无需import组件，需要path路径与vue组件名称保持匹配。
* routers数组下有效参数只有path与style。
* 构建时会自动将模块下的路由配置合并到pages.json内。
*/
// 定义路由规则，url匹配path时，加载component组件页面
const routes = [
{
path: 'pages/m8demo/list',
style: {
navigationBarTitleText: '列表页面',
},
},
{
path: 'pages/m8demo/detail',
style: {
navigationBarTitleText: '详情页面',
},
},
];
// 导出路由文件
export default routes;
```
## 列表页面
接下来我们在 `m8demo` 下新建 `list.vue` 组件页面
`list.vue` :
```js
<!-- template部分 -->
<template>
<!-- template内只能有一个根节点 -->
<view class="container"></view>
</template>
<!-- js部分 -->
<script></script>
<!-- css部分 -->
<style scoped></style>
```
`M8`的 `easycom` 机制，将组件引用进一步优化，开发者只管使用，无需在 `JS` 里额外导入和注册。
```js
<template>
<view class="container">
<em-minirefresh
ref="scrollPull"
:initPageIndex="initPageIndex"
:page-size="pageSize"
:url="url"
:request-data="dataRequest"
:change-data="dataChange"
>
<template v-slot:default="{ listData }">
<!-- 此处template内为列表list元素，listData为dataChange处理后的接口返回数据 -->
<em-cell v-for="(item, index) in listData" :key="index" :title="item.title" @click="itemClick(item)" />
</template>
</em-minirefresh>
</view>
</template>
<script>
export default {
// 定义用到的数据，在template中使用{{ }}包裹，自动实现绑定
data() {
return {
// 请求的url
url: `${Config.serverUrl}/rest/list`,
// 接口请求的初始页面
initPageIndex: 0,
// 每次请求的分页大小
pageSize: 10
};
},
// 计算属性
computed: {
},
// 侦听属性
watch: {
},
// 实例数据创建完成后调用
created() {
},
// 实例DOM被挂载后调用
mounted() {
},
methods: {
// 请求参数函数
dataRequest(currPage, pageSize) {
const data = {
// 当前搜索的第几页，数字类型
currentpageindex: currPage,
// 每页显示记录条数，数字类型
pagesize: pageSize
};
const requestData = {
params: JSON.stringify(data)
};
return requestData;
},
// 修改数据返回参数
dataChange(res) {
let data;
if (res && res.status && res.status.code && res.status.code === 1) {
data = res.custom.infolist;
} else {
console.error('接口返回参数错误');
}
return data;
},
// 列表模板绑定的点击事件函数
itemClick(item) {
ejs.page.open({
pageUrl: "./detail",
pageStyle: 1,
orientation: 1,
data: {
id: item.id,
},
success: function (result) {},
});
}
}
};
</script>
<!-- css部分 -->
<style lang="scss" scoped>
.container {
height: 100vh;
}
</style>
```
## 详情页面
接下来我们在 `m8demo` 下新建 `detail.vue` 组件页面
`detail.vue` :
```js
<!-- html部分 -->
<template>
<div class="container">
<h1>{{ title }}</h1>
<div v-html="content"></div>
</div>
</template>
<!-- js部分 -->
<script>
export default {
name: "detail",
components: {},
// 定义用到的数据，在template中使用{{ }}包裹，自动实现绑定
data() {
return {
title: "",
content: "",
};
},
// 计算属性
computed: {
},
// 侦听属性
watch: {
},
// 实例数据创建完成后调用
created() {
const id = Util.getExtraDataByKey("id") || ""
this.getDetail(id);
},
// 实例DOM被挂载后调用
mounted() {
},
methods: {
getDetail(id) {
let _this = this;
Util.ajax({
url: `${Config.serverUrl}/rest/detail`,
data: {
params: JSON.stringify({
guid: id,
}),
},
})
.then((result) => {
if (
result &&
result.status &&
result.status.code === 1
) {
_this.title = result.custom.info.title;
_this.content = result.custom.info.data;
}
})
.catch((err) => {
console.error(err);
});
},
}
};
</script>
<!-- css部分 -->
<style lang="scss" scoped></style>
```
一个简单的列表详情页面就完成了
