更新记录

1.6.0（2023-12-22）

• measureSize增加藏文字符测量
• 增加charSize属性单独定义字符尺寸
• split属性增加多字符兼容

1.5.9（2023-09-01）

• 修复滚动模式下计算滚动位置异常的问题

1.5.8（2023-08-23）

• 修复APP-VUE翻页翻往下一章时可能会出现的undefined

平台兼容性

使用须知

• 1、这是一个小说分页插件，不包含设置窗口
• 2、这个插件支持APP-NVUE、APP-VUE、H5、微信小程序
• 3、插件本身只支持滚动阅读，如果需要翻页功要配合好用翻页插件同时下载使用
• 4、小说分页有2种模式，章节模式和整书模式，章节模式就是需要分章节加载的小说，整书模式就是不分章节直接传入整本小说的模式
• 5、小说内容只支持纯文本格式 ，例如（内容内容内容内容内容/r/n内容内容内容内容内容）
• 6、章节模式建议初始化内容和跳转章节时一次传3个章节的内容
• 7、自定义页面有图片的，最好将图片高度固定，避免滚动模式下定位异常，且自定义页面只能放入章节后面展示
• 8、h5页面电量显示只能在安全环境下获取（比如：https://、file:///、localhost://）
• 9、不同平台下的体验是不同的，功能也有些许差别，比如APP-NVUE支持css较少，所以翻页效果不如其它端
• 10、有什么不懂，可以加群 1087735942 聊

props属性

clickOption

measureSize（用于分页计算，一般不用填，插件内部会自动测量，如果测量不对，可以自行填入修正）

charSize（单独定义某些字符的尺寸，用于分页计算，例如：单独定义字符'a'和字符'b'的宽度可以定义为[{text: 'ab', size: 4}]）

event事件

内置方法

content对象介绍

loadmore和preload事件回调callback介绍

currentChange事件参数currentInfo介绍

slot插槽

初始化插件

    <yingbing-ReadPage ref="page" style="height: 100vh;"></yingbing-ReadPage>

    export default {
        onReady () {
            let contents = [{
                chapter: 1,//章节序号
                content: this.getContent(1),//文本内容
                title: '第一章',//章节标题
                isStart: false,//是否是第一章节
                isEnd: false,//是否是最后一个章节
            },{
                chapter: 2,
                content: this.getContent(2),
                title: '第二章',
                isStart: false,
                isEnd: false,
            },{
                chapter: 3,
                content: this.getContent(3),
                title: '第三章',
                isStart: false,
                isEnd: false,
            }]
            const { page } = this.$refs;
            page.init({
                contents: contents,
                currentChapter: 2,//从第二章节开始阅读 和章节chapter对应
                start: 100//从章节的第100个字开始阅读
            })
        },
        methods: {
            getContent (chapter = 1) {
                return `第${chapter}章
                  灼烫或红中发黑的文字是必须执行的剧情，否则只有死路一条。\n  作为可以交易鬼物的死魂纸，可以根据该人探知真相进度的贡献度来获得，而篡改关键性剧情，会没收一定数量的死魂纸。\n  但这并不代表扮演者要完全忠诚地按照剧本说的去做，若果真如此，也只有死这一条路可走！相反，往往需要扮演者打破剧本中固有的剧情，才能够赢得一丝生机！\n  页面上浮现了一行血字：\n  【是否打开鬼物商城？】\n  是。\n  陈献的眼前出现了一个黑色的页面，边框熊熊燃烧着地狱之火，炙人眼球。\n  大概二十多个鬼物被挂在页面上，几乎都是动辄需要一两千张死魂纸的鬼物。\n  目前陈献的100张死魂纸，只够购买一个叫【死亡人眼】的鬼物。\n  【死亡人眼】：共可使用三次，已被使用两次，剩余可击退一次轻级诅咒鬼魂的攻击，对中级诅咒鬼魂有轻微抑制性作用，对高级和顶级诅咒鬼魂无用。卖家：盲人女孩扮演者凌小薇。（在《猫脸老太太》恐怖剧本中可获得）\n  页面的血字发生了改变。\n  【是否使用二十张死魂纸刷新页面？】\n  现在这个页面他能勉强买的起的就只有一个【死亡人眼】，再用20张死魂纸刷新，恐怕一个也买不了。\n  陈献当机立断，购买了【死亡人眼】\n  【鬼物：死亡人眼\n  死魂纸数量：0】\n  交易的瞬间，他的手心出现了一种圆润滑腻的触感，带着股若有若无的腥臊味。\n  陈献打开手心一看，里面有一只玻璃球大小的眼球，上眼皮黏连在上面，很像荔枝，而眼球的瞳仁正对着他。\n  一种悚然的感觉入骨，他放入了裤兜里。\n  陈献目前考虑的是，既然鬼物是抵抗鬼魂的唯一手段，那么他就需要更多的死魂纸来购买鬼物。\n  还有就是，待会儿发现孙晗死亡的是他，他要不要稍微改变一下剧情？比如说，叫上男主角梁鸿一起去发现死亡的孙晗？\n  不过，现在无论他怎么想都是无用的，要看到时的情况，总之，他想要主动地去探索这个恐怖剧本背后的真相，来获得死魂纸，从而囤积作为保命手段的鬼物。\n  时间在一点一点的过去，轻微的鼾声逐渐响起，陈献却全然不同，一想到接下来要发生的事情，他就无法睡眠。\n  好冷……比之前更冷了……\n  每呼吸一次，都好像吸了一口碎冰渣似的，喉咙都被扎得生疼。\n  陈献缩了缩身体，将自己裹得更紧些，虽然这并不能让他暖和哪怕一点。\n  困意汹涌地袭来，眼皮像被重物压上一样越来越重，陈献慢慢失去意识，睡了过去……\n  “吱——嘎——！”\n  陈献睁开双眼，巨大的声响仿佛平地一声惊雷，将他猛然惊醒！\n  旧蓝色的宿舍门竟然开了一道缝隙！\n  黑黢黢的缝隙后好像隐藏了一只细长的眼睛，让陈献越看越心慌，如果他没记错，门本来是锁着的。\n  外面不知何时下起了雨，打着窗棂发出“啪啪”的脆响。\n  “扣………扣…………扣……”\n  门被从外面敲击着，敲击声速度很慢，好像一个八十老妪在用苍老的手指一下一下敲着。\n  “扣……扣…扣”\n  敲击的速度明显加快了。\n  陈献犹豫着，想来想去，还是在上铺装睡吧，他闭上了眼睛。\n  敲门声停止了。\n  静默又回归了寝室。\n  突然，仿佛要把门撞碎一样，疯狂的敲门声刺入耳膜！\n  “扣扣扣扣扣扣！！！！！！”\n  下铺传来了缓慢的窸窸窣窣的脚步声。\n  是谁出去了？可是先听到开门声再听到脚步声，那是有人进来了？是梁鸿吗？\n  陈献摸到裤兜里的那个小凸起，手脚冰凉。\n  一声凄厉的婴儿哭声在寝室内响起，近在咫尺，带着一种在孕妇羊水里的稠密。\n  “呜哇……呜哇……”\n  没关系的……今晚死的人是孙晗……只要他一直保持这样的状态……\n  又没有动静了，无论是敲门声，婴儿啼哭声还是脚步声，都消失了。\n  剧烈的尿意盈满了陈献的膀胱。\n  他竭力控制着自己的括约肌，甚至在想，要不直接就尿在床上得了……\n  死魂纸数量：-2（如果在剧本结束后，死魂纸数量小于-20张，则判定死亡）\n  看来必须要走剧情了，陈献赶紧睁开眼睛坐起了身子，四周一片漆黑，伸手不见五指。\n  过段时间后，他的眼睛适应了黑暗，稍微能看清一些东西了。\n  他看向孙晗那边，那儿的被子里有个背对着他的人形，看不出死活。\n  既然要发现他的死亡，只能下去了，再找个借口叫一下孙晗。\n  陈献小心翼翼地踩着梯子下去，结果突然看到梁鸿坐在凳子上背对着他，捧着个电脑，里面放着影像。\n  这是剧本没有的内容。\n  “……梁鸿？你不睡觉在这里干什么？”\n  梁鸿没有理他，只见他的电脑里放着一个宿舍的影像，里面居然出现了陈献！\n  影像高糊，还是黑白的，但陈献还是认出了自己。\n  在影像里，陈献被尿意憋醒下了梯子，然后看到了抱着电脑的梁鸿，接着梁鸿转过头来，由于拍摄角度原因，陈献看不到影像里的梁鸿转头后的面目，但是影像里的陈献竟然无比惊骇地尖叫一声，七窍流血地倒在了地上，肠子内脏流了一地！\n  冷汗顺着陈献的脸
                `
            }
        }
    }

