css相关
动态样式
比如说有一个html
<style>.btn{background-color:red}</style>
<body>
<div class="btn">btn1</div>
<div class="btn">btn2</div>
<div class="btn">btn3</div>
<div class="btn">btn4</div>
<button onClick="changeAllBtnBgColor">点击改变所有class为btn的button的背景</button>
</body>
要求点击按钮后所有class为btn的button的背景都会改变，如何实现？ 换句话说，如何通过js修改内部样式？使用document.createElement("STYLE");
let x = document.createElement("STYLE");
let img = JSON.parse(localStorage.getItem("homeDetailBgImg"));//准备的图片
let t;
if (img) {
t = document.createTextNode(
`.calculator_wrap::after {background: url(${img});}`
);
} else {
t = document.createTextNode(
`.calculator_wrap::after {background: url("../../assets/images/home/skin/skin5-3/bg.jpg");}`
);
}
x.appendChild(t);
document.head.appendChild(x);
默认滚动条
chrome、移动端隐藏默认滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
改变默认滚动条样式
/*整个滚动条*/
.test ::-webkit-scrollbar {
width: 0.04rem;
background-color: #aaa;
}
/*滑轨*/
.test ::-webkit-scrollbar-track {
border-radius: 0.02rem;
margin-bottom: -1rem;/*控制多余的部分*/
background-color: #aaa;
}
/*滑块*/
.test ::-webkit-scrollbar-thumb {
background-color: #333;
border-bottom: 1rem solid transparent;/*控制小滑块高度*/
border-radius: 0.02rem;
background-clip: content-box;
}
横向滚动条
ul {
width: 100vw;
display: flex;
overflow: auto;
}
ul li {
display: inline-block;
width: 200px;
white-space:nowrap;/*li不换行*/
}
修改input的placeholder的颜色
input::--webkit-input-placeholdre{
color:white
}
input:--moz---placeholder{
color:white
}
input::--moz--placeholdre{
color:white
}
input::--mz--placeholdre{
color:white
}
修改input的光标的颜色
input{
caret-color:red;
}
产生多余空隙？
inline-block 解决方案： 父级设置 line-height:0
float:left和display:flex一起？
最好不要一起用
浮动？
display:flow-root;清除浮动 vertical-align:top
获取某个元素相对于视窗的位置集合
getBoundingClientRect
删除class&添加class
ele.classList.remove && ele.classList.add
margin为负值？（重要）
div的style是overflow:hidden,如何判断div的内容是否overflow
伪元素实现气泡框
炫酷的loading效果
input框阻止输入
e.returnValue!!!
onKeyPress(e) {
const {key} = e;
let value = this.$refs["budget-input"].value;
if (/\d+\.\d{2}/.test(value)) {
e.returnValue = false;
}
if (/\d+\./.test(value) && key === ".") {
e.returnValue = false;
}
e.returnValue = true;
},
vue相关
vue项目如何刷新指定页面
如果是刷新当前页面，使用this.$router.go(0)或者location.reload()
v-if和v-show
keep-alive和activated()钩子函数
A:keep-alive,B:keep-alive 结果从B->A,A重新mounted了? 因为transition？在transition内部加keep-alive
<transition :name="animate" :appear="true">
<keep-alive><router-view></router-view></keep-alive>
</transition>
图片加载 动态src
transition动画动态name不改变
监听路由变化时： setTimeout(()=>next(),0)
vue-meta
临时使用淘宝镜像
npm --registry registry.npm.taobao.org install express
vue-router和swiper一起使用 报错
解决方案：
stackoverflow.com/questions/6…
原因？
修改ui框架内部class
不加scoped才能修改成功
vue动态组件切换如何监测？（页面设置了keep-alive)
页面切换动画？
<transition :name="transitionName"></transition>
vue中父子组件中冒泡事件，使用.stop不能解决的问题
（来源：blog.csdn.net/qq_40374296…
input:file问题
比如说有一个页面一定需要用户输入才离开如何实现？
beforeRouter中编写，不满足条件时如何阻止，然后当满足条件后允许离开。
swiper和better-scroll相关
swiper消除留白
（最左屏不能向左滑动，最右屏不能向右滑动）
resistanceRatio : 0
swiper报错 Cannot read property 'length' of undefined"
this.$nextTick(()=>{
this.mySwiper.slideToLoop(index, 0, false);
})
移动端横向better-scroll无法滚动？
<div class="scroll-wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.scroll-wrapper {
width: 100vw;
height: 140px;
overflow: hidden;
}
.scroll-wrapper ul {
width: 2500vw;
overflow: hidden;
position: relative;
}
.scroll-wrapper ul li {
width: 20vw;
display: inline-block;
}
<script>
let wrapper = document.querySelector(".scroll-wrapper")
let bs = new BScroll(wrapper, {
scrollX: true,
scrollY: true
})
</script>
ul必须设置固定宽度！
另一种实现，撑开高度，不用设置ul为固定高度，如下：
.scroll-wrapper {
/*大于100vw*/
width: 101vw;
overflow: hidden;
margin: 0 auto;
border: 0.02rem solid darkcyan;
background-color: lightsteelblue;
}
.scroll-wrapper ul {
/*由子元素自动撑开宽度*/
display: inline-block;
/*子元素不换行, 直到遇到<br/>*/
white-space: nowrap;
}
.scroll-wrapper ul li {
display: inline-block;
padding: 0.1rem;
color: rgba(0, 0, 0, 0.7);
background-color: lightsteelblue;
}
vant px转rem 适配
vue-cli3:
先下载 postcss-pxtorem: npm add postcss-pxtorem
然后配置：
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue: 50,
propList: ['*'], // !不匹配属性，如 !font* 表示字体相关属性不转换
})
]
}
字体下载
@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}
swiper中fixed失效
网上的方法：
{
observer:true,
observeParents:true,
observeSlideChildren:true,
}
还是不行！！！只有刷新的时候才生效！怎么实现不刷新也能生效？
npm下载相应版本的package
npm install --save-dev react-router@2.8.1
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
span设置overflow : hidden;text-overflow: ellipsis;不起作用
span{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
-webkit-box-orient: vertical; /* 垂直排列 */
word-break: break-all; /* 内容自动换行 */
}
不换行:
white-space: nowrap;
如何用按键控制iscroll停止滚动
//按下时执行下列语句即可阻止滚动条滚动
this.myScroll.isAnimating = false;
this.myScroll._execEvent('scrollEnd');
vue+android
如何阻止默认键盘弹出？
直接用readonly没有光标
显示白屏
vue.config.js文件中
{
publicPath: process.env.NODE_ENV === 'production' ? './' : './'
}
webview 如何去除顶部标题
更改style.xml文件中style标签的parent
parent="Theme.AppCompat.NoActionBar"
webview调用android的js函数出现函数找不到问题
I/chromium: [INFO:CONSOLE(14)] "Uncaught ReferenceError: xxx is not defined （xxx是某个function的名字）
但是函数是确实定义了的，后来发现是在html里使用了let的原因（es6语法），因此将let改为var问题解决😂
iscroll问题
真机测试报错
图片的base64编码问题
png图片为例
public class PhotoHelper {
final private Context context;
public PhotoHelper() {
context = MyApplication.getContext();
}
/**
* 根据id获取图片资源
* @param id 图片资源id
* @return 图片资源bitmap
*/
public byte[] getPhoto(int id){
ByteArrayOutputStream baos = new ByteArrayOutputStream();
Bitmap bitmap = ((BitmapDrawable) context.getResources().getDrawable(id)).getBitmap();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);
return baos.toByteArray();
}
/**
* 将图片转换为Base64格式字符串
* @param bytes 图片资源
* @return Base64格式字符串
*/
public String drawableToString(byte[] bytes) {
String encode = Base64.encodeToString(bytes, Base64.NO_WRAP);
return "data:image/png;base64," + encode;
}
/**
* 将Base64格式字符串转换为位图
* @param encodeString 图片的Base64格式字符串 去掉开头"data:image/png;base64,"
* @return 位图
*/
public Bitmap stringToBitmap(String encodeString) {
byte[] bytes = Base64.decode(encodeString, Base64.NO_WRAP);
return BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
}
/**
* 将位图转为byte数组
* @param bitmap 位图
* @return byte数组
*/
public byte[] bitMapToByteArray(Bitmap bitmap){
ByteArrayOutputStream baos = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);
return baos.toByteArray();
}
}
- 本地图片存数据库
byte[] photo = new PhotoHelper().getPhoto(R.drawable.exchange);
- 前端上传图片存数据库
PhotoHelper photoHelper = new PhotoHelper();
Bitmap bitmap = photoHelper.stringToBitmap(iconStr);//iconStr为src去除data:image/png;base64,开头
byte[] icon = photoHelper.bitMapToByteArray(bitmap);
- 从数据库中取出图片给前端
byte[] smallCategoryIcon = cursor.getBlob(cursor.getColumnIndex("icon"));
String encoded_icon = "";
if(smallCategoryIcon!=null){
encoded_icon = new PhotoHelper().drawableToString(smallCategoryIcon);//图片src
}
Genymotion模拟器上存在时间差问题-> 设置时区
jingyan.baidu.com/article/f25…
android webview中after伪元素来设置背景图片(主要是为了opacity)不显示
改用img+position:absolute
android在webview下按返回键之间退出问题
在mainActivity.java中添加如下代码
/**
* 按返回键事件，阻止用户按返回键后直接退出app
* @param keyCode 按键代码
* @param event 事件
* @return boolean 是否阻止返回键的默认事件
*/
public boolean onKeyDown(int keyCode, KeyEvent event){
if(keyCode == KeyEvent.KEYCODE_BACK){
X5WebView mWebView = (X5WebView) findViewById(R.id.webview);
if(mWebView.canGoBack()){
mWebView.goBack();
return true;
}
}
return super.onKeyDown(keyCode, event);
}
顶部顶部状态栏颜色
（半透明）www.cnblogs.com/xinaixia/p/…
（全透明）blog.csdn.net/qq_40507817…
原理？？
适应屏幕
Android使用fitsSystemWindows属性实现
科大讯飞语音识别 21002组件未安装错误
events.jianshu.io/p/f3fd30155…
default constructor not found 异常解决方法
javaedge.blog.csdn.net/article/det…
double类型的数据（整数）存入类型为decimal(18,2)的字段小数部分消失
解决在android webview中input标签type="file"不能使用的问题
科大讯飞语音识别sdk报错20006
打开应用的录音权限即可！
echarts相关
echarts设置不同option切换，保留前一个option的数据，如何清除？
myChart.setOption(options,true);
echarts x轴全显示
blog.csdn.net/suhui1995/a… blog.csdn.net/zm_miner/ar…
js
map和普通对象
输出顺序问题
