同级div设置display:inline-block，父级div强制不换行<html><head></head><body><divid="container"><divclass="lable">测试测试</div><divclass="lable">测试测试</div><divclass="lable">测试测试</div><divclass="lable">测试测试</div><divclass="lable">测试测试</div><div></body><style>#container{width:400px;height:200px;background-color:red;overflow:auto;white-space:nowrap;}.lable{width:100px;background-color:blue;display:inline-block;}</style></html>
事件背景我也是个前端半吊子，第一次正儿八经的前后端分离写法。第一次在后端使用JWT的方法。前端使用Axios进行请求，需要携带header头携带token进行请求。axios({method:'post',url:'http://www.fanghong.com/Api/Api.php?act=token',headers:{"Authorization":token},})js端代码就是这样。但是网页一直有一个报错我晃了一眼，没认真看我还以为是跨域问题，然后在PHP端允许了跨域header('Access-Control-Allow-Origin:*');但报错依旧存在继续检查各种百度，总感觉没什么问题，直到看到了一篇文章，有人和我有同样的问题，有人回答说是后端拒绝了Authorization标头。我才知道后端不仅默认不允许跨域，而且连自定义的标头也不允许。然后又加了一句header('Access-Control-Allow-Headers:Origin,Content-Type,Authorization,X-Auth-Token');当然也可以用*号来表明允许所有标头。提醒：一定要认认真真看报错补一个当时js报错图
JWT类库<?php/***PHP实现jwt*/classJwt{//头部privatestatic$header=array('alg'=>'HS256',//生成signature的算法'typ'=>'JWT'//类型);//使用HMAC生成信息摘要时所使用的密钥privatestatic$key='mini!@!@^@^$%#$--*$#@(*)&&*Bingpo';/***获取jwttoken*@paramarray$payloadjwt载荷格式如下非必须*[*'iss'=>'jwt_admin',//该JWT的签发者*'iat'=>time(),//签发时间*'exp'=>time()+7200,//过期时间*'nbf'=>time()+60,//该时间之前不接收处理该Token*'sub'=>'www.admin.com',//面向的用户*'jti'=>md5(uniqid('JWT').time())//该Token唯一标识*]*@returnbool|string*/publicstaticfunctiongetToken(array$payload){if(is_array($payload)){$base64header=self::base64UrlEncode(json_encode(self::$header,JSON_UNESCAPED_UNICODE));$base64payload=self::base64UrlEncode(json_encode($payload,JSON_UNESCAPED_UNICODE));$token=$base64header.'.'.$base64payload.'.'.self::signature($base64header.'.'.$base64payload,self::$key,self::$header['alg']);return$token;}else{returnfalse;}}/***验证token是否有效,默认验证exp,nbf,iat时间*@paramstring$Token需要验证的token*@returnbool|string*/publicstaticfunctionverifyToken(string$Token){$tokens=explode('.',$Token);if(count($tokens)!=3)returnfalse;list($base64header,$base64payload,$sign)=$tokens;//获取jwt算法$base64decodeheader=json_decode(self::base64UrlDecode($base64header),JSON_OBJECT_AS_ARRAY);if(empty($base64decodeheader['alg']))returnfalse;//签名验证if(self::signature($base64header.'.'.$base64payload,self::$key,$base64decodeheader['alg'])!==$sign)returnfalse;$payload=json_decode(self::base64UrlDecode($base64payload),JSON_OBJECT_AS_ARRAY);//签发时间大于当前服务器时间验证失败if(isset($payload['iat'])&&$payload['iat']>time())returnfalse;//过期时间小宇当前服务器时间验证失败if(isset($payload['exp'])&&$payload['exp']<time())returnfalse;//该nbf时间之前不接收处理该Tokenif(isset($payload['nbf'])&&$payload['nbf']>time())returnfalse;return$payload;}/***base64UrlEncodehttps://jwt.io/中base64UrlEncode编码实现*@paramstring$input需要编码的字符串*@returnstring*/privatestaticfunctionbase64UrlEncode(string$input){returnstr_replace('=','',strtr(base64_encode($input),'+/','-_'));}/***base64UrlEncodehttps://jwt.io/中base64UrlEncode解码实现*@paramstring$input需要解码的字符串*@returnbool|string*/privatestaticfunctionbase64UrlDecode(string$input){$remainder=strlen($input)%4;if($remainder){$addlen=4-$remainder;$input.=str_repeat('=',$addlen);}returnbase64_decode(strtr($input,'-_','+/'));}/***HMACSHA256签名https://jwt.io/中HMACSHA256签名实现*@paramstring$input为base64UrlEncode(header).".".base64UrlEncode(payload)*@paramstring$key*@paramstring$alg算法方式*@returnmixed*/privatestaticfunctionsignature(string$input,string$key,string$alg='HS256'){$alg_config=array('HS256'=>'sha256');returnself::base64UrlEncode(hash_hmac($alg_config[$alg],$input,$key,true));}}调用方法引入之后用下面方法使用签发token$payload_test=array('iss'=>'Bingpo','iat'=>time(),'exp'=>time()+21600,'nbf'=>time(),'sub'=>'5','jti'=>md5(uniqid('JWT').time()));$token_test=Jwt::getToken($payload_test);echo$token_test;验证token$getPayload_test=Jwt::verifyToken($token_test);var_dump($getPayload_test);这是我见过最简单的php封装的库，不像别的看着繁琐的一批！
先创建两个变量isFixed:false,offsetTop:0,第一个：存储当前元素的可视状态初始化函数里写检测代码mounted(){window.addEventListener('scroll',this.initHeight);this.$nextTick(()=>{this.offsetTop=document.querySelector('.menu').offsetTop;})}里面的.menu就是要监测元素的节点根据需要修改最后添加方法就行了initHeight(){varscrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTopthis.isFixed=scrollTop>this.offsetTop?true:false;},this.isFixedthis.offsetTop这个值的name根据你前面设置的变量名称来
创建一个子组件/*触底子组件*/varScroll={methods:{scrollEvent(){if(document.documentElement.scrollTop+document.documentElement.clientHeight>=document.body.scrollHeight){this.$parent.onBottom();}}},mounted(){window.addEventListener('scroll',this.scrollEvent,false);},destroyed(){window.removeEventListener('scroll',this.scrollEvent,false);},template:`<divclass="scroll"></div>`};添加一个方法destroyed(){window.removeEventListener('scroll',this.handleScroll)},父组件里注册组件components:{'scroll':Scroll},切记切记：把子组件标签放到最下面脚手架开发触底检测参考：https://blog.csdn.net/Sallywa/article/details/89674985