微信小程序

小说阅读器效果

基础功能：
上一章，下一章
目录显示全部章节，点击章节页面对应该章节，正序倒序功能
基本样式设置，背景板切换，字号切换，亮度调节
自定义返回按钮j
静态仿照数据，和从数据库中取数据，两种方法，进行渲染页面

新手编码，代码还有很大优化空间，欢迎大家来交流学习。

静态仿照数据源

var readList = [{rid:0,title:'傲慢与偏见',imgtit:'/images/books.jpg',readcon:[{titles:'序章',paging:'p1',titlex:'挈子',txts:'迈阿密热火[微博]主场加时119-109击败达拉斯小牛，替补出场的肖恩-巴蒂尔[微博]灵犀一箭，价值连城，成为本场比赛的最大功臣之一。如果一名球员全场比赛只投中两球，没有篮板没有助攻，他的价值你怎么评价？若是相信数据统计，你可能就会犯下一个大大的错误。本场比赛巴蒂尔仍然以替补身份登场，整个前47分钟，他都没有任何抢镜的表现。然而当比赛进入到决胜时刻，主教练埃里克-斯波尔斯特拉仍然坚决地将"巴神"放在场上。事实证明斯帅的决定是英明的。第四节结束前30秒，热火落后1分握有球权，球毫无悬念地掌握在勒布朗-詹姆斯手中。只见詹姆斯在弧顶慢慢拍着皮球，一边观察着小牛队的防守，德维恩-韦德[微博]、雷-阿伦和巴蒂尔，散落在三分线外，尽量拉开球场空间。波什从禁区内提上来为詹姆斯作掩护，德克-诺维茨基和肖恩-马里昂赶紧换位，严阵以待，准备迎接詹姆斯的强势切入。所有人都认为，这种时刻，詹姆斯会一个加速强行冲击禁区，所以原本底线负责照顾巴蒂尔的文斯-卡特也收缩到禁区线附近准备协防。事后卡特一定会为自己的这个选择懊悔不已，因为就在他向内移动脚步的同时，皮球却朝着相反的方向飞出--巴蒂尔接到詹姆斯传球，第一时间起跳，带着一个稍稍后仰的动作，远射出手，皮球精确制导，穿心而中，热火死里逃生！接下来诺维茨基用后仰跳投扳平比分把比赛拖入加时，但是巴蒂尔没有被比下去。延长期热火一开始就打出7-0取得领先，而小牛刚刚凭借马里昂的罚球稳住阵脚，巴蒂尔就再一次和詹姆斯完成了和第四节如出一辙的配合，只不过两个人的位置发生了变化--詹姆斯是在右路突破时吸引到包夹，而巴蒂尔这一次出现在了左翼三分线外。当巴蒂尔本场第二记三分球命中之后，场上比分已经变成113-105，无论从分差还是气势上，都彻底击溃了小牛残存的最后一丝希望。斯帅曾经说过，谁打首发并不重要，重要的是当比赛进行到最后时刻，谁能够留在场上。斯帅这番话当然有所指，阿伦是一个，巴蒂尔是另一个，正是有了这两位集经验、意识、大心脏于一身的老将保驾护航，三巨头才能走得更远、更顺。'},{titles:'第一章',paging:'p2',titlex:'嗡嗡嗡',txts:'击败达拉斯小牛，替补出场的肖恩-巴蒂尔[微博]灵犀一箭，价值连城，成为本场比赛的最大功臣之一。如果一名球员全场比赛只投中两球，没有篮板没有助攻，他的价值你怎么评价？若是相信数据统计，你可能就会犯下一个大大的错误。本场比赛巴蒂尔仍然以替补身份登场，整个前47分钟，他都没有任何抢镜的表现。然而当比赛进入到决胜时刻，主教练埃里克-斯波尔斯特拉仍然坚决地将"巴神"放在场上。事实证明斯帅的决定是英明的。第四节结束前30秒，热火落后1分握有球权，球毫无悬念地掌握在勒布朗-詹姆斯手中。只见詹姆斯在弧顶慢慢拍着皮球，一边观察着小牛队的防守，德维恩-韦德[微博]、雷-阿伦和巴蒂尔，散落在三分线外，尽量拉开球场空间。波什从禁区内提上来为詹姆斯作掩护，德克-诺维茨基和肖恩-马里昂赶紧换位，严阵以待，准备迎接詹姆斯的强势切入。所有人都认为，这种时刻，詹姆斯会一个加速强行冲击禁区，所以原本底线负责照顾巴蒂尔的文斯-卡特也收缩到禁区线附近准备协防。事后卡特一定会为自己的这个选择懊悔不已，因为就在他向内移动脚步的同时，皮球却朝着相反的方向飞出--巴蒂尔接到詹姆斯传球，第一时间起跳，带着一个稍稍后仰的动作，远射出手，皮球精确制导，穿心而中，热火死里逃生！接下来诺维茨基用后仰跳投扳平比分把比赛拖入加时，但是巴蒂尔没有被比下去。延长期热火一开始就打出7-0取得领先，而小牛刚刚凭借马里昂的罚球稳住阵脚，巴蒂尔就再一次和詹姆斯完成了和第四节如出一辙的配合，只不过两个人的位置发生了变化--詹姆斯是在右路突破时吸引到包夹，而巴蒂尔这一次出现在了左翼三分线外。当巴蒂尔本场第二记三分球命中之后，场上比分已经变成113-105，无论从分差还是气势上，都彻底击溃了小牛残存的最后一丝希望。斯帅曾经说过，谁打首发并不重要，重要的是当比赛进行到最后时刻，谁能够留在场上。斯帅这番话当然有所指，阿伦是一个，巴蒂尔是另一个，正是有了这两位集经验、意识、大心脏于一身的老将保驾护航，三巨头才能走得更远、更顺。'},{titles:'第二章',paging:'p3',titlex:'咻咻咻',txts:'替补出场的肖恩-巴蒂尔[微博]灵犀一箭，价值连城，成为本场比赛的最大功臣之一。如果一名球员全场比赛只投中两球，没有篮板没有助攻，他的价值你怎么评价？若是相信数据统计，你可能就会犯下一个大大的错误。本场比赛巴蒂尔仍然以替补身份登场，整个前47分钟，他都没有任何抢镜的表现。然而当比赛进入到决胜时刻，主教练埃里克-斯波尔斯特拉仍然坚决地将"巴神"放在场上。事实证明斯帅的决定是英明的。第四节结束前30秒，热火落后1分握有球权，球毫无悬念地掌握在勒布朗-詹姆斯手中。只见詹姆斯在弧顶慢慢拍着皮球，一边观察着小牛队的防守，德维恩-韦德[微博]、雷-阿伦和巴蒂尔，散落在三分线外，尽量拉开球场空间。波什从禁区内提上来为詹姆斯作掩护，德克-诺维茨基和肖恩-马里昂赶紧换位，严阵以待，准备迎接詹姆斯的强势切入。所有人都认为，这种时刻，詹姆斯会一个加速强行冲击禁区，所以原本底线负责照顾巴蒂尔的文斯-卡特也收缩到禁区线附近准备协防。事后卡特一定会为自己的这个选择懊悔不已，因为就在他向内移动脚步的同时，皮球却朝着相反的方向飞出--巴蒂尔接到詹姆斯传球，第一时间起跳，带着一个稍稍后仰的动作，远射出手，皮球精确制导，穿心而中，热火死里逃生！接下来诺维茨基用后仰跳投扳平比分把比赛拖入加时，但是巴蒂尔没有被比下去。延长期热火一开始就打出7-0取得领先，而小牛刚刚凭借马里昂的罚球稳住阵脚，巴蒂尔就再一次和詹姆斯完成了和第四节如出一辙的配合，只不过两个人的位置发生了变化--詹姆斯是在右路突破时吸引到包夹，而巴蒂尔这一次出现在了左翼三分线外。当巴蒂尔本场第二记三分球命中之后，场上比分已经变成113-105，无论从分差还是气势上，都彻底击溃了小牛残存的最后一丝希望。斯帅曾经说过，谁打首发并不重要，重要的是当比赛进行到最后时刻，谁能够留在场上。斯帅这番话当然有所指，阿伦是一个，巴蒂尔是另一个，正是有了这两位集经验、意识、大心脏于一身的老将保驾护航，三巨头才能走得更远、更顺。'},]},{rid:1,title:'一念永恒',imgtit:'/images/dongman.jpg',readcon:[{titles:'第一章',paging:'p1',titlex:'嘻嘻嘻',txts:'新浪体育讯　迈阿密热火[微博]主场加时119-109击败达拉斯小牛，替补出场的肖恩-巴蒂尔[微博]灵犀一箭，价值连城，成为本场比赛的最大功臣之一。如果一名球员全场比赛只投中两球，没有篮板没有助攻，他的价值你怎么评价？若是相信数据统计，你可能就会犯下一个大大的错误。本场比赛巴蒂尔仍然以替补身份登场，整个前47分钟，他都没有任何抢镜的表现。然而当比赛进入到决胜时刻，主教练埃里克-斯波尔斯特拉仍然坚决地将"巴神"放在场上。事实证明斯帅的决定是英明的。第四节结束前30秒，热火落后1分握有球权，球毫无悬念地掌握在勒布朗-詹姆斯手中。只见詹姆斯在弧顶慢慢拍着皮球，一边观察着小牛队的防守，德维恩-韦德[微博]、雷-阿伦和巴蒂尔，散落在三分线外，尽量拉开球场空间。波什从禁区内提上来为詹姆斯作掩护，德克-诺维茨基和肖恩-马里昂赶紧换位，严阵以待，准备迎接詹姆斯的强势切入。所有人都认为，这种时刻，詹姆斯会一个加速强行冲击禁区，所以原本底线负责照顾巴蒂尔的文斯-卡特也收缩到禁区线附近准备协防。事后卡特一定会为自己的这个选择懊悔不已，因为就在他向内移动脚步的同时，皮球却朝着相反的方向飞出--巴蒂尔接到詹姆斯传球，第一时间起跳，带着一个稍稍后仰的动作，远射出手，皮球精确制导，穿心而中，热火死里逃生！接下来诺维茨基用后仰跳投扳平比分把比赛拖入加时，但是巴蒂尔没有被比下去。延长期热火一开始就打出7-0取得领先，而小牛刚刚凭借马里昂的罚球稳住阵脚，巴蒂尔就再一次和詹姆斯完成了和第四节如出一辙的配合，只不过两个人的位置发生了变化--詹姆斯是在右路突破时吸引到包夹，而巴蒂尔这一次出现在了左翼三分线外。当巴蒂尔本场第二记三分球命中之后，场上比分已经变成113-105，无论从分差还是气势上，都彻底击溃了小牛残存的最后一丝希望。斯帅曾经说过，谁打首发并不重要，重要的是当比赛进行到最后时刻，谁能够留在场上。斯帅这番话当然有所指，阿伦是一个，巴蒂尔是另一个，正是有了这两位集经验、意识、大心脏于一身的老将保驾护航，三巨头才能走得更远、更顺。'}]},{rid:2,title:'一念永恒',imgtit:'/images/dongman.jpg',readcon:[{titles:'第一章',paging:'p1',titlex:'哈哈哈',txts:'新浪体育讯　迈阿密热火[微博]主场加时119-109击败达拉斯小牛，替补出场的肖恩-巴蒂尔[微博]灵犀一箭，价值连城，成为本场比赛的最大功臣之一。如果一名球员全场比赛只投中两球，没有篮板没有助攻，他的价值你怎么评价？若是相信数据统计，你可能就会犯下一个大大的错误。本场比赛巴蒂尔仍然以替补身份登场，整个前47分钟，他都没有任何抢镜的表现。然而当比赛进入到决胜时刻，主教练埃里克-斯波尔斯特拉仍然坚决地将"巴神"放在场上。事实证明斯帅的决定是英明的。第四节结束前30秒，热火落后1分握有球权，球毫无悬念地掌握在勒布朗-詹姆斯手中。只见詹姆斯在弧顶慢慢拍着皮球，一边观察着小牛队的防守，德维恩-韦德[微博]、雷-阿伦和巴蒂尔，散落在三分线外，尽量拉开球场空间。波什从禁区内提上来为詹姆斯作掩护，德克-诺维茨基和肖恩-马里昂赶紧换位，严阵以待，准备迎接詹姆斯的强势切入。所有人都认为，这种时刻，詹姆斯会一个加速强行冲击禁区，所以原本底线负责照顾巴蒂尔的文斯-卡特也收缩到禁区线附近准备协防。事后卡特一定会为自己的这个选择懊悔不已，因为就在他向内移动脚步的同时，皮球却朝着相反的方向飞出--巴蒂尔接到詹姆斯传球，第一时间起跳，带着一个稍稍后仰的动作，远射出手，皮球精确制导，穿心而中，热火死里逃生！接下来诺维茨基用后仰跳投扳平比分把比赛拖入加时，但是巴蒂尔没有被比下去。延长期热火一开始就打出7-0取得领先，而小牛刚刚凭借马里昂的罚球稳住阵脚，巴蒂尔就再一次和詹姆斯完成了和第四节如出一辙的配合，只不过两个人的位置发生了变化--詹姆斯是在右路突破时吸引到包夹，而巴蒂尔这一次出现在了左翼三分线外。当巴蒂尔本场第二记三分球命中之后，场上比分已经变成113-105，无论从分差还是气势上，都彻底击溃了小牛残存的最后一丝希望。斯帅曾经说过，谁打首发并不重要，重要的是当比赛进行到最后时刻，谁能够留在场上。斯帅这番话当然有所指，阿伦是一个，巴蒂尔是另一个，正是有了这两位集经验、意识、大心脏于一身的老将保驾护航，三巨头才能走得更远、更顺。'}]},
]function getReadList() {return readList;
}function getReadsListByIndex(indexList){var readsNewList = [];for(let i=0; i<indexList.length; i++){var index = indexList[i].index;var reads = readList[index];readsNewList.push(reads); }return readsNewList;
}module.exports = {getReadList: getReadList,getReadsListByIndex: getReadsListByIndex
}