跳转章节

    <yingbing-ReadPage ref="page" style="height: 100vh;" @loadmore="onLoadmore"></yingbing-ReadPage>
    <button @tap="changeChapter">跳转章节</button>

    export default {
        onReady () {
            let contents = [{
                chapter: 1,//章节序号
                content: this.getContent(1),//文本内容
                title: '第一章',//章节标题
                isStart: false,//是否是第一章节
                isEnd: false,//是否是最后一个章节
            }]
            const { page } = this.$refs;
            page.init({
                contents: contents,
                currentChapter: 1,//从第二章节开始阅读 和章节chapter对应
                start: 0//从章节的第100个字开始阅读
            })
        },
        methods: {
            getContent (chapter = 1) {
                return `第${chapter}章
                  灼烫或红中发黑的文字是必须执行的剧情，否则只有死路一条。\n  作为可以交易鬼物的死魂纸，可以根据该人探知真相进度的贡献度来获得，而篡改关键性剧情，会没收一定数量的死魂纸。\n  但这并不代表扮演者要完全忠诚地按照剧本说的去做，若果真如此，也只有死这一条路可走！相反，往往需要扮演者打破剧本中固有的剧情，才能够赢得一丝生机！\n  页面上浮现了一行血字：\n  【是否打开鬼物商城？】\n  是。\n  陈献的眼前出现了一个黑色的页面，边框熊熊燃烧着地狱之火，炙人眼球。\n  大概二十多个鬼物被挂在页面上，几乎都是动辄需要一两千张死魂纸的鬼物。\n  目前陈献的100张死魂纸，只够购买一个叫【死亡人眼】的鬼物。\n  【死亡人眼】：共可使用三次，已被使用两次，剩余可击退一次轻级诅咒鬼魂的攻击，对中级诅咒鬼魂有轻微抑制性作用，对高级和顶级诅咒鬼魂无用。卖家：盲人女孩扮演者凌小薇。（在《猫脸老太太》恐怖剧本中可获得）\n  页面的血字发生了改变。\n  【是否使用二十张死魂纸刷新页面？】\n  现在这个页面他能勉强买的起的就只有一个【死亡人眼】，再用20张死魂纸刷新，恐怕一个也买不了。\n  陈献当机立断，购买了【死亡人眼】\n  【鬼物：死亡人眼\n  死魂纸数量：0】\n  交易的瞬间，他的手心出现了一种圆润滑腻的触感，带着股若有若无的腥臊味。\n  陈献打开手心一看，里面有一只玻璃球大小的眼球，上眼皮黏连在上面，很像荔枝，而眼球的瞳仁正对着他。\n  一种悚然的感觉入骨，他放入了裤兜里。\n  陈献目前考虑的是，既然鬼物是抵抗鬼魂的唯一手段，那么他就需要更多的死魂纸来购买鬼物。\n  还有就是，待会儿发现孙晗死亡的是他，他要不要稍微改变一下剧情？比如说，叫上男主角梁鸿一起去发现死亡的孙晗？\n  不过，现在无论他怎么想都是无用的，要看到时的情况，总之，他想要主动地去探索这个恐怖剧本背后的真相，来获得死魂纸，从而囤积作为保命手段的鬼物。\n  时间在一点一点的过去，轻微的鼾声逐渐响起，陈献却全然不同，一想到接下来要发生的事情，他就无法睡眠。\n  好冷……比之前更冷了……\n  每呼吸一次，都好像吸了一口碎冰渣似的，喉咙都被扎得生疼。\n  陈献缩了缩身体，将自己裹得更紧些，虽然这并不能让他暖和哪怕一点。\n  困意汹涌地袭来，眼皮像被重物压上一样越来越重，陈献慢慢失去意识，睡了过去……\n  “吱——嘎——！”\n  陈献睁开双眼，巨大的声响仿佛平地一声惊雷，将他猛然惊醒！\n  旧蓝色的宿舍门竟然开了一道缝隙！\n  黑黢黢的缝隙后好像隐藏了一只细长的眼睛，让陈献越看越心慌，如果他没记错，门本来是锁着的。\n  外面不知何时下起了雨，打着窗棂发出“啪啪”的脆响。\n  “扣………扣…………扣……”\n  门被从外面敲击着，敲击声速度很慢，好像一个八十老妪在用苍老的手指一下一下敲着。\n  “扣……扣…扣”\n  敲击的速度明显加快了。\n  陈献犹豫着，想来想去，还是在上铺装睡吧，他闭上了眼睛。\n  敲门声停止了。\n  静默又回归了寝室。\n  突然，仿佛要把门撞碎一样，疯狂的敲门声刺入耳膜！\n  “扣扣扣扣扣扣！！！！！！”\n  下铺传来了缓慢的窸窸窣窣的脚步声。\n  是谁出去了？可是先听到开门声再听到脚步声，那是有人进来了？是梁鸿吗？\n  陈献摸到裤兜里的那个小凸起，手脚冰凉。\n  一声凄厉的婴儿哭声在寝室内响起，近在咫尺，带着一种在孕妇羊水里的稠密。\n  “呜哇……呜哇……”\n  没关系的……今晚死的人是孙晗……只要他一直保持这样的状态……\n  又没有动静了，无论是敲门声，婴儿啼哭声还是脚步声，都消失了。\n  剧烈的尿意盈满了陈献的膀胱。\n  他竭力控制着自己的括约肌，甚至在想，要不直接就尿在床上得了……\n  死魂纸数量：-2（如果在剧本结束后，死魂纸数量小于-20张，则判定死亡）\n  看来必须要走剧情了，陈献赶紧睁开眼睛坐起了身子，四周一片漆黑，伸手不见五指。\n  过段时间后，他的眼睛适应了黑暗，稍微能看清一些东西了。\n  他看向孙晗那边，那儿的被子里有个背对着他的人形，看不出死活。\n  既然要发现他的死亡，只能下去了，再找个借口叫一下孙晗。\n  陈献小心翼翼地踩着梯子下去，结果突然看到梁鸿坐在凳子上背对着他，捧着个电脑，里面放着影像。\n  这是剧本没有的内容。\n  “……梁鸿？你不睡觉在这里干什么？”\n  梁鸿没有理他，只见他的电脑里放着一个宿舍的影像，里面居然出现了陈献！\n  影像高糊，还是黑白的，但陈献还是认出了自己。\n  在影像里，陈献被尿意憋醒下了梯子，然后看到了抱着电脑的梁鸿，接着梁鸿转过头来，由于拍摄角度原因，陈献看不到影像里的梁鸿转头后的面目，但是影像里的陈献竟然无比惊骇地尖叫一声，七窍流血地倒在了地上，肠子内脏流了一地！\n  冷汗顺着陈献的脸
                `
            },
            changeChapter () {
                //模拟请求
                setTimeout(() => {
                    let contents = [{
                        chapter: 4,
                        custom: this.getContent(4),
                        title: '第四章',
                        isStart: false,
                        isEnd: false
                    }]
                    const { page } = this.$refs;
                    page.change({
                        contents: contents,//携带内容跳转
                        start: 0,
                        currentChapter: 4//从第四章节开始阅读（如果插件内还未获取到该章节则会触发loadmore事件）
                    })
                }, 500)
            },
            //当跳转章节时，插件内还未获取到需要跳转的章节内容时，会触发loadmore事件来获取该章节内容
            onLoadmore (chapter, callback) {
                //模拟请求
                setTimeout(() => {
                    let content = {
                        chapter: chapter,
                        custom: this.getContent(chapter),
                        title: '第' + chapter + '章',
                        isStart: chapter == 1,
                        isEnd: chapter == 7
                    }
                    callback('success', content)
                    // callback('fail');
                    // callback('timeout');
                }, 500)
            }
        }
    }

