一、需求

一篇詩歌（區別于普通文章，行內容固定，不能切斷換行），通常包括題目、章節目錄、內容

為方便在小程序上的閱讀，設計上按章節分開索引，實現效果如下

文章閱讀效果圖

二、設計分析

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自定義組件