书架页面

<!--pages/read/index.wxml-->
<view class="read"><view class="read_box"><block wx:for="{{readListShow}}" wx:key="this"><navigator url="/pages/readtxt/index" hover-class='none' bindtap="booktap"  data-id="{{index}}"><view class="read_con" hover-class="read_con_active"><image src="{{item.images}}" mode="aspectFit"></image><view class="read_con_item">{{item.title}}</view></view></navigator></block></view>
</view>

JS

//read
const readsData = require("../../utils/data.js")Page({data: {readListShow:[],readconList:[],readList:[]},booktap:function(e){var index = e.currentTarget.dataset.id;var bookTap = this.data.readListShow[index].rid;var readListsync = wx.getStorageSync("readListsync")||[];readListsync.push({index:index,rid:bookTap})for(let i =0 ; i<readListsync.length; i++){for(let j =i+1; j<readListsync.length; j++){if(readListsync[i].rid === readListsync[j].rid){readListsync.splice(j,1);wx.setStorageSync('readListsync', readListsync);}}}wx.setStorageSync('readListsync', readListsync);  },/* 静态数据方法booktap:function(e){var index = e.currentTarget.dataset.id;var bookTap = this.data.readListShow[index].detail.rid;var readListsync = wx.getStorageSync("readListsync")||[];readListsync.push({index:index,rid:bookTap})for(let i =0 ; i<readListsync.length; i++){for(let j =i+1; j<readListsync.length; j++){if(readListsync[i].rid === readListsync[j].rid){readListsync.splice(j,1);wx.setStorageSync('readListsync', readListsync);}}}wx.setStorageSync('readListsync', readListsync);  },*/onLoad: function (options) {wx.cloud.database().collection('readList').get().then(res=>{this.setData({readListShow:res.data})}).catch(res=>{})/* 静态数据方法var readsList = readsData.getReadList();var readListShow=[];for(var i=0; i<readsList.length; i++){readListShow.push({ detail:readsList[i] } )}this.setData({readListShow:readListShow})*/},})