加载更多

    <yingbing-ReadPage ref="page" style="height: 100vh;" @loadmore="onLoadmore"></yingbing-ReadPage>

    export default {
        onReady () {
            let contents = [{
                chapter: 1,//章节序号
                content: this.getContent(1),//文本内容
                title: '第一章',//章节标题
                isStart: false,//是否是第一章节
                isEnd: false,//是否是最后一个章节
            }]
            const { page } = this.$refs;
            page.init({
                contents: contents,
                currentChapter: 1,//从第二章节开始阅读 和章节chapter对应
                start: 100//从章节的第100个字开始阅读
            })
        },
        methods: {
            getContent (chapter = 1) {
                return `第${chapter}章
                  灼烫或红中发黑的文字是必须执行的剧情，否则只有死路一条。\n  作为可以交易鬼物的死魂纸，可以根据该人探知真相进度的贡献度来获得，而篡改关键性剧情，会没收一定数量的死魂纸。\n  但这并不代表扮演者要完全忠诚地按照剧本说的去做，若果真如此，也只有死这一条路可走！相反，往往需要扮演者打破剧本中固有的剧情，才能够赢得一丝生机！\n  页面上浮现了一行血字：\n  【是否打开鬼物商城？】\n  是。\n  陈献的眼前出现了一个黑色的页面，边框熊熊燃烧着地狱之火，炙人眼球。\n  大概二十多个鬼物被挂在页面上，几乎都是动辄需要一两千张死魂纸的鬼物。\n  目前陈献的100张死魂纸，只够购买一个叫【死亡人眼】的鬼物。\n  【死亡人眼】：共可使用三次，已被使用两次，剩余可击退一次轻级诅咒鬼魂的攻击，对中级诅咒鬼魂有轻微抑制性作用，对高级和顶级诅咒鬼魂无用。卖家：盲人女孩扮演者凌小薇。（在《猫脸老太太》恐怖剧本中可获得）\n  页面的血字发生了改变。\n  【是否使用二十张死魂纸刷新页面？】\n  现在这个页面他能勉强买的起的就只有一个【死亡人眼】，再用20张死魂纸刷新，恐怕一个也买不了。\n  陈献当机立断，购买了【死亡人眼】\n  【鬼物：死亡人眼\n  死魂纸数量：0】\n  交易的瞬间，他的手心出现了一种圆润滑腻的触感，带着股若有若无的腥臊味。\n  陈献打开手心一看，里面有一只玻璃球大小的眼球，上眼皮黏连在上面，很像荔枝，而眼球的瞳仁正对着他。\n  一种悚然的感觉入骨，他放入了裤兜里。\n  陈献目前考虑的是，既然鬼物是抵抗鬼魂的唯一手段，那么他就需要更多的死魂纸来购买鬼物。\n  还有就是，待会儿发现孙晗死亡的是他，他要不要稍微改变一下剧情？比如说，叫上男主角梁鸿一起去发现死亡的孙晗？\n  不过，现在无论他怎么想都是无用的，要看到时的情况，总之，他想要主动地去探索这个恐怖剧本背后的真相，来获得死魂纸，从而囤积作为保命手段的鬼物。\n  时间在一点一点的过去，轻微的鼾声逐渐响起，陈献却全然不同，一想到接下来要发生的事情，他就无法睡眠。\n  好冷……比之前更冷了……\n  每呼吸一次，都好像吸了一口碎冰渣似的，喉咙都被扎得生疼。\n  陈献缩了缩身体，将自己裹得更紧些，虽然这并不能让他暖和哪怕一点。\n  困意汹涌地袭来，眼皮像被重物压上一样越来越重，陈献慢慢失去意识，睡了过去……\n  “吱——嘎——！”\n  陈献睁开双眼，巨大的声响仿佛平地一声惊雷，将他猛然惊醒！\n  旧蓝色的宿舍门竟然开了一道缝隙！\n  黑黢黢的缝隙后好像隐藏了一只细长的眼睛，让陈献越看越心慌，如果他没记错，门本来是锁着的。\n  外面不知何时下起了雨，打着窗棂发出“啪啪”的脆响。\n  “扣………扣…………扣……”\n  门被从外面敲击着，敲击声速度很慢，好像一个八十老妪在用苍老的手指一下一下敲着。\n  “扣……扣…扣”\n  敲击的速度明显加快了。\n  陈献犹豫着，想来想去，还是在上铺装睡吧，他闭上了眼睛。\n  敲门声停止了。\n  静默又回归了寝室。\n  突然，仿佛要把门撞碎一样，疯狂的敲门声刺入耳膜！\n  “扣扣扣扣扣扣！！！！！！”\n  下铺传来了缓慢的窸窸窣窣的脚步声。\n  是谁出去了？可是先听到开门声再听到脚步声，那是有人进来了？是梁鸿吗？\n  陈献摸到裤兜里的那个小凸起，手脚冰凉。\n  一声凄厉的婴儿哭声在寝室内响起，近在咫尺，带着一种在孕妇羊水里的稠密。\n  “呜哇……呜哇……”\n  没关系的……今晚死的人是孙晗……只要他一直保持这样的状态……\n  又没有动静了，无论是敲门声，婴儿啼哭声还是脚步声，都消失了。\n  剧烈的尿意盈满了陈献的膀胱。\n  他竭力控制着自己的括约肌，甚至在想，要不直接就尿在床上得了……\n  死魂纸数量：-2（如果在剧本结束后，死魂纸数量小于-20张，则判定死亡）\n  看来必须要走剧情了，陈献赶紧睁开眼睛坐起了身子，四周一片漆黑，伸手不见五指。\n  过段时间后，他的眼睛适应了黑暗，稍微能看清一些东西了。\n  他看向孙晗那边，那儿的被子里有个背对着他的人形，看不出死活。\n  既然要发现他的死亡，只能下去了，再找个借口叫一下孙晗。\n  陈献小心翼翼地踩着梯子下去，结果突然看到梁鸿坐在凳子上背对着他，捧着个电脑，里面放着影像。\n  这是剧本没有的内容。\n  “……梁鸿？你不睡觉在这里干什么？”\n  梁鸿没有理他，只见他的电脑里放着一个宿舍的影像，里面居然出现了陈献！\n  影像高糊，还是黑白的，但陈献还是认出了自己。\n  在影像里，陈献被尿意憋醒下了梯子，然后看到了抱着电脑的梁鸿，接着梁鸿转过头来，由于拍摄角度原因，陈献看不到影像里的梁鸿转头后的面目，但是影像里的陈献竟然无比惊骇地尖叫一声，七窍流血地倒在了地上，肠子内脏流了一地！\n  冷汗顺着陈献的脸
                `
            },
            onLoadmore (chapter, callback) {
                //模拟请求
                setTimeout(() => {
                    let content = {
                        chapter: chapter,
                        custom: this.getContent(chapter),
                        title: '第' + chapter + '章',
                        isStart: chapter == 1,
                        isEnd: chapter == 7
                    }
                    callback('success', content)
                    // callback('fail');
                    // callback('timeout');
                }, 500)
            }
        }
    }

