保证可用-保证可用-保证可用
正文
下文中引用的scrollTabs 可自行下载
<template>
<view >
<scrollTabs :tabs="dataList" :tabOptions="{label: 'name', activeColor: '#222', barColor:'#ff9f0f'}" :offsetTop="0"
:scrollTop="scrollTop" :sticky="true" :clickScroll="clickScroll"
@onChange="tabChange">
<view class="container-item" v-for="(item, index) in dataList" :class="'tabs'+index" >
<view v-if="index!==0" class="item-title" style="text-align: center;height: 40px; line-height: 40px;">
<text style=" color: #963a23;font-size: 20px;font-weight: 900;">{{item.name}}</text>
</view>
<view v-if="index==0" style="text-align: center;background: #f8efe0">
<view style="display: flex;justify-content: flex-end;height: 40px;align-items: center;margin-right: 10px">
<view :class="{'yyywww':!ywFlag,'yyywwwActiv':ywFlag}" @click="ywMe()">译</view>
</view>
<view style="height: 40rpx"></view>
<span v-html="item.total" v-if="!ywFlag"></span>
<span v-html="item.yw" v-if="ywFlag"></span>
<view style="height: 40rpx"></view>
</view>
<view v-if="index!==0" >
<view >
<view v-html="item.total"></view>
</view>
<!-- <sunui-grand :content="item.total" color="#1D82FE" bg="#f7f6f2" :clamp='10' expandText="展开全文" shinkText="收起"></sunui-grand>-->
</view>
</view>
</scrollTabs>
</view>
</template>
<script>
import scrollTabs from "@/components/scroll-tabs/scroll-tabs/scroll-tabs.vue"
export default {
components: {scrollTabs},
data() {
return {
poetryInfo: {},
ywFlag:false,
stickyTop: 0,
offsetTop: 0,
clickScroll: false,
statusBarHeight: 0,
scrollTop: 0,
id: null,
dataList: [
{
name: '正文',
total: '<span style="font-size: 20px;color: #6b6b6b;font-weight: 900;">代悲白头翁</span><br>[唐代] 刘希夷<br>' +
'<br>洛阳城东桃李花，飞来飞去落谁家？\n' +
'<br>洛阳女儿惜颜色，坐见落花长叹息。\n' +
'<br>今年花落颜色改，明年花开复谁在？\n' +
'<br>已见松柏摧为薪，更闻桑田变成海。\n' +
'<br>古人无复洛城东，今人还对落花风。\n' +
'<br>年年岁岁花相似，岁岁年年人不同。\n' +
'<br>寄言全盛红颜子，应怜半死白头翁。\n' +
'<br>此翁白头真可怜，伊昔红颜美少年。\n' +
'<br>公子王孙芳树下，清歌妙舞落花前。\n' +
'<br>光禄池台文锦绣，将军楼阁画神仙。\n' +
'<br>一朝卧病无相识，三春行乐在谁边？\n' +
'<br>宛转蛾眉能几时？须臾鹤发乱如丝。\n' +
'<br>但看古来歌舞地，惟有黄昏鸟雀悲。',
yw:'<span style="font-size: 20px;color: #6b6b6b;font-weight: 900;">代悲白头翁</span><br>[唐代] 刘希夷<br>' +
'<br>洛阳城东桃李花，飞来飞去落谁家？\n' +
'<br><span style="color: red">洛阳城东的桃花李花随风飘转，飞来飞去，不知落入了谁家？</span>\n' +
'<br><span style="color: black">洛阳女儿惜颜色，坐见落花长叹息。</span>\n' +
'<br><span style="color: red">洛阳城里亭亭玉立的女子，因为看见那飘零的桃花不禁发出感叹。</span>\n' +
'<br><span style="color: black">今年花落颜色改，明年花开复谁在？</span>\n' +
'<br><span style="color: red">今年我在这里看着桃花李花因凋零而颜色衰减，明年花开时节不知又有谁还能看见那繁花似锦的胜况？</span>\n' +
'<br><span style="color: black">已见松柏摧为薪，更闻桑田变成海。</span>\n' +
'<br><span style="color: red">已经看见了俊秀挺拔的松柏被摧残砍伐作为柴薪，又听说那桑田变成了汪洋大海。</span>\n' +
'<br><span style="color: black">古人无复洛城东，今人还对落花风。</span>\n' +
'<br><span style="color: red">古人现在已经不再悲叹洛阳城东凋零的桃李花了，而今人却依旧对着随风飘零的落花而伤怀。</span>\n' +
'<br><span style="color: black">年年岁岁花相似，岁岁年年人不同。</span>\n' +
'<br><span style="color: red">年年岁岁繁花依旧，岁岁年年看花之人却不相同。</span>\n' +
'<br><span style="color: black">寄言全盛红颜子，应怜半死白头翁。</span>\n' +
'<br><span style="color: red">转告那些正值青春年华的红颜少年，应该怜悯这位已是半死之人的白头老翁。</span>\n' +
'<br><span style="color: black">此翁白头真可怜，伊昔红颜美少年。</span>\n' +
'<br><span style="color: red">如今他白发苍苍，真是可怜，然而他从前亦是一位风流倜傥的红颜美少年。</span>\n' +
'<br><span style="color: black">公子王孙芳树下，清歌妙舞落花前。</span>\n' +
'<br><span style="color: red">这白头老翁当年曾与公子王孙寻欢作乐于芳树之下，吟赏清歌妙舞于落花之前。</span>\n' +
'<br><span style="color: black">光禄池台文锦绣，将军楼阁画神仙。</span>\n' +
'<br><span style="color: red">亦曾像东汉光禄勋马防那样以锦绣装饰池台，又如贵戚梁冀在府第楼阁中到处涂画云气神仙。</span>\n' +
'<br><span style="color: black">一朝卧病无相识，三春行乐在谁边？</span>\n' +
'<br><span style="color: red">白头老翁如今一朝卧病在床，便无人理睬，往昔的三春行乐、清歌妙舞如今又到哪里去了呢？</span>\n' +
'<br><span style="color: black">宛转蛾眉能几时？须臾鹤发乱如丝。</span>\n' +
'<br><span style="color: red">而美人的青春娇颜同样又能保持几时？须臾之间，已是鹤发蓬乱，雪白如丝了。</span>\n' +
'<br><span style="color: black">但看古来歌舞地，惟有黄昏鸟雀悲。</span>\n' +
'<br><span style="color: red">只见那古往今来的歌舞之地，剩下的只有黄昏的鸟雀在空自悲啼。</span>',
scroll_id: 'tabs0',
},
{
name: '译文及注释',
total: '<span style="font-size: 16px;font-weight: 900;">[译文]</span>' +'<br>'+
'洛阳城东的桃花李花随风飘转，飞来飞去，不知落入了谁家？\n' +
'洛阳城里亭亭玉立的女子，因为看见那飘零的桃花不禁发出感叹。\n' +
'今年我在这里看着桃花李花因凋零而颜色衰减，明年花开时节不知又有谁还能看见那繁花似锦的胜况？\n' +
'已经看见了俊秀挺拔的松柏被摧残砍伐作为柴薪，又听说那桑田变成了汪洋大海。\n' +
'古人现在已经不再悲叹洛阳城东凋零的桃李花了，而今人却依旧对着随风飘零的落花而伤怀。\n' +
'年年岁岁繁花依旧，岁岁年年看花之人却不相同。\n' +
'转告那些正值青春年华的红颜少年，应该怜悯这位已是半死之人的白头老翁。\n' +
'如今他白发苍苍，真是可怜，然而他从前亦是一位风流倜傥的红颜美少年。\n' +
'这白头老翁当年曾与公子王孙寻欢作乐于芳树之下，吟赏清歌妙舞于落花之前。\n' +
'亦曾像东汉光禄勋马防那样以锦绣装饰池台，又如贵戚梁冀在府第楼阁中到处涂画云气神仙。\n' +
'白头老翁如今一朝卧病在床，便无人理睬，往昔的三春行乐、清歌妙舞如今又到哪里去了呢？\n' +
'而美人的青春娇颜同样又能保持几时？须臾之间，已是鹤发蓬乱，雪白如丝了。\n' +
'只见那古往今来的歌舞之地，剩下的只有黄昏的鸟雀在空自悲啼。\n' +
'\n' +
'注释\n' +
'代：拟。白头翁：白发老人。这首诗的题目，各个选本都有不同。《唐音》《唐诗归》《唐诗品汇》《全唐诗》，均作“代悲白头翁”。《全唐诗》又作“代白头吟”。《文苑英华》《乐府诗集》《韵语阳秋》作“白头吟”。尤袤《全唐诗话》作“白头翁咏”。\n' +
'坐见：一作“行逢”。\n' +
'松柏摧为薪：松柏被砍伐作柴薪。《古诗十九首》：“古墓犁为田，松柏摧为薪。”\n' +
'桑田变成海：《神仙传》：“麻姑谓王方平曰：‘接待以来，已见东海三为桑田’”。\n' +
'“公子”两句：白头翁年轻时曾和公子王孙在树下花前共赏清歌妙舞。\n' +
'光禄：光禄勋。用东汉马援之子马防的典故。《后汉书·马援传》（附马防传）载：马防在汉章帝时拜光禄勋，生活很奢侈。文锦绣：指以锦绣装饰池台中物。文，又作“开”、或“丈”，皆误。\n' +
'将军：指东汉贵戚梁冀，他曾为大将军。《后汉书·梁冀传》载：梁冀大兴土木，建造府宅。\n' +
'宛转蛾眉：本为年轻女子的面部画妆，此代指青春年华。\n' +
'须臾：一会儿。鹤发：白发。\n' +
'古：一作“旧”。',
scroll_id: 'tabs1',
},
{
name: '赏析',
total: '<span style="font-size: 16px;font-weight: 900;">[赏析]</span>' +'<br>'+
'\n' +
' 这是一首拟古乐府诗。《白头吟》是汉乐府相和歌楚调曲旧题，古辞写一个女子向遗弃她的情人表示决绝。刘希夷这首诗则从女子写到老翁，咏叹青春易逝、富贵无常。构思独创，抒情宛转，语言优美，音韵和谐，艺术性较高，在初唐即受推崇，历来传为名篇。\n' +
'\n' +
' 诗的前半写洛阳女子感伤落花，抒发人生短促、红颜易老的感慨；后半写白头老翁遭遇沦落，抒发世事变迁、富贵无常的感慨，以“但看古来歌舞地，惟有黄昏鸟雀悲”总结全篇意旨。在前后的过渡，以“寄言全盛红颜子，应怜半死白头翁”二句，点出红颜女子的未来不免是白头老翁的今日，白头老翁的往昔实即是红颜女子的今日。诗人把红颜女子和白头老翁的具体命运加以典型化，表现出这是一大群处于封建社会下层的男女老少的共同命运，因而提出应该同病相怜，具有“醒世”的作用。\n' +
'\n' +
' “洛阳城东桃李花，飞来飞去落谁家”，诗的开头两句，描绘洛阳城东暮春景色。洛阳是唐代的东都，十分繁华；繁华的都市盛开着艳丽的鲜花，满城春色，生气勃勃，令人心醉神往。然而时光易逝，此时的洛阳已是落花季节，桃李纷飞，不知飘向何处。这两句是诗的起兴。下文表达的对大好春光、妙龄红颜的憧憬和留恋，对桃李花落、青春易逝的感伤和惋惜，都是由此生发开来的。\n' +
'\n' +
' “洛阳女儿惜颜色”以下十句，写年轻的洛阳女儿面对漫天飞舞的落花生出无限感慨。洛阳女儿所感伤的，实际上是由大自然的变化而联想到美的短暂和人的生命的有限。“今年花落颜色改，明年花开复谁在？”表现的是因为春光的流逝而感叹红颜易老、生命无常的心理。“松柏摧为薪”句，出自《古诗十九首·去者日以疏》：“古墓犁为田，松柏摧为薪。”“桑田变成海”，指陆地变成海洋，典出《神仙传·麻姑》：“麻姑自说云，接待以来，已见东海三为桑田。”这两句运用比喻，形象地表现世事变化很大。“古人无复洛城东，今人还对落花风”则揭示人生易逝、宇宙永恒的客观规律。“年年岁岁花相似，岁岁年年人不同”两句，以优美、流畅、工整的对句集中地表现青春易老世事无常的感叹，富于诗的意境，且具有哲理性，历来广为传诵。\n' +
'\n' +
' “寄言全盛红颜子”以下十句，概括叙述白头翁一生的经历。白头老翁曾是一个美貌少年，从前他也常和公子王孙一起，在树下花前歌舞游乐。“光禄池台文锦绣”两句，以历史上权臣贵戚的豪华奢侈，表现白头翁曾经历过的一段富贵生活。然而，一旦生病衰老，就无人理睬，三春行乐只好让给别人了。这一段通过描写白头翁从红颜到老病、从游乐到孤苦的生活，不仅表示了诗人对青春红颜、清歌妙舞的眷恋、向往，对垂老白头翁的怜悯、同情，同时进一步抒发了对美的短暂和生命的有限的感慨，从而增强了诗歌的艺术感染力和哲理性。\n' +
'\n' +
' 结尾四句点明主旨，收束全诗。“宛转蛾眉能几时？须臾鹤发乱如丝”两句感叹美貌的少女转眼之间将化作白发的老妇，惋惜青春难驻。“但看古来歌舞地，唯有黄昏鸟雀悲”两句，一切都如同过眼云烟，迅速消失了！往日繁华热闹的游乐场所，如今只有几只离群的鸟雀在清冷的暮蔼中发出几声凄苦的悲鸣。末句的最后一个“悲”字，是此诗的基调。\n' +
'\n' +
' 诗的前半首化自东汉宋子侯的乐府歌辞《董娇娆》，但经过刘希夷的再创作，更为概括典型。作为前半的结语，“年年岁岁”二句是精警的名句，它比喻精当，语言精粹，令人警省。“年年岁岁”“岁岁年年”的颠倒重复，不仅排沓回荡，音韵优美，更在于强调了时光流逝的无情事实和听天由命的无奈情绪，真实动情。“花相似”、“人不同”的形象比喻，突出了花卉盛衰有时而人生青春不再的对比，耐人寻味。结合后半写白头老翁的遭遇，可以体会到，诗人不用“女子”和“春花”对比，而用泛指名词“人”和“花”对比，不仅是由于七言诗字数的限制，更由于要包括所有不能掌握自己命运的可怜人，其中也包括了诗人自己。也许，因此产生了不少关于这诗的附会传说。如《大唐新语》《本事诗》所云：诗人自己也觉得这两句诗是一种不祥的预兆，即所谓“诗谶”，一年后，诗人果然被害，应了所谓“诗谶”的说法。这类无稽之谈的产生与流传，既反映人们爱惜诗人的才华，同情他的不幸，也表明这诗情调也过于伤感了。\n' +
'\n' +
' 此诗融会汉魏歌行、南朝近体及梁、陈宫体的艺术经验，而自成一种清丽婉转的风格。它还汲取乐府诗的叙事间发议论、古诗的以叙事方式抒情的手法，又能巧妙交织运用各种对比，发挥对偶、用典的长处，是这诗艺术上的突出成就。刘希夷生前似未成名，而在死后，孙季良编选《正声集》，“以刘希夷诗为集中之最，由是大为时人所称”（《大唐新语》）。可见他一生遭遇压抑，是他产生消极感伤情绪的思想根源。这诗浓厚的感伤情绪，反映了封建制度束缚戕害人才的事实。',
scroll_id: 'tabs2',
},
{
name: '创作背景',
total: '《白头吟》是汉乐府相和歌楚调曲旧题，古辞写一个女子向遗弃她的情人表示决绝，刘希夷此诗是其在内容上的创新之作。刘希夷英年早逝，生前似未成名，一生压抑，这首诗即是刘希夷个人心态的真实写照。',
scroll_id: 'tabs3',
},
{
name: '作者',
total: '刘希夷 （约651年－约680年），唐朝诗人。 一名庭芝，字延之（一作庭芝），汉族，汝州（今河南省汝州市）人。 高宗上元二年进士，善弹琵琶。其诗以歌行见长，多写闺情，辞意柔婉华丽，且多感伤情调。《旧唐书》本传谓“善为从军闺情之诗,词调哀苦,为时所重。志行不修,为奸人所杀”。《大唐新语》卷8谓“后孙翌撰《正声集》,以希夷为集中之最”。《全唐诗》存诗1卷, 《全唐诗外编》、《全唐诗续拾》补诗7首。',
scroll_id: 'tabs3',
},
//更多的静态数据这里就不放了，可以自己编
]
}
},
methods: {
ywMe(){
if (this.ywFlag){
this.ywFlag=false
}else {
this.ywFlag=true
}
},
navigateBack(){
uni.navigateBack();
},
clickSearch(){
console.log('点击搜索');
},
tabChange(){
if(!this.clickScroll){
this.clickScroll = true;
}
},
},
created() {
// 获取状态栏高度
let that = this;
uni.getSystemInfo({
success:function(e){
that.stickyTop = 0 +'px';
that.statusBarHeight = e.statusBarHeight;
}
})
},
onPageScroll(e){
this.scrollTop = e.scrollTop;
this.clickScroll = true;
}
}
</script>
<style>
.top_view {
width: 100%;
position: fixed;
left: 0;
right: 0;
background-color: #FFFFFF;
z-index: 100;
}
.yyywww{
height: 52rpx;
line-height: 52rpx;
width: 52rpx;
border-radius: 50%;
border: 2rpx solid;
}
.yyywwwActiv{
height: 52rpx;
line-height: 52rpx;
width: 52rpx;
border-radius: 50%;
border: 2rpx solid;
background: #3a3a3a;
color: white;
}
</style>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