阅读页面

// pages/readtxt/index.js
//const readsData = require("../../utils/data.js")Page({data: {value:0,values:0,readindex:0,txttitle:'',heiye:'夜间',//readtxtListShow: [],readconList: [],tabaritem: false,catalog: false,tapcolor: false,tabarStyle: false,backcolor: '#b88e41',fontcolor: '#000',tmin:'34rpx',tminnum:34,topNum:100,paixu:false},//封装数据getNewreadList(){wx.cloud.database().collection('readList').get().then(res=>{var readListsync = wx.getStorageSync('readListsync')||[];for(let i=0; i<readListsync.length; i++){let index = readListsync[i].index;let reds = res.data[index].readcon;let txttitle= res.data[index].title;this.setData({readconList:reds,txttitle:txttitle})this.ruless();wx.clearStorage(readListsync);}}).catch(res=>{console.log("数据获取失败");})},//加载数据onLoad: function (options) {this.getNewreadList();},onShow: function () {var _this = this;//获取当前显示屏幕亮度wx.getScreenBrightness({success:function(res){_this.setData({values: res.value})}})},//点击章节对应的索引catalogtap(e){var index = e.currentTarget.dataset.id;this.setData({readindex:index,topNum: this.data.topNum = 0})},//排序paixu(e){let paixu = this.data.paixu;let readcolist =  this.data.readconList;let readcolists =  this.data.readconList;readcolist.reverse();if(!paixu){this.setData({readconList:readcolist,paixu:!paixu})}if(paixu){this.setData({readconList:readcolists,paixu:!paixu})}},fanhui(){wx.navigateBack({delta: 1 // 1返回上一个界面，2返回上上个页面})},sliderchange:function(e){var val = e.detail.value;var valScreen= val / 100;wx.setScreenBrightness({value: valScreen,})this.setData({value:e.detail.value})},getScreenBrightness:function(){var values = this.data.values;//设置屏幕亮度wx.setScreenBrightness({value: values,    //屏幕亮度值，范围 0~1，0 最暗，1 最亮})},//监听页面滚动scrolltoupper: function (e) {let scroheight = e.detail.scrollHeight;if (e.detail.scrollTop = scroheight ) {this.setData({tabaritem : false})}},//上一页previous(){let readindex = this.data.readindex;if(readindex > 0){this.setData({readindex:--readindex,topNum: this.data.topNum = 0})}},//下一页next(){let readindex = this.data.readindex;let readconList = this.data.readconList;if(readindex < readconList.length-1){this.setData({readindex:++readindex,topNum: this.data.topNum = 0})}else{wx.showToast({title: '已是最后一章',icon: 'loading',duration: 10000})setTimeout(function(){wx.hideToast()},500)}},//切换颜色backcolor(){wx.setNavigationBarColor({frontColor: '#ffffff', // 必写项backgroundColor: '#f0d49a' // 传递的颜色值})this.setData({backcolor: '#f0d49a',fontcolor: '#000000'})},//切换颜色backcolor1(){wx.setNavigationBarColor({frontColor: '#ffffff', // 必写项backgroundColor: '#f7bb6d', // 传递的颜色值})this.setData({backcolor: '#f7bb6d',fontcolor: '#000000'})},//切换颜色backcolor2(){wx.setNavigationBarColor({frontColor: '#ffffff', // 必写项backgroundColor: '#bdf3bd', // 传递的颜色值})this.setData({backcolor: '#bdf3bd',fontcolor: '#000000'})},//切换颜色backcolor3(){wx.setNavigationBarColor({frontColor: '#ffffff', // 必写项backgroundColor: '#7c7a7a', // 传递的颜色值})this.setData({backcolor: '#7c7a7a',fontcolor: '#ffffff'})},//切换颜色backcolor4(){wx.setNavigationBarColor({frontColor: '#ffffff', // 必写项backgroundColor: '#ffffff', // 传递的颜色值})this.setData({backcolor: '#ffffff',fontcolor: '#000000'})},//调整字号tmin(){var nummin = 24;var tminnum = this.data.tminnum;if(tminnum > nummin){var tmin = tminnum + 'rpx';this.setData({tminnum : tminnum - 2,tmin:tmin})}},//调整字号tmax(){var nummin = 55;var tminnum = this.data.tminnum;if(tminnum < nummin){var tmin = tminnum + 'rpx';this.setData({tminnum : tminnum + 2,tmin:tmin})}},//菜单栏样式状态tabarStyle() {var tabarStyle = !this.data.tabar_style;this.setData({tabarStyle: tabarStyle,tabaritem: false})},stylehide() {this.setData({tabarStyle: false})},tabarshow() {var tabaritem = !this.data.tabaritem;this.setData({tabaritem: tabaritem,catalog: false,tabarStyle: false})},//目录的状态catalogshow() {var catalog = !this.data.catalog;this.setData({catalog: catalog,tabaritem: false})},cataloghide() {this.setData({catalog: false})},//夜间模式tapcolor() {var that = this;var tapcolor = !this.data.tapcolor;this.setData({tapcolor: tapcolor,})if (this.data.tapcolor == true) {wx.setNavigationBarColor({frontColor: '#ffffff', // 必写项backgroundColor: '#303030', // 传递的颜色值/*animation: { // 可选项，加上这项会有个显示的动画效果duration: 100,timingFunc: 'easeIn'}*/})that.setData({backcolor: '#303030',fontcolor: '#ffffff',heiye:'白天'})}if (this.data.tapcolor == false) {wx.setNavigationBarColor({frontColor: '#ffffff', // 必写项backgroundColor: '#b88e41', // 传递的颜色值})that.setData({backcolor: '#b88e41',fontcolor: '#000',heiye:'夜间'})}},/**规则 */ruless() {var aa = /。/g;var readLists = this.data.readconList;for (var i = 0; i < readLists.length; i++) {var readcons = readLists[i].texts;var ss = readcons.replace(aa, "。 \n ");readcons = ss;var asx = "readconList[" + i + "].texts";this.setData({[asx]: readcons,})}}/**数据导入 *//* 静态数据方法getNewPage: function () {var readIndexList = wx.getStorageSync("readListsync");var readListsync = readsData.getReadsListByIndex(readIndexList);var readtxtListShow = [];for (let i = 0; i < readListsync.length; i++) {readtxtListShow.push({detail: readListsync[i],})}this.setData({ readtxtListShow: readtxtListShow })wx.clearStorage(readListsync);},getNewconList: function () {var readconList = [];var readtxtListShow = this.data.readtxtListShow[0].detail.readcon;var txttitle = '';var readtxttit = this.data.readtxtListShow[0].detail.title;txttitle = readtxttit;readconList.push({ detail: readtxtListShow })this.setData({readconList: readconList,txttitle:txttitle})},静态正则rules() {var aa = /。/g;var readLists = this.data.readtxtListShow;for (var i = 0; i < readLists.length; i++) {var readcons = this.data.readtxtListShow[i].detail.readcon;for (var j = 0; j < readcons.length; j++) {var as = this.data.readtxtListShow[i].detail.readcon[j].txts;var ss = as.replace(aa, "。 \n \t\t");as = ss;var asx = "readtxtListShow[" + i + "].detail.readcon[" + j + "].txts";this.setData({[asx]: as,})}}}, */})