预加载 （预加载不会去渲染页面，不能取代loadmore事件）

    <!-- 开启预加载 -->
    <yingbing-ReadPage ref="page" style="height: 100vh;" enablePreload @preload="onPreload"></yingbing-ReadPage>

    export default {
        onReady () {
            let contents = [{
                chapter: 1,//章节序号
                content: this.getContent(1),//文本内容
                title: '第一章',//章节标题
                isStart: false,//是否是第一章节
                isEnd: false,//是否是最后一个章节
            }]
            const { page } = this.$refs;
            page.init({
                contents: contents,
                currentChapter: 1,//从第二章节开始阅读 和章节chapter对应
                start: 100//从章节的第100个字开始阅读
            })
        },
        methods: {
            getContent (chapter = 1) {
                return `第${chapter}章
                  灼烫或红中发黑的文字是必须执行的剧情，否则只有死路一条。\n  作为可以交易鬼物的死魂纸，可以根据该人探知真相进度的贡献度来获得，而篡改关键性剧情，会没收一定数量的死魂纸。\n  但这并不代表扮演者要完全忠诚地按照剧本说的去做，若果真如此，也只有死这一条路可走！相反，往往需要扮演者打破剧本中固有的剧情，才能够赢得一丝生机！\n  页面上浮现了一行血字：\n  【是否打开鬼物商城？】\n  是。\n  陈献的眼前出现了一个黑色的页面，边框熊熊燃烧着地狱之火，炙人眼球。\n  大概二十多个鬼物被挂在页面上，几乎都是动辄需要一两千张死魂纸的鬼物。\n  目前陈献的100张死魂纸，只够购买一个叫【死亡人眼】的鬼物。\n  【死亡人眼】：共可使用三次，已被使用两次，剩余可击退一次轻级诅咒鬼魂的攻击，对中级诅咒鬼魂有轻微抑制性作用，对高级和顶级诅咒鬼魂无用。卖家：盲人女孩扮演者凌小薇。（在《猫脸老太太》恐怖剧本中可获得）\n  页面的血字发生了改变。\n  【是否使用二十张死魂纸刷新页面？】\n  现在这个页面他能勉强买的起的就只有一个【死亡人眼】，再用20张死魂纸刷新，恐怕一个也买不了。\n  陈献当机立断，购买了【死亡人眼】\n  【鬼物：死亡人眼\n  死魂纸数量：0】\n  交易的瞬间，他的手心出现了一种圆润滑腻的触感，带着股若有若无的腥臊味。\n  陈献打开手心一看，里面有一只玻璃球大小的眼球，上眼皮黏连在上面，很像荔枝，而眼球的瞳仁正对着他。\n  一种悚然的感觉入骨，他放入了裤兜里。\n  陈献目前考虑的是，既然鬼物是抵抗鬼魂的唯一手段，那么他就需要更多的死魂纸来购买鬼物。\n  还有就是，待会儿发现孙晗死亡的是他，他要不要稍微改变一下剧情？比如说，叫上男主角梁鸿一起去发现死亡的孙晗？\n  不过，现在无论他怎么想都是无用的，要看到时的情况，总之，他想要主动地去探索这个恐怖剧本背后的真相，来获得死魂纸，从而囤积作为保命手段的鬼物。\n  时间在一点一点的过去，轻微的鼾声逐渐响起，陈献却全然不同，一想到接下来要发生的事情，他就无法睡眠。\n  好冷……比之前更冷了……\n  每呼吸一次，都好像吸了一口碎冰渣似的，喉咙都被扎得生疼。\n  陈献缩了缩身体，将自己裹得更紧些，虽然这并不能让他暖和哪怕一点。\n  困意汹涌地袭来，眼皮像被重物压上一样越来越重，陈献慢慢失去意识，睡了过去……\n  “吱——嘎——！”\n  陈献睁开双眼，巨大的声响仿佛平地一声惊雷，将他猛然惊醒！\n  旧蓝色的宿舍门竟然开了一道缝隙！\n  黑黢黢的缝隙后好像隐藏了一只细长的眼睛，让陈献越看越心慌，如果他没记错，门本来是锁着的。\n  外面不知何时下起了雨，打着窗棂发出“啪啪”的脆响。\n  “扣………扣…………扣……”\n  门被从外面敲击着，敲击声速度很慢，好像一个八十老妪在用苍老的手指一下一下敲着。\n  “扣……扣…扣”\n  敲击的速度明显加快了。\n  陈献犹豫着，想来想去，还是在上铺装睡吧，他闭上了眼睛。\n  敲门声停止了。\n  静默又回归了寝室。\n  突然，仿佛要把门撞碎一样，疯狂的敲门声刺入耳膜！\n  “扣扣扣扣扣扣！！！！！！”\n  下铺传来了缓慢的窸窸窣窣的脚步声。\n  是谁出去了？可是先听到开门声再听到脚步声，那是有人进来了？是梁鸿吗？\n  陈献摸到裤兜里的那个小凸起，手脚冰凉。\n  一声凄厉的婴儿哭声在寝室内响起，近在咫尺，带着一种在孕妇羊水里的稠密。\n  “呜哇……呜哇……”\n  没关系的……今晚死的人是孙晗……只要他一直保持这样的状态……\n  又没有动静了，无论是敲门声，婴儿啼哭声还是脚步声，都消失了。\n  剧烈的尿意盈满了陈献的膀胱。\n  他竭力控制着自己的括约肌，甚至在想，要不直接就尿在床上得了……\n  死魂纸数量：-2（如果在剧本结束后，死魂纸数量小于-20张，则判定死亡）\n  看来必须要走剧情了，陈献赶紧睁开眼睛坐起了身子，四周一片漆黑，伸手不见五指。\n  过段时间后，他的眼睛适应了黑暗，稍微能看清一些东西了。\n  他看向孙晗那边，那儿的被子里有个背对着他的人形，看不出死活。\n  既然要发现他的死亡，只能下去了，再找个借口叫一下孙晗。\n  陈献小心翼翼地踩着梯子下去，结果突然看到梁鸿坐在凳子上背对着他，捧着个电脑，里面放着影像。\n  这是剧本没有的内容。\n  “……梁鸿？你不睡觉在这里干什么？”\n  梁鸿没有理他，只见他的电脑里放着一个宿舍的影像，里面居然出现了陈献！\n  影像高糊，还是黑白的，但陈献还是认出了自己。\n  在影像里，陈献被尿意憋醒下了梯子，然后看到了抱着电脑的梁鸿，接着梁鸿转过头来，由于拍摄角度原因，陈献看不到影像里的梁鸿转头后的面目，但是影像里的陈献竟然无比惊骇地尖叫一声，七窍流血地倒在了地上，肠子内脏流了一地！\n  冷汗顺着陈献的脸
                `
            },
            onPreload (chapters, callback) {
                //模拟请求
                setTimeout(() => {
                   let contents = []
                   for ( let i in chapters ) {
                       contents.push({
                           chapter: chapters[i],
                           start: 0,
                           content: this.getContent(chapters[i]),
                           title: '第' + chapters[i] + '章',
                           isStart: chapters[i] == 1,
                           isEnd: chapters[i] == 7
                       })
                   }
                   callback('success', contents);
                   // callback('fail');
                   // callback('timeout');
                }, 500)
            }
        }
    }

