fixed特性
前言
本人写博客只是为了记录一些怕自己忘记的一些知识点。并且为了方便为弟弟学习。如果有幸被你看到我的文章,有写的不好的以及不对的地方还请留言指出!
本文记录的是本人在工作中遇到的关于fixed定位的特性和层叠上下文的一些知识
问题描述
在使用索引栏的时候,需要把索引栏放到action-sheet弹层里面,并且是在pc端访问,显示区域为手机大小,剧中显示!但是弹层里的索引在滚动的时候跟着滚动跑出去了!但是索引使用的却是是fixed。本文使用的是vue+vantUI
如图所示
页面打开
弹层滚动
可以看到右侧的索引兰跟着滚动上去了!
寻找问题答案
根据自己的经验,知道肯定是因为定位以及层叠上下文的问题。带着疑问,开始了网上冲浪之旅。但遗憾的是,很难找到答案!自己解决不了,那怎么办呢!寻求帮助吧!就开始了愉快的群聊之旅。格说各的观点,甚至有大佬说让我重启一个页面,把索引兰放到新的页面。但是那种满足不了我的需求!我过大佬还是多的,大佬还是厉害的,直接问我祖先元素是不是使用了transform。然后告诉我fixed定位的原理。我就一直记得fixed是根据视口进行定位的!但是却忽略 ...
反向代理解决跨域
前言
话说悲催的一天从跨域开始!不知道没有前端工程化的时候,业界是怎么处理跨域的!同源策略?jsonp?还是做代理呢?
可以说本人百分之95以上的时间都是在写工程化的项目!众所周知,工程化项目里可以配置代理解决跨域,我也写过两篇关于配置代理的文章!但是jq如何做代理,还真没有做过!
你可能会说,让后端写下请求头,允许跨域不就好了么!我只想说,我也想,但是沟通不来啊!
没办法!那就自己创造办法吧!
什么事跨域
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
MacOS安装nginx
查询要安装的软件是否存在
1brew search nginx
查看要安装的软件的详细信息以及安装在什么目录中
1 ...
数组常用方法总结
前言最近被初入前端的的朋友问到,工作中经常用到的东西都有什么,刚好也为了今后要转行到前端来的亲弟弟能够更好的翻阅学习,写下此片文章。本文个人感觉并没有什么写的价值(只是个人感觉),所有的方法和简介均来自MDN官方文档。只是多附加一些案例而已以及使用场景和个人使用心得
本文包含的数组的方法
from()
isArray()
concat()
entries()
fill()
filter()
find()
forEach()
includes()
indexOf()
join()
keys()
values()
map()
pop()
push()
reduce()
shift()
unshift()
slice()
some()
sort()
splice()
toString()
length
flot()
具体的使用方法、使用场景、使用心得1、from()
定义 :
Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。` 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
语法:
如需观看,请参考官网文档from() M ...
flutter 使用 intl 配置国际化
前言
不造你有没有发现—>写程序,学语言,学框架,怎么又绕不过这个国际化,毕竟现在叫地球村嘛。不过flutter现在的国际话不叫i8n了,叫l10n,至于为什么,暂时也没有求关注这个问题。
学习配置中文官网
先安装插件 Flutter Intl
vscode安装
Android studio安装
项目配置123456dependencies: flutter: sdk: flutter + flutter_localizations: + sdk: flutter
生成国际化文件
vscode生成国际化文件
查看—>命令面板—> Flutter Intl: Initialize
之后会在lib目录下生成如下目录和文件(文件只有英文的)
-pubspec.yaml文件最下方会出现,这个是控制是否自动生成和动态修改国际化文件的
12flutter_intl: enabled: true
添加国际化文件——> lib/l10n/intl_xxx.arb
Android studio 生成国际化文件
Tools-& ...
flutter 自定义Drawer的宽度
前言
在学习flutter的时候碰到了Drawer这个Widget,但是在使用的过程中有这么一个需求,我想修改他的宽度,网上搜了一圈没找到对应的api。自己也是经过一番折腾才解决的,可能是因为我还是flutter小白把!不管怎样,记录一下,下次遇到问题,好解决。
解决过程这里上个图就好了,代码就先不上了,毕竟下面会有最终代码。
初始效果
源码
可以看到的是_kWidth字段是私有的,是没有办法被外部访问或修改的,然而,宽度的大小控制就是跟这个字段息息相关的,如下图
_width这个才是真正的宽度(真正的宽度的大小是根据这个变量计算出来的),但是可以发现这个也是私有的,不能被外部访问和篡改。那么,该怎样处理呢?不要怕,重写这个类不就可以了么!重写这个类,把需要的加进去就可以实现了。
重写CustomDrawer类123456789101112131415161718192021222324252627282930313233343536// 为了简单,里面一切处理没写,可以参照官方的,或者把官方的拷贝过来,在官方的基础上进行修改,都是可以的class Cu ...
flutter 打包apk
前言
最近公司开会说要搞一套 app 出来,所以嘛!没办法,干呗!学习 flutter。本篇文章记录 flutter 打包成 apk 的方法和步骤。虽说没什么东西,但是记录一下也是好的,毕竟好记性不如烂笔头嘛!话不多说,赶紧肝起来。
流程使用官网给的命令生成 key.jks 文件12keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
注意:
保持文件私密; 不要将它加入到公共源代码控制中。
此操作生成的签名是*.jks 格式
创建一个 key.properties 文件创建一个名为/android/key.properties 的文件,其中包含对密钥库的引用
storePassword=<创建 keystore 时的 storePassword>,如:123456keyPassword=123456<创建 keystore 时的 keyPassword>,如:123456keyAlias=keystoreFile=.. ...
VS Code 设置背景图片
说明
本来是没想着写这篇博客的,但是有一个要好的朋友问到了!因为在异地,我这个人又懒,又刚好有时间,就想着写这么一个教程给他!也防止以后再有人问到这个(万一有以后有朋友问呢)!
由于本人是mac电脑,只能使用mac电脑进行演示!windows电脑与之类似,下面简单说一下如何配置,没有图片
下面的方式的第三步,找到文件
修改文件,第五步
重启vscode查看效果,第六步
修改方式
本人知道的修改方式分为两种
方式一
使用插件background,在vscode中下载这个插件,然后按照说明配置就行了!但是个人不推荐使用这个,至于原因,百度一下,你就知道!
方式二
修改vscode的文件(操作需谨慎)。比较推荐的方式!下面就以这种方式进行讲解说明!
设置过程
找到vscode
找到vscode,右键> 选项> 在访达中显示
点击vscode,显示包内容
点击Contents>Resources>app>out>vs>workbench后显示的就是下面图片的内容,第一次打开里面是没有图片的
注意:这里面的文件是只读的 ...
去除图片文字水印
在网络上下载的图片具有水印
有时候在网络上下载的图片具有水印,会影响到整体的美观,就想把图片的文字水印去掉。本文记录的是自己使用 ps 去除水印的方法!由于刚开始也是不会,经过网络上查找学习才会,所以记录一下,防止遗忘。
为了不浪费不必要的时间,这里有些图片说明就省略了,毕竟不是什么难的东西,按照流程做就可以了。没有什么思想和原理什么乱七八糟的东西!
去除过程
在菜单栏执行文件->打开命令,导入图片素材,按下Command+J 复制新建图层(对原文件进行保护)
在工具栏选中矩形选框工具,使用矩形选框工具将文字水印部分框选
在菜单栏执行 选择->色彩范围命令
出现色彩范围窗口,选择第一个吸管工具,吸取文字上的颜色,调节颜色容差,在下方预览的位置看到文字完整,且背景比较黑的情况下,如果效果不好,可以选择第二个吸管工具,将没有吸到的位置吸取,完成后,点击 确定,这样就转中文字水印了
为了确保文字水印完全选中还需要扩展一下选取范围,在菜单栏执行 选择->修改->扩展命令,弹出扩展选区窗口,扩展值根据实际情况来调整,点击 确定
在菜单栏执行编辑->内容识别填充 ...
更改URL但不跳转页面
需求
今天提出了一个需求,就是在使用第三方支付的时候,如果用户在支付页面直接点击浏览器的返回页面,会直接返回到下单的页面,但此时订单已经下过了,再次返回到下订单的页面,展示之前的内容显然是不合理的,现在的需求就是,用户在第三方支付的时候,点击浏览器的返回按钮时,返回到当前下的订单的订单详情页面。
寻找解决方法
你可能会说,单击返回的时候跳转到订单详情页面不就行了么!那么不好意思,你怎么知道或者说这么做是没办法跳转过去的,因为从支付页面返回没有传回来任何的参数,程序根本就什么都不知道,由于是公司的项目,这里就不贴图了(程序员操守)。
经过思考,研究,想到如果在页面跳转到支付页面之前,先往页面的历史记录里添加一条订单详情的历史记录是不是可以解决问题。
解决问题经过插文档和mdn发现,如果想要往历史记录里加入一条记录,但是页面不发生变化。需要使用history.replaceState(null,””,``);
最终解决
123456history.replaceState( null, "", `http://192.168.1.11:8080/tw ...
flutter 基础学习第一天
flutter基础之Text123456789101112131415161718192021222324252627import 'package:flutter/material.dart'; void main()=>runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "flutter入门学习", home: Scaffold( body: Center( child: Text( "今天开始学习flutter的text组件,我相信总有一天我会成为flutter真正的开发者,加油!打工人", textAlign: TextAlign.center, ...