<!--pages/readtxt/index.wxml--><view class="readtxtbox" style="background-color: {{backcolor}}; color:{{fontcolor}}; font-size:{{tmin}};"><view class="top" style="background-color: {{backcolor}};"></view><scroll-view class="readbox" scroll-y='true' catchtap="tabarshow" scroll-top='{{topNum}}' enhanced='true' show-scrollbar='false' scroll-anchoring='true' bindscroll='scrolltoupper'> <view class="titex">{{readconList[readindex].chapter}} {{readconList[readindex].chapterx}}</view><view class="readtxt"><text space="emsp">{{readconList[readindex].texts}}</text></view></scroll-view><view class="tabar font_sizebf" wx:if="{{tabaritem}}"><view class="tabar_item"><view class="tr_im_con" catchtap="previous">上一页</view><view class="tr_im_con" catchtap="next">下一页</view></view><view class="tabar_item1"><view class="item1_left" catchtap="catalogshow"><image src="/icons/mulu.png"></image><view>目录</view></view><view class="item1_con" catchtap="tapcolor"><image src="/icons/heiye_{{tapcolor?0:1}}.png"></image><view>{{heiye}}</view></view><view class="item1_right" catchtap="tabarStyle"><image src="/icons/stylecolor.png"></image><view>样式</view></view></view></view><view class="catalog font_sizebf" wx:if="{{catalog}}" catchtap="cataloghide"><view class="catalog_left"><view class="catalog_top"><view>{{txttitle}}</view><view catchtap="paixu">排序<image src="/icons/paixu.png"></image></view></view><block wx:for="{{readconList}}" wx:key="this"><view class="catalog_con" bindtap="catalogtap" data-id="{{index}}"><view class="c_c_t">{{item.chapter}}</view><view class="c_c_c">{{item.chapterx}}</view></view></block></view><view class="catalog_right" ></view></view><view class="tabarStyle font_sizebf" wx:if="{{tabarStyle}}"><view class="tabarboxhid" catchtap="stylehide"></view><view class="tabarbox"><view style="height:50rpx;"></view><view class="t_style">亮度<view class="t_speed"><slider bindchanging="sliderchange" bindchange="sliderchange" value="{{value}}" activeColor="#ffffff" block-size="20"/></view><view class="t_system" bindtap="getScreenBrightness">默认</view></view><view class="t_style">字号<view class="t_m" hover-class="t_m_active" catchtap="tmin">小</view><view class="t_m" hover-class="t_m_active" catchtap="tmax">大</view></view><view class="t_style">背景<view class="t_backcon" hover-class="t_backcon_active" catchtap="backcolor"></view><view class="t_backcon1" hover-class="t_backcon_active" catchtap="backcolor1"></view><view class="t_backcon2" hover-class="t_backcon_active" catchtap="backcolor2"></view><view class="t_backcon3" hover-class="t_backcon_active" catchtap="backcolor3"></view><view class="t_backcon4" hover-class="t_backcon_active" catchtap="backcolor4"></view></view></view></view><view class="fanhui" wx:if="{{tabaritem}}" catchtap="fanhui"><image src="/icons/fanhui.png"></image></view></view>