获取当前页信息

    <yingbing-ReadPage style="height: 100vh;" @change="onCurrentChange"></yingbing-ReadPage>

    export default {
        methods: {
            onCurrentChange (pageInfo) {
                console.log(pageInfo)//当前页信息
            }
        }
    }

开启点击区域（用于唤起设置菜单等）

    <yingbing-ReadPage ref="page" style="height: 100vh;" :clickOption="clickOption" enableClick @clickTo="onClickTo"></yingbing-ReadPage>
    <view v-if="menuShow">设置菜单</view>

    export default {
        data () {
            return {
                menuShow: false,
                //点击事件位置设置
                clickOption: {
                    width: uni.upx2px(200),
                    height: uni.upx2px(200),
                    left: 'auto',
                    top: 'auto'
                }
            }
        },
        methods: {
            onClickTo () {
                this.menuShow = true
            }
        }
    }

JS控制翻页

    <yingbing-ReadPage ref="page" style="height: 100vh;"></yingbing-ReadPage>
    <button @tap="pagePrev">向前翻页</button>
    <button @tap="pageNext">向后翻页</button>

    export default {
        methods: {
            pageNext () {
                //滚动模式下表现为向下滚动一小段距离
                this.$refs.page.pageNext()
            },
            pagePrev () {
                //滚动模式下表现为向上滚动一小段距离
                this.$refs.page.pagePrev()
            }
        }
    }

