一、需求
一篇诗歌（区别于普通文章，行内容固定，不能切断换行），通常包括题目、章节目录、内容
为方便在小程序上的阅读，设计上按章节分开索引，实现效果如下
文章阅读效果图
二、设计分析
2.1 数据设计和保持
数据库设计，并保存为csv格式，同时批量导入到微信云数据库中
2.2 页面主要包括3部分：搜索、Tab头、文章页
2.3 组件设计
Tab头使用 tabs组件，采用循环方式注入内容。
文章页需要左右能滚动，引用scroll-view组件，允许scroll-y 上下滚动。
文章页需要能上下滚动，引用swiper组件，循环方式内容注入到单个swiper-item中。
为能清晰组件功能和嵌套调用，设计为4个自定义组件，分别为list-card,list-scroll,list-item,list ，包含关系图如下：
组件嵌套调用关系图
三、程序实现
3.1 阅读页面
自定义组件 x-list 读取章节内容
阅读页
3.2 自定义list组件
引用原生swiper组件，并引用自定义 x-list-item组件，实现左右滑动效果
x-list自定义组件
3.3 自定义list-item组件
引用自定义组件x-list-scroll和x-list-card组件
x-list-item自定义组件
3.4 自定义list-scroll组件
引用原生scroll-view组件，实现上下翻动效果。slot插槽引入list-card
x-list-scroll自定义组件
3.5 自定义list-card组件
展示每章的具体文本内容，对于章节头做一个高亮显示
x-list-card自定义组件
网友评论