){textView.setText("当前电量："+intent.getIntExtra(BatteryManager.EXTRA_LEVEL,0));}}elseif(Intent.ACTION_POWER_CONNECTED.equals

好久没写文章了，最近做了一些新需求，有难的也有简单的，比如关机动画和关机铃声，本来想写关机动画的，但是我是用的是mtk的机器，关机动画的方法不适用AOSP，今天就写两个简单的，按power键直接关机，不弹出关机选项窗口以及去除锁屏功能

/supply/mediatek/battery/mtk_power_misc.cb/kernel-4.14/drivers/power/supply/mediatek/battery/mtk_power_misc.cindex7af23b80ff6

正题客户需要一个功能，在相机界面的时候，按下power按键，进行拍照，而不是熄屏。同样的，另外一个客户是需要在拍照界面按power按键不能熄屏，因为熄屏录制是违法行为嗷。怎么实现呢？

switch (v.getId()){ case R.id.btn_item_poweron: Log.d(TAG,"点击了power

*/publicstaticfinalintKEYCODE_POWER=26;/**Keycodeconstant:Camerakey.

 

废话不多说，先看东西这是详情，支持1~9宫格点击任意一张图既可进入浏览详情页面左右可以切换，点击底部的列表也可以切换。点击中间收起，顶部可以旋转，查看原图等功能。这个其实就是我们摸鱼模块里的图片预览组件。接下来，我们就是要写这么个玩意。环境这个是nuxt.js项目+element-uielement-ui主要是用了几个图标，也没使用啥。所以还是靠纯手工撸码吧分析这个控件，有三个状态普通的预览状态详情浏览状态原图查看状态第一和第二个状态互斥，第二和第三个状态可以共存所以我们在div结构上可以分三个。通过状态来控制显示和隐藏既可。再细分：普通预览状态这个没有难度，就是图片渲染，然后根据不同的图片数量控制大小样式之类的。而类名可以动态根据图片的数量生成。共同样式的进行抽取既可。详情页面收起功能，其实就是改变状态，控制显示既可。查看大图，就是显示当前的图片的原图既可，不改变大小。写个样式，显示一下就可以了。左右旋转，旋转我们通过修改translate里的rotate既可，再通过计算一下偏移量，重新修正大小，并且动态改变容器的大小。左右切换，本质上就是移动下标，然后更新数据源。这里要注意的是界限和重置旋转后的状态。以上分析就可以完成这个功能了。在摸鱼君的课程里不会详细讲此课程，这只是作为了个组件模块讲解，跟表情控制面板一样。在摸鱼君课程中，直接使用该控件。代码实现布局代码先是看看整体的布局代码<divid="image-viewer"><divclass="previewclear-fix"v-show="isPreview"><!--遍历内容显示--><div:class="'image-itemimage-item-'+targetImages.length"v-for="(item,index)intargetImages":key="index"><img:src="item"alt="image"@click="toDetailPage(index)"></div></div><divclass="detail"v-show="!isPreview"><!--顶部的控制栏--><divclass="iv-viewer-action-bar"><spanclass="el-icon-zoom-out"@click="toPreviewPage">收起</span><spanclass="el-icon-search"@click="showOriginalIv">查看大图</span><spanclass="el-icon-refresh-left"@click="doRotate(-1)">向左旋转</span><spanclass="el-icon-refresh-right"@click="doRotate(1)">向右旋转</span></div><divclass="iv-detail-part"id="iv-detail-part"><imgid="detail-iv":src="detailSrc"@click="toPreviewPage"><divid="iv-left-arrow"@click="leftMove"></div><divid="iv-right-arrow"@click="rightMove"></div></div><divclass="iv-list-part"><img@click="toDetailPage(index)":src="item"v-for="(item,index)intargetImages":key="index":class="currentActiveIndex===index?'iv-detail-list-itemiv-detail-list-item-active':'iv-detail-list-item'"></div></div><divclass="original-view"v-if="isOriginalIvShow"><divclass="image-container"><img:src="detailSrc"><spanclass="image-close"@click="closeOriginalIv">X</span></div></div></div>这里就是三部分的内容了preview预览部分detail详情部分original原图显示部分数据源data(){return{image1:['/images/1.png'],images2:['/images/1.png','/images/2.png'],images3:['/images/1.png','/images/2.png','/images/3.jpeg'],images4:['/images/1.png','/images/2.png','/images/3.jpeg','/images/4.jpeg'],images5:['/images/1.png','/images/2.png','/images/3.jpeg','/images/4.jpeg','/images/5.jpeg'],images6:['/images/1.png','/images/2.png','/images/3.jpeg','/images/4.jpeg','/images/5.jpeg','/images/6.jpeg'],images7:['/images/1.png','/images/2.png','/images/3.jpeg','/images/4.jpeg','/images/5.jpeg','/images/6.jpeg','/images/7.jpeg'],images8:['/images/1.png','/images/2.png','/images/3.jpeg','/images/4.jpeg','/images/5.jpeg','/images/6.jpeg','/images/7.jpeg','/images/8.jpeg'],images9:['/images/1.png','/images/2.png','/images/3.jpeg','/images/4.jpeg','/images/5.jpeg','/images/6.jpeg','/images/7.jpeg','/images/8.jpeg','/images/9.png'],targetImages:[],detailSrc:'',isPreview:true,currentActiveIndex:0,isOriginalIvShow:false,currentDeg:0,originalWidth:0,originalHeight:0}},从预览到详情页面toDetailPage(index){this.currentActiveIndex=index;this.isPreview=false;this.updateArrowPartVisibility();this.updateDetailImage();},旋转doRotate(direction){letdetailIv=document.getElementById('detail-iv');if(this.currentDeg===0){this.originalWidth=detailIv.width;this.originalHeight=detailIv.height;console.log("this.originalWidth==>"+this.originalWidth);console.log("this.originalHeight==>"+this.originalHeight);}if(direction>0){//向右转this.currentDeg+=90;if(this.currentDeg>=360){this.currentDeg=0;}}else{//向左转this.currentDeg-=90;if(this.currentDeg<=-360){this.currentDeg=0;}}//重新计算高度letdetailIvContainer=document.getElementById('iv-detail-part');//获取当前IV的宽高，然后宽高对调，调整容器letivWidth=detailIv.width;letivHeight=detailIv.height;letctWidth=detailIvContainer.offsetWidth;if(this.currentDeg===90||this.currentDeg===-270){//横向//如果高度大于容器的宽度，那么需要对图片进行缩放，并且计算宽高if(ivHeight>ctWidth){detailIv.style.height=ctWidth+'px';ivHeight=detailIv.height;ivWidth=detailIv.width;}lettargetTranslate=(ivWidth-ivHeight)/2+10;detailIv.style.transform='rotate('+this.currentDeg+'deg)translate('+targetTranslate+'px,0)';detailIvContainer.style.height=ivWidth+10+'px';}elseif(this.currentDeg===180){//宽高复原detailIv.style.height=this.originalHeight+'px';ivHeight=detailIv.height;ivWidth=detailIv.width;//纵向,相反detailIv.style.transform='rotate('+this.currentDeg+'deg)';detailIvContainer.style.height=ivHeight+10+'px';}elseif(this.currentDeg===270||this.currentDeg===-90){//横向if(ivHeight>ctWidth){detailIv.style.height=ctWidth+'px';ivHeight=detailIv.height;ivWidth=detailIv.width;}detailIvContainer.style.height=ivWidth+10+'px';lettargetTranslate=(ivHeight-ivWidth)/2-10;console.log("targetTranslate==>"+targetTranslate);detailIv.style.transform='rotate('+this.currentDeg+'deg)translate('+targetTranslate+'px,0)';}else{detailIv.style.height=this.originalHeight+'px';ivHeight=detailIv.height;ivWidth=detailIv.width;detailIv.style.transform='rotate('+this.currentDeg+'deg)';detailIvContainer.style.height=ivHeight+10+'px';}},控制左右切换的边界updateArrowPartVisibility(){//如果是第0个，左边不显示//如果是最后一个，右边不显示if(this.currentActiveIndex===0){document.getElementById('iv-left-arrow').style.display='none';}else{document.getElementById('iv-left-arrow').style.display='block';}if(this.currentActiveIndex===this.targetImages.length-1){document.getElementById('iv-right-arrow').style.display='none';}else{document.getElementById('iv-right-arrow').style.display='block';}},更新图片的显示updateDetailImage(){this.detailSrc=this.targetImages[this.currentActiveIndex];letdetailIv=document.getElementById('detail-iv');letdetailIvContainer=document.getElementById('iv-detail-part');detailIvContainer.style.height='';detailIv.style.transform='';detailIv.style.height='';this.currentDeg=0;}显示原图showOriginalIv(){this.isOriginalIvShow=true;},关闭原图closeOriginalIv(){this.isOriginalIvShow=false;},左右切换leftMove(){this.currentActiveIndex--;if(this.currentActiveIndex<0){this.currentActiveIndex=0;}this.updateArrowPartVisibility();this.updateDetailImage();},rightMove(){this.currentActiveIndex++;if(this.currentActiveIndex>this.targetImages.length-1){this.currentActiveIndex=this.targetImages.length-1;}this.updateArrowPartVisibility();this.updateDetailImage();},样式代码就不贴了，自己写吧。做这种东西，看完分析应该就可以自己写出来了。不能完全了白嫖，嫖思想就行了，哈哈。相关推荐本文和表情组件一样，只是一个模块，作为摸鱼君的模块功能，直接使用。相关的内容摸鱼君课程表情面板

点击分类里就出现这种情况：

打包下载的里面源码，把代理和api地址更新为正确地址后只有首页可以正常，其余页面都报500。直接没法看到错误的console。postman请求api又能正确返回数据

以下有一个证明例子：letpower:any;//赋值任意类型power='123';power=123;//它也兼容任何类型letnum:number;power=num;num=power;当你把JavaScript