自动翻页

    <!-- 开启自动翻页 -->
    <yingbing-ReadPage ref="page" style="height: 100vh;" autoplay></yingbing-ReadPage>

    export default {
        onReady () {
            let contents = [{
                chapter: 1,//章节序号
                content: this.getContent(1),//文本内容
                title: '第一章',//章节标题
                isStart: false,//是否是第一章节
                isEnd: false,//是否是最后一个章节
            }]
            const { page } = this.$refs;
            page.init({
                contents: contents,
                currentChapter: 1,//从第二章节开始阅读 和章节chapter对应
                start: 100//从章节的第100个字开始阅读
            })
        },
        methods: {
            getContent (chapter = 1) {
                return `第${chapter}章
                  灼烫或红中发黑的文字是必须执行的剧情，否则只有死路一条。\n  作为可以交易鬼物的死魂纸，可以根据该人探知真相进度的贡献度来获得，而篡改关键性剧情，会没收一定数量的死魂纸。\n  但这并不代表扮演者要完全忠诚地按照剧本说的去做，若果真如此，也只有死这一条路可走！相反，往往需要扮演者打破剧本中固有的剧情，才能够赢得一丝生机！\n  页面上浮现了一行血字：\n  【是否打开鬼物商城？】\n  是。\n  陈献的眼前出现了一个黑色的页面，边框熊熊燃烧着地狱之火，炙人眼球。\n  大概二十多个鬼物被挂在页面上，几乎都是动辄需要一两千张死魂纸的鬼物。\n  目前陈献的100张死魂纸，只够购买一个叫【死亡人眼】的鬼物。\n  【死亡人眼】：共可使用三次，已被使用两次，剩余可击退一次轻级诅咒鬼魂的攻击，对中级诅咒鬼魂有轻微抑制性作用，对高级和顶级诅咒鬼魂无用。卖家：盲人女孩扮演者凌小薇。（在《猫脸老太太》恐怖剧本中可获得）\n  页面的血字发生了改变。\n  【是否使用二十张死魂纸刷新页面？】\n  现在这个页面他能勉强买的起的就只有一个【死亡人眼】，再用20张死魂纸刷新，恐怕一个也买不了。\n  陈献当机立断，购买了【死亡人眼】\n  【鬼物：死亡人眼\n  死魂纸数量：0】\n  交易的瞬间，他的手心出现了一种圆润滑腻的触感，带着股若有若无的腥臊味。\n  陈献打开手心一看，里面有一只玻璃球大小的眼球，上眼皮黏连在上面，很像荔枝，而眼球的瞳仁正对着他。\n  一种悚然的感觉入骨，他放入了裤兜里。\n  陈献目前考虑的是，既然鬼物是抵抗鬼魂的唯一手段，那么他就需要更多的死魂纸来购买鬼物。\n  还有就是，待会儿发现孙晗死亡的是他，他要不要稍微改变一下剧情？比如说，叫上男主角梁鸿一起去发现死亡的孙晗？\n  不过，现在无论他怎么想都是无用的，要看到时的情况，总之，他想要主动地去探索这个恐怖剧本背后的真相，来获得死魂纸，从而囤积作为保命手段的鬼物。\n  时间在一点一点的过去，轻微的鼾声逐渐响起，陈献却全然不同，一想到接下来要发生的事情，他就无法睡眠。\n  好冷……比之前更冷了……\n  每呼吸一次，都好像吸了一口碎冰渣似的，喉咙都被扎得生疼。\n  陈献缩了缩身体，将自己裹得更紧些，虽然这并不能让他暖和哪怕一点。\n  困意汹涌地袭来，眼皮像被重物压上一样越来越重，陈献慢慢失去意识，睡了过去……\n  “吱——嘎——！”\n  陈献睁开双眼，巨大的声响仿佛平地一声惊雷，将他猛然惊醒！\n  旧蓝色的宿舍门竟然开了一道缝隙！\n  黑黢黢的缝隙后好像隐藏了一只细长的眼睛，让陈献越看越心慌，如果他没记错，门本来是锁着的。\n  外面不知何时下起了雨，打着窗棂发出“啪啪”的脆响。\n  “扣………扣…………扣……”\n  门被从外面敲击着，敲击声速度很慢，好像一个八十老妪在用苍老的手指一下一下敲着。\n  “扣……扣…扣”\n  敲击的速度明显加快了。\n  陈献犹豫着，想来想去，还是在上铺装睡吧，他闭上了眼睛。\n  敲门声停止了。\n  静默又回归了寝室。\n  突然，仿佛要把门撞碎一样，疯狂的敲门声刺入耳膜！\n  “扣扣扣扣扣扣！！！！！！”\n  下铺传来了缓慢的窸窸窣窣的脚步声。\n  是谁出去了？可是先听到开门声再听到脚步声，那是有人进来了？是梁鸿吗？\n  陈献摸到裤兜里的那个小凸起，手脚冰凉。\n  一声凄厉的婴儿哭声在寝室内响起，近在咫尺，带着一种在孕妇羊水里的稠密。\n  “呜哇……呜哇……”\n  没关系的……今晚死的人是孙晗……只要他一直保持这样的状态……\n  又没有动静了，无论是敲门声，婴儿啼哭声还是脚步声，都消失了。\n  剧烈的尿意盈满了陈献的膀胱。\n  他竭力控制着自己的括约肌，甚至在想，要不直接就尿在床上得了……\n  死魂纸数量：-2（如果在剧本结束后，死魂纸数量小于-20张，则判定死亡）\n  看来必须要走剧情了，陈献赶紧睁开眼睛坐起了身子，四周一片漆黑，伸手不见五指。\n  过段时间后，他的眼睛适应了黑暗，稍微能看清一些东西了。\n  他看向孙晗那边，那儿的被子里有个背对着他的人形，看不出死活。\n  既然要发现他的死亡，只能下去了，再找个借口叫一下孙晗。\n  陈献小心翼翼地踩着梯子下去，结果突然看到梁鸿坐在凳子上背对着他，捧着个电脑，里面放着影像。\n  这是剧本没有的内容。\n  “……梁鸿？你不睡觉在这里干什么？”\n  梁鸿没有理他，只见他的电脑里放着一个宿舍的影像，里面居然出现了陈献！\n  影像高糊，还是黑白的，但陈献还是认出了自己。\n  在影像里，陈献被尿意憋醒下了梯子，然后看到了抱着电脑的梁鸿，接着梁鸿转过头来，由于拍摄角度原因，陈献看不到影像里的梁鸿转头后的面目，但是影像里的陈献竟然无比惊骇地尖叫一声，七窍流血地倒在了地上，肠子内脏流了一地！\n  冷汗顺着陈献的脸
                `
            }
        }
    }

设置翻页

    <yingbing-ReadPage ref="page" :pageType="pageType" style="height: 100vh;"></yingbing-ReadPage>
    <button @tap="changePageType('real')">仿真翻页</button>
    <button @tap="changePageType('cover')">覆盖翻页</button>
    <button @tap="changePageType('none')">无翻页效果</button>
    <button @tap="changePageType('scroll')">滚动</button>

    export default {
        data () {
            return {
                pageType: 'cover'
            }
        },
        methods: {
            changePageType (type) {
                this.pageType = type
            }
        }
    }

单独定义某些字符的宽度

    <yingbing-ReadPage ref="page" :charSize="charSize" style="height: 100vh;"></yingbing-ReadPage>

    export default {
        data () {
            return {
                charSize: [{
                    text: 'a',
                    size: 5
                },{
                    text: '⭕●',
                    size: 5
                }]
            }
        }
    }

设置英文书籍

    <!-- split用于定义英文单词的分隔符，常见英文单词分割符为空格，所以直接填入空格即可 -->
    <yingbing-ReadPage ref="page" split=" " style="height: 100vh;"></yingbing-ReadPage>

    export default {
        onReady () {
            let contents = [{
                chapter: 1,//章节序号
                content: 'Weirdly, Beckey had reached back behind her head for the clip. The last thing her mother had touched before leaving the house. Beckey had opened the jaws.',//文本内容
                title: '第一章',//章节标题
                isStart: false,//是否是第一章节
                isEnd: false,//是否是最后一个章节
            }]
            const { page } = this.$refs;
            page.init({
                contents: contents,
                currentChapter: 1,
                start: 0
            })
        }
    }

