<template>
<view class="content"
:style="{fontSize: fontSize}"
@touchstart="handletouchstart"
@touchend="handletouchend">
<view class='read':style="[{transform: `translateX(${slidingDistance}px)`}]">{{content}}</view>
<view class="box">{{content}}</view>
</view>
</template>
<script>
export default {
name: "y-novel",
props: {
content: {
type: String,
default: ''
},
fontSize: {
type: String,
default: '30rpx'
}
},
data() {
return {
width: '',
slidingDistance: 0,
startClientX: 0,
currentPage: 0,
maxPage: 0,
}
},
watch: {
content(val) {
const query = uni.createSelectorQuery().in(this);
let height=0
this.$nextTick(()=>{
query.select('.read').boundingClientRect(data => {
height=data.height
this.width=data.width+data.left
}).select('.box').boundingClientRect(data => {
this.maxPage=Math.floor(data.height/height)
}).exec();
})
}
},
methods: {
handletouchstart(e) {
this.startClientX = e.changedTouches[0].clientX
},
handletouchend(e) {
let endClientX = e.changedTouches[0].clientX
let distance = endClientX - this.startClientX
if (distance > 80) {
if (this.currentPage > 0) {
this.currentPage--
this.slidingDistance += this.width
} else {
this.$emit('getUp')
}
}
if (distance < -80) {
if(this.currentPage<this.maxPage){
this.currentPage++
this.slidingDistance -= this.width
} else {
this.$emit('getNext')
}
}
}
}
}
</script>
<style scoped>
.content {
height: 100%;
padding: 40rpx;
box-sizing: border-box;
overflow: hidden;
}
.content .read {
height: 100%;
columns: calc(100vw - 32px) 1;
column-gap: 40rpx;
line-height: 40rpx;
transition: .5s;
transform: translateX(0rpx);
}
.content .box{
line-height: 40rpx;
opacity: 0;
}
</style>
使用列示
<template>
<view style="height: 100%;width: 100%;overflow: hidden">
<y-novel :content="content" @getUp="getUp" @getNext="getNext"></y-novel>
</view>
</template>
<script>
import YNovel from "@/components/y-novel/y-novel";
export default {
name: "novel",
components: {YNovel},
data() {
return {
content: '',
index1: ''
}
},
mounted() {
this.content = '';
this.content = '第一章 小先生和老先生\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\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';
},
methods: {
getUp() {
console.log('上一章')
},
getNext() {
console.log('下一章')
}
}
}
</script>
<style scoped>
page{
height: 100%;
overflow: hidden;
}
</style>
|