微信小程序scroll-view和swiper的合并封装实现上下滑动和左右滚动

一、需求

一篇诗歌（区别于普通文章，行内容固定，不能切断换行），通常包括题目、章节目录、内容

为方便在小程序上的阅读，设计上按章节分开索引，实现效果如下

文章阅读效果图

二、设计分析

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自定义组件