设置自定义字体

    <yingbing-ReadPage ref="page" :fontFamily="fontFamily" :fontFace="fontFace" style="height: 100vh;"></yingbing-ReadPage>
    <button @tap="changeFontFamily">切换字体</button>

• 切换字体

  export default {
      data () {
          return {
              fontFamily: 'customfontfamily'
          }
      },
      methods: {
          changeFontFamily () {
              this.fontFamily = this.fontFamily == 'customfontfamily' ? 'customfontfamily2' : 'customfontfamily'
          }
      }
  }

• 加载本地字体文件路径（仅支持H5和APP-VUE）

  export default {
      data () {
          return {
              // #ifdef APP-VUE || H5
              fontFace: [{
                  fontFamily: 'customfontfamily',//字体名称
                  src: './static/font.ttf'//本地字体文件路径
              },{
                  fontFamily: 'customfontfamily2',//字体名称
                  src: './static/font2.ttf'//本地字体文件路径
              }]//第三方字体
              // #endif
          }
      }
  }

• 加载网络字体文件路径 (微信小程序只支持https，h5不能跨域)

  export default {
      data () {
          return {
              fontFace: [{
                  fontFamily: 'customfontfamily',//字体名称
                  src: 'https://www.test.com/static/font.ttf'//网络字体文件路径
              }]//第三方字体
          }
      }
  }

• 加载base64字体 (全端支持)

  export default {
      data () {
          return {
              fontFace: [{
                  fontFamily: 'customfontfamily',//字体名称
                  src: 'data:application/octet-stream;base64,AAEAAAAKAIAAA......'//将ttf文件转为base64
              }]//第三方字体
          }
      }
  }

整书模式

    <!-- 开启整书模式 传入一整本小说 -->
    <yingbing-ReadPage noChapter @setCatalog="setCatalog" ref="page" style="height: 100vh;"></yingbing-ReadPage>
    <button @tap="changeChapter">跳转第二章节</button>

    export default {
        data () {
            catalog: []
        },
        onReady () {
            let content = this.getContent(1) + this.getContent(2) + this.getContent(3)
            page.init({
                content: content,
                title: '测试小说',
                currentChapter: 2,
                start: 0
            })
        },
        methods: {
            getContent (chapter = 1) {
                return `第${chapter}章
                  灼烫或红中发黑的文字是必须执行的剧情，否则只有死路一条。\n  作为可以交易鬼物的死魂纸，可以根据该人探知真相进度的贡献度来获得，而篡改关键性剧情，会没收一定数量的死魂纸。\n  但这并不代表扮演者要完全忠诚地按照剧本说的去做，若果真如此，也只有死这一条路可走！相反，往往需要扮演者打破剧本中固有的剧情，才能够赢得一丝生机！\n  页面上浮现了一行血字：\n  【是否打开鬼物商城？】\n  是。\n  陈献的眼前出现了一个黑色的页面，边框熊熊燃烧着地狱之火，炙人眼球。\n  大概二十多个鬼物被挂在页面上，几乎都是动辄需要一两千张死魂纸的鬼物。\n  目前陈献的100张死魂纸，只够购买一个叫【死亡人眼】的鬼物。\n  【死亡人眼】：共可使用三次，已被使用两次，剩余可击退一次轻级诅咒鬼魂的攻击，对中级诅咒鬼魂有轻微抑制性作用，对高级和顶级诅咒鬼魂无用。卖家：盲人女孩扮演者凌小薇。（在《猫脸老太太》恐怖剧本中可获得）\n  页面的血字发生了改变。\n  【是否使用二十张死魂纸刷新页面？】\n  现在这个页面他能勉强买的起的就只有一个【死亡人眼】，再用20张死魂纸刷新，恐怕一个也买不了。\n  陈献当机立断，购买了【死亡人眼】\n  【鬼物：死亡人眼\n  死魂纸数量：0】\n  交易的瞬间，他的手心出现了一种圆润滑腻的触感，带着股若有若无的腥臊味。\n  陈献打开手心一看，里面有一只玻璃球大小的眼球，上眼皮黏连在上面，很像荔枝，而眼球的瞳仁正对着他。\n  一种悚然的感觉入骨，他放入了裤兜里。\n  陈献目前考虑的是，既然鬼物是抵抗鬼魂的唯一手段，那么他就需要更多的死魂纸来购买鬼物。\n  还有就是，待会儿发现孙晗死亡的是他，他要不要稍微改变一下剧情？比如说，叫上男主角梁鸿一起去发现死亡的孙晗？\n  不过，现在无论他怎么想都是无用的，要看到时的情况，总之，他想要主动地去探索这个恐怖剧本背后的真相，来获得死魂纸，从而囤积作为保命手段的鬼物。\n  时间在一点一点的过去，轻微的鼾声逐渐响起，陈献却全然不同，一想到接下来要发生的事情，他就无法睡眠。\n  好冷……比之前更冷了……\n  每呼吸一次，都好像吸了一口碎冰渣似的，喉咙都被扎得生疼。\n  陈献缩了缩身体，将自己裹得更紧些，虽然这并不能让他暖和哪怕一点。\n  困意汹涌地袭来，眼皮像被重物压上一样越来越重，陈献慢慢失去意识，睡了过去……\n  “吱——嘎——！”\n  陈献睁开双眼，巨大的声响仿佛平地一声惊雷，将他猛然惊醒！\n  旧蓝色的宿舍门竟然开了一道缝隙！\n  黑黢黢的缝隙后好像隐藏了一只细长的眼睛，让陈献越看越心慌，如果他没记错，门本来是锁着的。\n  外面不知何时下起了雨，打着窗棂发出“啪啪”的脆响。\n  “扣………扣…………扣……”\n  门被从外面敲击着，敲击声速度很慢，好像一个八十老妪在用苍老的手指一下一下敲着。\n  “扣……扣…扣”\n  敲击的速度明显加快了。\n  陈献犹豫着，想来想去，还是在上铺装睡吧，他闭上了眼睛。\n  敲门声停止了。\n  静默又回归了寝室。\n  突然，仿佛要把门撞碎一样，疯狂的敲门声刺入耳膜！\n  “扣扣扣扣扣扣！！！！！！”\n  下铺传来了缓慢的窸窸窣窣的脚步声。\n  是谁出去了？可是先听到开门声再听到脚步声，那是有人进来了？是梁鸿吗？\n  陈献摸到裤兜里的那个小凸起，手脚冰凉。\n  一声凄厉的婴儿哭声在寝室内响起，近在咫尺，带着一种在孕妇羊水里的稠密。\n  “呜哇……呜哇……”\n  没关系的……今晚死的人是孙晗……只要他一直保持这样的状态……\n  又没有动静了，无论是敲门声，婴儿啼哭声还是脚步声，都消失了。\n  剧烈的尿意盈满了陈献的膀胱。\n  他竭力控制着自己的括约肌，甚至在想，要不直接就尿在床上得了……\n  死魂纸数量：-2（如果在剧本结束后，死魂纸数量小于-20张，则判定死亡）\n  看来必须要走剧情了，陈献赶紧睁开眼睛坐起了身子，四周一片漆黑，伸手不见五指。\n  过段时间后，他的眼睛适应了黑暗，稍微能看清一些东西了。\n  他看向孙晗那边，那儿的被子里有个背对着他的人形，看不出死活。\n  既然要发现他的死亡，只能下去了，再找个借口叫一下孙晗。\n  陈献小心翼翼地踩着梯子下去，结果突然看到梁鸿坐在凳子上背对着他，捧着个电脑，里面放着影像。\n  这是剧本没有的内容。\n  “……梁鸿？你不睡觉在这里干什么？”\n  梁鸿没有理他，只见他的电脑里放着一个宿舍的影像，里面居然出现了陈献！\n  影像高糊，还是黑白的，但陈献还是认出了自己。\n  在影像里，陈献被尿意憋醒下了梯子，然后看到了抱着电脑的梁鸿，接着梁鸿转过头来，由于拍摄角度原因，陈献看不到影像里的梁鸿转头后的面目，但是影像里的陈献竟然无比惊骇地尖叫一声，七窍流血地倒在了地上，肠子内脏流了一地！\n  冷汗顺着陈献的脸
                `
            },
            //记录插件计算出的章节列表，后面的操作如跳转都以此章节列表为基础
            setCatalog (catalog) {
                this.catalog = catalog
            },
            changeChapter (chapter) {
                const { page } = this.$refs
                page.change({
                    currentChapter: 2,
                    start: 0
                })
            }
        }
    }

