uniapp小说阅读
<template>
<view class="novel" :class="{white:!colorStyle,black:colorStyle}">
<!-- 导航在u-popup内部，无法触发返回事件，单独写一个dom用来返回 -->
<view class="goBack" @click="goBack(1)" v-if="maskShow"></view>
<u-popup v-model="maskShow" mode="top" :mask="false">
<u-navbar title="遮天" :is-fixed="false" :is-back="false" :border-bottom="false" title-color="#333" z-index="11111">
<view class="page_navbar_warp">
<u-icon name="arrow-left" size="38"></u-icon>
</view>
</u-navbar>
</u-popup>
<!-- 正文 -->
<view class="u-content" @click="maskShow = !maskShow">
<u-parse :html="content"></u-parse>
<!-- 翻页后可以显示上一章按钮 -->
<!-- <u-button class="next">上一章</u-button> -->
<u-button class="next" @click.stop="next">下一章</u-button>
</view>
<!-- 遮罩层，弹出设置选项 -->
<u-popup v-model="maskShow" mode="bottom" :mask="false">
<view class="maskShow">
<view class="progress ">
<u-icon name="arrow-left" size="38" @click="progressVal-=1"></u-icon>
<view>
<u-slider v-model="progressVal" height="10" min="0" max="100"></u-slider>
</view>
<u-icon name="arrow-right" size="38" @click="progressVal+=1"></u-icon>
</view>
<u-grid :col="4" :border="false">
<u-grid-item bg-color="transparent" @click="changeGrid(1)">
<u-icon name="list-dot" :size="46"></u-icon>
<view class="grid-text">目录</view>
</u-grid-item>
<u-grid-item bg-color="transparent" @click="changeGrid(2)">
<u-icon name="star-fill" :size="46" v-if="!colorStyle"></u-icon>
<view class="grid-text" v-if="!colorStyle">夜间</view>
<u-icon name="star" :size="46" v-if="colorStyle"></u-icon>
<view class="grid-text" v-if="colorStyle">日间</view>
</u-grid-item>
<u-grid-item bg-color="transparent" @click="changeGrid(3)">
<u-icon name="share-fill" :size="46"></u-icon>
<view class="grid-text">分享</view>
</u-grid-item>
</u-grid>
</view>
</u-popup>
<!-- 遮罩层，目录 -->
<u-popup v-model="directoryShow" mode="left" width="500">
<view class="directoryShow">
<view class="title">遮天</view>
<view class="item u-line-1 ac">第1章 父子</view>
<view class="item u-line-1">第2章 书册开启</view>
<view class="item u-line-1">第3章 不一样的大夏府</view>
<view class="item u-line-1">第4章 战起</view>
<view class="item u-line-1">第5章 收货</view>
<view class="item u-line-1">第6章 全军覆没</view>
<view class="item u-line-1" v-for="(item,index) in 30" :key="index">第{{7+index}}章 君子动口不动手,见到的不一定是你的</view>
</view>
</u-popup>
<!-- 第一次进入，显示菜单 -->
<u-popup v-model="subnavShow" mode="center" class="subnavShow">
<view class="box">
<text>显示菜单</text>
<image src="../../static/icon/"></image>
</view>
</u-popup>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
subnavShow:false,
progressVal:10,//进度,对应章节的id
maskShow:false,//设置弹窗
directoryShow:false,//目录
colorStyle:false, //true:夜间模式，false:日间
content: `
<h2>第一章</h2>
<h4>父子</h4>
<p>露从今夜白，月是故乡明</p>
<p>露从今夜白，月是故乡明</p>
<p>露从今夜白，月是故乡明</p>
<p>露从今夜白白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明</p>
<img src="/uview/swiper/" />
<p>露从今夜白，月是故乡明</p>
<p>露从今夜白，月是故乡明</p>
<p>露从今夜白，月是故乡明</p>
<p>露从今夜白白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明</p>
<img src="/uview/swiper/" />
<p>露从今夜白，月是故乡明</p>
`
}
},
onLoad() {
this.subnavShow = true;//点一次会提示操作。可以把这个值存起来，只提示一次
},
methods: {
//点击宫格
changeGrid(i){
if(i == 1){
//目录
this.directoryShow = true;
}else if(i == 2){
//夜间模式切换
this.colorStyle = !this.colorStyle;
}else if(i == 3){
//分享
}
},
//下一章
next(){
uni.showToast({
icon:'none',
title: '下一章',
});
},
//页面跳转
goBack(name) {
if (name == 1) {
uni.navigateBack({
delta: name,
animationType: 'pop-out',
animationDuration: 300
});
} else {
uni.navigateTo({
url: name,
animationType: 'pop-in',
animationDuration: 300
})
}
},
},
}
</script>
<style scoped lang="scss">
//日间模式
.white{
/deep/.u-navbar{
background: #f1f1f1!important;
}
.u-content{
.next{
background: #ebedf0;
}
}
.maskShow{
background: #f1f1f1;
}
}
//夜间模式
.black{
/deep/.u-navbar{
background: #242424!important;
.u-title,.u-icon{ color: #ccc!important; }
}
.u-content{
background: #000!important;
color: #ccc!important;
.next{
background: #ccc!important;
color: #000;
}
}
.maskShow{
background: #242424!important;
.u-icon,.grid-text{color: #ccc!important;}
}
}
//默认样式
.novel {
.goBack{
position: fixed;
left: 0;
top: 0;
width: 44px;
height: 44px;
z-index: 9999999;
}
/deep/.u-navbar{
position: relative;
}
.u-content {
min-height: 100vh;
padding: 44px 24rpx;
font-size: 28rpx;
line-height: 1.8;
.next{
margin: 100rpx auto 50rpx;
font-size: 38rpx;
}
}
//弹出设置选项
/deep/.maskShow{
height: 350rpx;
padding: 48rpx 24rpx;
.progress{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 100rpx;
.u-slider{
width: 500rpx;
}
}
.grid-text{
margin-top: 10rpx;
}
}
//目录
.directoryShow{
padding: 24rpx 0 0 24rpx;
.title{
font-size: 38rpx;
font-weight: bold;
margin-bottom: 24rpx;
}
.item{
padding-right: 12rpx;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #ebedf0;
}
.ac{
color: #42b983;
}
}
//第一次提示操作
/deep/.subnavShow{
.u-mode-center-box{
background: transparent;
text-align: center;
uni-text{
color: #fff;
display: block;
font-size: 38rpx;
margin-bottom: 15rpx;
}
uni-image{
width: 81rpx;
height: 120rpx;
}
}
}
}
</style>