uniapp小说阅读

使用uniapp+uview-ui实现简单的小说阅读，
页面效果如下图
只实现的简单的看书功能，点击下一章切换数据，
没有实现左右滑动切换，翻书效果。
页面为静态页面，数据请自行填充

<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/000.png"></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="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					<p>露从今夜白，月是故乡明</p>
					<p>露从今夜白，月是故乡明</p>
					<p>露从今夜白，月是故乡明</p>
					<p>露从今夜白白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					<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>