uni-app小说阅读页，vue小说阅读页，静态demo

先看示列图：

**整个页面代码（uni-app的页面，放到vue页面需要将代码内的 uni设置的缓存进行替换成vue的）（文件访问图片请自己结合用你自己的）

<template><view class="page" :style="{'background':global_bg}"><view class="read_main_p"><p>第1章</p></view><view class="read_content":class="[ziti_type=='mini'?'minipage':ziti_type=='small'?'smalloage':'biggerpage',{'read_content_night':isnight}]"><view class="read_main" @click="editread" v-html="nodes"></view></view><view class="pagechange flex-around"><view class="prev">上一章</view><view class="menu">菜单</view><view class="next">下一章</view></view><!-- 顶部选项 --><view class="top_menu flex-around" v-if="show_edit"><text>分类</text><text>榜单</text><text>精选</text><text>个人中心</text></view><!-- 底部设置 --><view class="bot_edit" v-if="show_edit"><!-- 字体设置 --><view class="flex ziti"><view>字体</view><view class="ziti_tab flex"><view @click="changeziti(item.value,i)" :class="item.checked?'active_ziti':''"v-for="(item,i) of ziti_list" :key="i">{{item.name}}</view></view></view><view class="background flex"><view>背景</view><view class="bgtabs flex"><view class="bg_btn" @click="activebg(item.bg,i)" :style="{'background':item.bg}"v-for="(item,i) of bglist" :key='i'><image v-if="item.checked" class="goubg" src="../../static/changeBg.png" mode="widthFix"></image></view><view class="bg_btn"><image class="goubg" @click="changeDay":src="isnight?'/../../static/night.png':'/../../static/sun.png'" mode="widthFix"></image></view></view></view><view class="bot_tabs flex-around"><view><image class="bot_img" src="../../static/bot_l.png" mode="aspectFit"></image><view class="bot_val">目录</view></view><view><image class="bot_img" src="../../static/bot_c.png" mode="aspectFit"></image><view class="bot_val">最近阅读</view></view><view @click="backHome"><image class="bot_img" src="../../static/bot_r.png" mode="aspectFit"></image><view class="bot_val">首页</view></view></view></view></view>
</template><script>export default {data() {return {bglist: [{bg: "#F5F5F5",checked: false},{bg: '#dfedd6',checked: true},{bg: '#f8ceda',checked: false},{bg: '#f3cb9d',checked: false},],ziti_type: 'small',isnight: false,global_bg: '#dfedd6',tab_bg: "#dfedd6", //记录切换的背景颜色ziti_list: [{name: '小',checked: false,value: 'mini'},{name: '中',checked: true,value: 'small'},{name: '大',checked: false,value: 'bigger'}],show_edit: true, //设置nodes: `<p>“腿太粗，脖子太短，还有那腰，怎么粗的跟水桶似的！”</p><p>主席台上，穿着黑色西装的小正太小嘴儿嘟起。露出的小虎牙和那闪亮的大眼，让人一看就忍不住心头萌动。奈何说出的话太过毒舌，完全毁掉了他表现出来的绅士形象。</p><p>“我......”台下站着的美女笑脸僵住了，正准备开口说什么，就见小人站起身，走下台来。</p><p>“刚刚果然没有看错，你有一颗牙齿长歪了。”说着，变戏法儿似的从身后掏出一根棒棒糖塞到了女人嘴里。“这下就看不到了！”</p><p>被堵上嘴的美女瞪大了眼，眼睁睁看着小正太又坐了回去。</p><p>“下一个！”响亮的童音响起，小正太旁边站着的人抬手一挥，立刻有人将台下站着的女子带了下去。</p><p>新上场的女人一看见萌宝，便亲昵的喊了一声：“宝宝！”</p><p>坐在太师椅上的小正太甩了甩小短腿，伸出胖乎乎的手指毫不留情地道：“刷掉！”</p><p>美女脸一垮：“我既有胸，又有腰，怎么就不合格了？”</p><p>萌宝竖起的食指晃了晃，奶声奶气地道：“光有身材，没有脑子要来何用！”</p><p>胸前别着号码牌的女子有些摸不着头脑，“我怎么就没脑子了？”</p><p>坐姿端正的小正太一拍桌子，气呼呼地开口：“宝宝是你叫的吗？”</p><p>台下的美女如走马观花一般不停地换，坐在台上的小正太，也由一开始的兴致勃勃，到现在的满脸不耐烦。也因此，从小正太口中说出的话，也让众美女打击越来越深。</p><p>“粉太白，瞧着像鬼一样！”</p><p>“眼线太宽，我的眼里，只剩下你的黑眼珠了！”</p><p>“这张嘴是怎么回事？为什么那么大，都可以放下一颗鹅蛋了！”</p><p>有着“鹅蛋”嘴的女子一听小正太这话，连忙捂着嘴跑了下去。</p><p>“你往前走几步，到台上来！”小正托着下巴看着新上场的女子。</p><p>穿着粉红色连衣裙的女子闻言，嘴角扬起一抹微笑。扭着小蛮腰，信心满满地上前。</p><p>“小少爷！”</p><p>小正太站起身来，身子朝前倾了倾，“阿嚏”一声，捂住了鼻子。</p><p>“你身上喷了什么，怪不得蚊子不敢靠近，敢情都让你给熏没了！”小正太说着，匆匆闪到了一边。</p><p>被小正太嫌弃的女子哭丧着脸，狼狈地跳下了台阶。中途由于走的太急，还差点儿崴了脚。</p><p>小正太抬手扇了扇眼前的空气，再次坐回了太师椅。</p><p>“下一个！”</p><p>豪华的大礼堂里，觥筹交错，婀娜多姿的美女挤满了礼堂。</p><p>这里，是江家小少爷江泽亦的选秀现场。选的不是别人，是他未来的妈咪。</p><p>一周前，江家几房齐聚一堂，对江家如今的掌权人，也就是江小包子的父亲江邵安，给予了无限的关心。当然，是婚事上的。</p><p>年纪轻轻、凭借一己之力统一整个江氏，江邵安成为整个帝都最为神秘的商业王者、真真正正的皇权富贵，手下涉及的产业十个手指头都数不过来。</p><p>身为江家的掌舵者，但认识江邵安的人并不多。一直过着佛系生活的江邵安很少出现在公众视野中，外界只闻其名，不知其人。</p><p>对婚事抗拒的江邵安毫无疑问地拒绝了亲戚们的好意，但小亦亦不同，他倒是很乐意有个妈咪。</p><p>在江家人的支持下，小亦亦展开了轰轰烈烈的妈咪大选。凡是能入他眼的名媛，都会收到一份制作精美的邀请函。收到邀请函的千金们，无不觉得是被天上掉下来的馅饼砸中。而那些没收到的，则纷纷四处打探，看能不能花重金抢到一份。</p><p>按理说，当人后妈这营生，对这些矫情又矜贵的名媛千金们来说，应该没什么吸引力才对。可小亦亦不同，他有个堪称钻石级别的爹地。坐拥亿万身家不说，外形还高大俊逸。</p>`};},onLoad() {this.configure() //缓存配置 ，字体背景大小let node=this.nodesthis.nodes=this.nodes.replace(/\<p/gi, '<p class="nodep" ');//正则给img标签增加class},methods: {backHome(){uni.redirectTo({url:'../index/index'})},changeDay() {this.isnight = !this.isnightuni.setStorageSync('isnight', this.isnight)if (this.isnight) {this.global_bg = '#1d1d1f' //改背景颜色    uni.setStorageSync('global_bg', "#1d1d1f")uni.setStorageSync('tab_bg', this.tab_bg)} else {this.global_bg = this.tab_bgconsole.log(this.tab_bg)uni.setStorageSync('global_bg', this.tab_bg)}},editread() {this.show_edit = !this.show_edit},activebg(bg, idx) {for (let item of this.bglist) {item.checked = false}this.bglist[idx].checked = truethis.global_bg = bgthis.tab_bg = bg //为了记录切换黑夜模式切回this.isnight = falseuni.setStorageSync('isnight', this.isnight)uni.setStorageSync('global_bg', bg)// this.ziti_type=type},changeziti(type, idx) {for (let item of this.ziti_list) {item.checked = false}this.ziti_list[idx].checked = truethis.ziti_type = typeuni.setStorageSync('ziti_type', type)},configure() {console.log(uni.getStorageSync('global_bg'));console.log(uni.getStorageSync('ziti_type'));console.log(uni.getStorageSync('isnight'));if (uni.getStorageSync('global_bg')) {this.global_bg = uni.getStorageSync('global_bg')this.tab_bg = uni.getStorageSync('tab_bg')//拿的同时还需要更改当前的设置for (let item of this.bglist) {if (item.bg == this.global_bg) {item.checked = true} else {item.checked = false}}}if (uni.getStorageSync('ziti_type')) {this.ziti_type = uni.getStorageSync('ziti_type')for (let item of this.ziti_list) {if (item.value == this.ziti_type) {item.checked = true} else {item.checked = false}}}if (uni.getStorageSync('isnight')) {this.isnight = true}},}}
</script><style lang="scss">page {color: #1d1b1b;}.page {// 7e8286padding-bottom: 40rpx;}.minipage {}.read_main_p {text-align: center;padding-top: 30rpx;font-size: 42rpx;}.read_content {padding: 0 40rpx;font-size: 40rpx;}.minipage {font-size: 36rpx;}.smallpage {font-size: 40rpx;}.biggerpage {font-size: 44rpx;}.read_content /deep/ p {text-indent: 72rpx;margin: 20rpx 0;color: #1d1b1b;font-family: 'PingFang-SC-Regular';line-height: 1.8;}.read_content{text-indent: 72rpx;margin: 20rpx 0;color: #1d1b1b;font-family: 'PingFang-SC-Regular';line-height: 1.8;}.read_content .nodep{text-indent: 72rpx;margin: 20rpx 0;color: #1d1b1b;font-family: 'PingFang-SC-Regular';line-height: 1.8;}.read_content_night /deep/ p {color: #7e8286;}.read_content_night{color: #7e8286!important;}.top_menu {background-color: rgba(34, 34, 34, 1);height: 90rpx;position: fixed;width: 100%;font-size: 30rpx;z-index: 10;top: 0;color: #fff;align-items: center;}.bot_edit {background-color: rgba(34, 34, 34, 1);height: 400rpx;position: fixed;width: 100%;bottom: 0;z-index: 10;padding: 44rpx 30rpx 30rpx 25rpx;color: #FFFFFF;.ziti {line-height: 60rpx;margin-bottom: 44rpx;}.ziti_tab {font-size: 30rpx;line-height: 60rpx;margin-left: 20rpx;view {width: 180rpx;height: 60rpx;margin-left: 20rpx;text-align: center;border: 1rpx solid #4F4F4F;border-radius: 16rpx;}.active_ziti {border: 1rpx solid #FDAA36;}}.background {padding-bottom: 44rpx;line-height: 60rpx;border-bottom: 1rpx solid #4D4D4D;.bgtabs {margin-left: 44rpx;.bg_btn {width: 60rpx;height: 60rpx;margin-right: 55rpx;// background-color: #fff;border-radius: 50%;position: relative;/* #ifdef H5 */.goubg {position: absolute;width: 100%;height: 100%;top: 0;left:0;border-radius: 50%;border: 4rpx solid #FDAA36}/* #endif *//* #ifdef MP-WEIXIN */.goubg {position: absolute;width: 90%;height: 90%;top: 0;left:0;border-radius: 50%;border: 4rpx solid #FDAA36}/* #endif */}}}}.bot_tabs {text-align: center;align-items: center;padding-top: 28rpx;}.bot_img {width: 56rpx;height: 56rpx;}.pagechange{padding: 40rpx 0;view{border:1px solid #FFB473;color: #FFB473;padding:10rpx 50rpx;border-radius: 60rpx;}}.pagechange view:last-child{background:#FFB473;color: #fff;}
</style>

uni-app小说阅读页，vue小说阅读页，静态demo相关推荐

uni app页面跳转后，刷新页面参数丢失问题
正常页面路由跳转地址应该是这样的:http://localhost:8080/#/pages/study/hiring?id=1393112968202870785 浏览器刷新之后就编程这样子:htt ...
小说阅读器未能连接服务器怎么办,vue移动端小说阅读器vue全家桶项目，已部署到服务器可访问预览...
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接预览地址,里面的小说接口调用的是追书神器,然后我把里面的vip和收费章节做了处理加了个换源功能,里面需要收费或者vip的小说都可以免 ...
安卓手机小说阅读器_【趣读小说大全APP安卓】趣读小说大全手机app下载 v1.0.0 免费版...
趣读小说大全APP是一款十分好用的在线小说阅读软件,一款能够让每一个用户都能在这里轻松体验最简单的小说阅读,每天都能在这里发现更多的阅读精彩.趣读小说大全APP手机版转为每一个用户实时推送最新的小说资 ...
基于Android的看小说APP源码Android本科毕业设计Android小说阅读器、小说APP源码
基于kotlin + 协程 + MVVM 模式来编写的看小说APP. 完整代码下载地址:基于Android的看小说APP源码Android本科毕业设计Android小说阅读器.小说APP源码主要框架 ...
使用vue全家桶搭建的vue小说阅读器，已部署到服务器可预览
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接请使用浏览器打开此链接 http://39.96.55.152(由于域名需要备案用的是ip地址),里面的小说接口调用的是追书神器, ...
使用vue全家桶搭建的vue小说阅读器，已部署到服务器可预览。
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接 http://39.96.55.152(由于域名需要备案用的是ip地址),里面的小说接口调用的是追书神器,然后我把里面的vip和收费 ...
安卓手机小说阅读器_小说迷安卓app2020最新版下载安卓版下载_小说迷安卓app2020最新版下载v3.1.8手机版apk下载...
小说迷是一款小说迷必备的小说阅读软件(里诺下载站提供).软件包含了众多的优秀小说,小说的涵盖量广,可以在软件上找到想要的小说资源.软件内不仅会涵盖各种小说资源,还有上万本原创的小说资源,资源更多更丰富 ...
基于PyQt5和requests的小说在线阅读器（小说爬虫）
效果: 绝对布局无章节预加载在不关闭的情况下再次搜索存在bug 代码: python部分: import sys from PyQt5.QtGui import QIcon from PyQt5. ...
多看阅读怎么缓存小说
多看阅读怎么缓存小说,对于这个问题小伙伴们也是比较的关心,毕竟自己平常也是使用这款软件阅读小说,小伙伴们对此也是想要知道这个怎么缓存小说,在本地上阅读也是会比较的方便,下面就给大家带来详细介绍. 多看 ...

uni-app小说阅读页，vue小说阅读页，静态demo

uni-app小说阅读页，vue小说阅读页，静态demo

**整个页面代码（uni-app的页面，放到vue页面需要将代码内的 uni设置的缓存进行替换成vue的）（文件访问图片请自己结合用你自己的）

uni-app小说阅读页，vue小说阅读页，静态demo相关推荐

最新文章

热门文章

uni-app小说阅读页，vue小说阅读页，静态demo

uni-app小说阅读页，vue小说阅读页，静态demo

**整个页面代码（uni-app的页面，放到vue页面需要将代码内的 uni设置的缓存 进行替换成vue的） （文件访问图片请自己结合用你自己的）

uni-app小说阅读页，vue小说阅读页，静态demo相关推荐

最新文章

热门文章

**整个页面代码（uni-app的页面，放到vue页面需要将代码内的 uni设置的缓存进行替换成vue的）（文件访问图片请自己结合用你自己的）