自定义页面

• 自定义页面可用于

  • 广告展示
  • 插图展示
  • 付费章节
  • ...

• 自定义页面只能放入章节最后展示

• 自定义页面有图片或者不定宽高的元素时，最好将高度定好，避免滚动模式下定位异常

• 自定义页面只能使用html的标签，不能使用uni-app的标签，不然app端会有问题

• 自定义页面的支持自定义点击事件有 APP-VUE 、H5、APP-NVUE

• 自定义页面在微信小程序 使用rich-text实现，所以部分html元素并不支持

• 如何添加自定义页面

  <yingbing-ReadPage ref="page" style="height:100vh"></yingbing-ReadPage>

  export default {
      onReady () {
          let contents = [{
              chapter: 1,
              content: '',//如果该章节只展示自定义页面，则文本内容可为空或不填,适用于付费章节展示
              custom: [
                  `<div>自定义页面第一页</div>`
                  `<div>自定义页面第二页</div>`
              ],//自定义页面
              title: '第一章',
              isStart: false,
              isEnd: false
          }]
          const { page } = this.$refs
          page.init({
              contents: contents,
              currentChapter: 1,
              start: 0
          })
      }
  }

• 如何添加带点击事件的自定义页面（微信小程序不支持）

  <yingbing-ReadPage ref="page" style="height:100vh" @clickme="clickme" @clickher="clickher"></yingbing-ReadPage>

  export default {
      onReady () {
          let contents = [{
              chapter: 1,
              content: '',//如果该章节只展示自定义页面，则文本内容可为空或不填,适用于付费章节展示
              custom: [
                  `<div onclick="clickme">自定义页面第一页</div>`
                  `<div onclick="clickher(123)">自定义页面第二页</div>`
              ],//自定义页面
              title: '第一章',
              isStart: false,
              isEnd: false
          }]
          const { page } = this.$refs
          page.init({
              contents: contents,
              currentChapter: 1,
              start: 0
          })
      },
      methods: {
          clickme () {
              console.log('点击了我')
          },
          clickher (arg) {
              console.log('点击了她', arg)
          }
      }
  }

自定义插槽 （如果想实现多平台，建议使用自定义插槽替代自定义页面）

• 对于自定义页面不支持的uni-app的组件，可以使用自定义插槽实现

• 自定义插槽的功能和自定义页面类似

• 如何添加自定义插槽（微信小程序不支持这种写法）

  <yingbing-ReadPage ref="page">
      <template #test>
          <text>测试插槽</text>
      </template>
  </yingbing-ReadPage>
  <yingbing-ReadPage ref="page">
      <!-- 作用域插槽（动态绑定插槽内容） -->
      <template v-slot:test={prop}>
          <text>测试插槽{{prop.chapter}}</text>
      </template>
  </yingbing-ReadPage>

  export default {
      onReady () {
          let contents = [{
              chapter: 1,
              custom: [
                  `slot:test`
              ],//自定义页面
              title: '第一章',
              isStart: false,
              isEnd: false,
          },{
              chapter: 2,
              custom: [
                  `slot:test`
              ],//自定义页面
              title: '第二章',
              isStart: false,
              isEnd: false,
          }]
          const { page } = this.$refs
          page.init({
              contents: contents,
              currentChapter: 1,
              start: 0
          })
      }
  }

• 如何添加自定义插槽（兼容多端）

  <yingbing-ReadPage ref="page">
      <!-- #ifndef APP-VUE -->
      <!-- APP-VUE不能够用遍历对象的属性来动态绑定插槽名称 -->
      <template v-for="(item, index) in contents" :slot="'test'+item.chapter">
          <text>测试插槽{{item.chapter}}</text>
      </template>
      <!-- #endif -->
      <!-- #ifdef APP-VUE -->
      <!-- APP-VUE只能够用index索引来动态绑定插槽名称 -->
      <template v-for="(item, index) in contents" :slot="'test'+(index+1)">
          <text>测试插槽{{item.chapter}}</text>
      </template>
      <!-- #endif -->
  </yingbing-ReadPage>

  export default {
      data () {
          return {
              contents: []
          }
      },
      onReady () {
          this.contents = [{
              chapter: 1,
              custom: [
                  `slot:test1`
              ],//自定义页面
              title: '第一章',
              isStart: false,
              isEnd: false,
          },{
              chapter: 2,
              custom: [
                  `slot:test2`
              ],//自定义页面
              title: '第二章',
              isStart: false,
              isEnd: false,
          }]
          const { page } = this.$refs
          page.init({
              contents: contents,
              currentChapter: 1,
              start: 0
          })
      }
  }