字符太长超出部分用…隐藏

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文字然后超出省略号隐藏

overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

文本换行

 display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
width: 100%;
height: auto;

网站适应手机屏幕

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-sca" /><%--适应手机屏幕--%>

高度缓慢减少

transition: height 0.5s linear 0s;

文字超出换行

设置宽度

{width:100px;overflow:hidden;white-space:normal;word-break:break-all;
}

nvue

lines: 1;
text-overflow: ellipsis;

文字之间的间距

单词text-indent抬头距离
letter-spacing字与字间距

flex布局方式的居中显示

display:flex;
justify-content: center || space-between;
align-items: center;

文字阴影

box-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow: darkgrey 0px 0px 30px 5px;//边框外阴影box-shadow: darkgrey 0px 0px 30px 5px inset;//边框内阴影
box-shadow:-5px 15px 15px -15px rgba(0,0,0,0.3); //偏移阴影
下边框阴影box-shadow: 0px 15px 10px -15px red;//边框外阴影
//淡淡的box-shadow: 0rpx 4rpx 55rpx 7rpx rgba(0, 35, 167, 0.08);图片居中
background-position:center center;

讲解比较详细链接
https://www.webhek.com/post/css-box-shadow-property.html

文字背景渐变

 background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

讲解链接:
https://www.php.cn/css-tutorial-409954.html

占满整个屏幕

width:100%;
height:100vh;

不新增，改变原来的值

/deep/ .u-list-image-wrap{border-radius: 0 !important;
}

图片背景

background-image: url(/static/image/bg_.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;

nvue页面两张图片层叠的解决方法

<view class="video-item"><image class="video-bg" :src="img" mode="aspectFill"></image><image class="video-bg2" src="../../static/logo.png" mode=""</image>
</view>

.video-item{width: 235rpx;height: 350rpx;margin: 5rpx 7rpx 5rpx 7rpx;align-items: center;justify-content: center;background-color: #FFFFFF;border-radius: 10rpx;position: relative;.video-bg{width: 235rpx;height: 350rpx;border-radius: 10rpx;position: absolute;}.video-bg2{width: 80rpx;height: 80rpx;border-radius: 10rpx;position: absolute;}}

输入框选中的时候边框问题

.from_input:focus {outline:none;border: 1px solid #e4e0e1;border-left: 4px solid #c32139;
}

传统img 图片会随父容器放大缩小，解决方法

.serviceItem{width: 15rem;height: 10rem;background-color: #c32139;background-repeat: no-repeat;background-size: cover;
}
<div class="serviceItem" style="display: block; background-image:url(img/a1.jpg);"></div>

浏览器缩放，是否按照手机的宽度去展示

<meta  name="viewport" content="width=device-width, initial-scale=1">

HTML中使标签鼠标放上去时显示手形状

css里面加入下面的代码

cursor:pointer;
//显示箭头
cursor:default

CSS或者JS实现鼠标悬停显示另一元素
想达到鼠标悬停到元素a上，显示另一个元素b，可以通过css实现也可以通过js实现。
js:
写两个函数：mouseenter，mouseleave，例如：其中
$(“#a”).mouseenter(function() {
$(“#b”).show(“normal”);
});
$(“#a”).mouseleave(function() {
$(“#b”).hide(“normal”);
});

css：a元素和b元素需要满足一定的关系，即b是a的直接子元素：如下html元素，div header_login_name_change 是a元素，ul header_login_menu是b元素。
在a元素上写hover，后面是b元素

苹果

栗子

css，display： block； .a:hover .b { display:block; background: #2B7193; cursor: pointer; }

uniapp 的单选框圆圈太大了，缩小一些

transform:scale(0.7)

隐藏 scroll-view滚动条

scroll-view ::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}

图片旋转

@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}
}
.xuanzhuan{webkit-transform: rotate(360deg);/*animation: rotation 10s linear infinite;//正常用这个*/ animation: run 10s linear infinite;
}

//图片旋转根据来启动动画效果暂停和继续播放

<view class="xuanzhuan" :class="playing?'none':'keepgo'"></view>
...data(){return{playing:false}
}.keepgo{animation-play-state: paused;
}

图片文字背景倾斜

.wrap {position: absolute;width: 100%;height: 100%;overflow: hidden;top: 0;
}.silk-ribbon {display: inline-block;text-align: center;width: 115px;height: 60rpx;line-height: 60rpx;position: absolute;top: 15px;right: -17px;z-index: 2;overflow: hidden;transform: rotate(45deg);-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);background: #FD9C07;color: #FFFFFF;font-size: 28rpx;
}

效果

绝对定位，根据手机或者会h5浏览器

disaply:fixed;
bottom: calc(var(--window-bottom) + 10rpx);

uniapp部分

v-if和v-for的一些优雅方法，比较实用

https://mp.weixin.qq.com/s/Khft5gIDxWMW5XeMMJNVLw

返回上一页并传递参数

let pages = getCurrentPages();             //获取所有页面栈实例列表
let nowPage = pages[ pages.length - 1];    //当前页页面实例
let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
prevPage.$vm.couponNumber = value;         //修改上一页面的 couponNumber 参数值为 value
prevPage.$vm.couid = vid;                  //修改上一页面的 couid 参数值为 vid
uni.navigateBack({                         //uni.navigateTo跳转的返回，默认1为返回上一级delta: 1
});

uni-app 退出应用

https://www.jianshu.com/p/9fa79c180a85

uview头像裁剪小程序端问题

小程序uview头像裁剪，存在一个问题，如果跳转时不传参将不会初始化成功cut对象 x/y/width/height的值分别为undefined 和 NAN
应该把应该在判断option.rectWidth时先判断有没有值没有就使用初始值所以加一句下面的代码即可初始化成功：
option.rectWidth = option.rectWidth || this.rectWidth

onLoad(option) {let rectInfo = uni.getSystemInfoSync();this.width = rectInfo.windowWidth;this.height = rectInfo.windowHeight - this.bottomNavHeight;this.cropperOpt.width = this.width;this.cropperOpt.height = this.height;this.cropperOpt.pixelRatio = rectInfo.pixelRatio;if (option.destWidth) this.destWidth = option.destWidth;if (option.rectWidth) {option.rectWidth = option.rectWidth || this.rectWidth;let rectWidth = Number(option.rectWidth);this.cropperOpt.cut = {x: (this.width - rectWidth) / 2,y: (this.height - rectWidth) / 2,width: rectWidth,height: rectWidth};}

vuex部分

vuex页面和组件获取值的区别，其实算一种，只是两种引用方式

页面：
import store from '@/store/index.js';//需要引入store
store.state.username 组件：
this.$store.state.username

vue部分

vue 写入缓存取出缓存销毁缓存

sessionStorage.setItem('huancun','写入值');//存入缓存
sessionStorage.getItem("huancun");//读取缓存
sessionStorage.removeItem("huancun");//清除缓存

elementUI 弹窗自适应

<style>
.el-dialog {margin-top: 9vh !important;margin-bottom: 8vh !important;overflow: auto;
}
</style>

嵌套table 子table获取父table的列数据

props.row.status

绑定：class和：style的写法

   <!-- 1、普通的类名绑定 --><div :class="className">class绑定</div><!-- 2、对象绑定 --><div :class="{classNameA：true, classNameB：false}">class对象绑定</div><div :class="{classNameA：isActive}">class对象绑定</div><!-- 从prop或是computed中获取 --><div :class="classObj">class对象绑定</div><!-- 从methods中获取方法 --><div :class="getClassObj()">class对象绑定</div><!-- 1、直接绑定数组 --><div :class="[classNameA, classNameB]">class数组绑定</div><!-- 2、数组绑定,也可使用三元运算符--><div :class="[classNameA, isActive ? classNameB : '']">class数组绑定</div><!-- 3、数组绑定,也可使用对象语法--><div :class="[classNameA, {classNameB：isActiv}]">class数组绑定</div><!-- style对象绑定 --><div :style="styleObj">style对象绑定</div><div :style="{color: 'red', fontSize: size + 'px'}">style对象绑定</div><!-- style数组绑定 --><div :style="[styleObjA, styleObjB]">style数组绑定</div>

javaScript部分

设置缓存

Web 存储 API 提供了 sessionStorage （会话存储）和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

window.localStorage.setItem("存储名","存储值");
window.sessionStorage.setItem("存储名","存储值");

由于缓存的存储值为字符串，需要将对象数组值转换为字符串：JSON.stringify(存储值)

window.localStorage.setItem("shopcatCookits",JSON.stringify(“存储值”));
window.sessionStorage.setItem("shopcatCookits",JSON.stringify(“存储值”));

获取缓存

window.localStorage.getItem('缓存值')
window.sessionStorage.getItem('缓存值')

扩展运算符…的用法

https://www.cnblogs.com/chorkiu/p/10444006.html

保留两位小数

小数.toFixed(2)

String 数组转 Int 数组

['1','2','3'].map(Number)

动态获取ID

$(eval("col_"+index)).addClass("activity");

漂亮的弧线

<div class="box">
<div class="home_top"> 这里是内容 </div>
</div>
.box { width: 250px; margin: auto; overflow: hidden; }
.home_top { position: relative; width: 100%; height: 100px; text-align: center; line-height: 50px; }
.home_top:after { width: 140%; height: 100px; position: absolute; left: -20%; top: 0; z-index: -1; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(#2CBAF9, #04A9F4); }

uniapp的vconsole

控制台
npm install vconsole

单页面引入，或者main.js
import VConsole from ‘vconsole/dist/vconsole.min.js’ //import vconsole
let vConsole = new VConsole() // 初始化

unapp视频获取第一帧

<video :src="item.sp_url" :poster="" controls :show-center-play-btn="false" auto-pause-if-navigate></video>
//图片也可以用
<image class="zu_logo" :src="item.sp_url+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode=""></image>//只需要在地址后面加这一段代码就可以了
'?x-oss-process=video/snapshot,t_0,f_jpg'  //划重点

页面切换回地图页面组件

思路：由于地图自主的Icon和客户的样式，只能通过label文字偏移到icon上面，然后点击完了之后，icon会覆盖到label文字上。解决：点击完把所有的marker隐藏，再次显示又循环添加上，缺点，点击回来后地图不是之前滑动的位置了，需要重新滑动。
解决思路：
缓存一个地图信息的key，通过时间判断，如果不超过1小时，就使用缓存的信息（接口需要的参数）获取marker信息，直接调用接口，不执行获取定位然后才拿到经纬度的方法。

onShow() {this.getMap();
}
//获取定位
getMap(){//计算时间相差var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();      //秒 ,返回 Date 对象的秒数 (0 ~ 59)   this.time = year+'-'+month+'-'+day+' '+hour+':'+ minute+':'+seconds;console.log("time",this.time)if(uni.getStorageSync('map')){let map = uni.getStorageSync('map');var stime =date.getTime();var etime = new Date(map.createTime).getTime();var usedTime = stime - etime;  //两个时间戳相差的毫秒数//计算出小时数var leave1=usedTime%(24*3600*1000);    //计算天数后剩余的毫秒数var hours=Math.floor(leave1/(3600*1000));if(hours >=1){//如果大于等于1个小时this.userMap();}else{// this.myMap();this.district = map.district;this.latitude =   map.lat;this.longitude = map.lng;this.myLat =  map.lat;this.myLong = map.lng;console.log(this.lng,this.lat,this.district)this.setList();}console.log('hours',hours) ;}else{this.userMap();}
},
userMap(){let _t = this;uni.getLocation({type: 'gcj02',geocode:true,success: (res) => {debugger console.log("res",res)console.log('当前位置的经度 ：' + res.longitude);console.log('当前位置的纬度：' + res.latitude);this.district = res.address.district;this.latitude =  res.latitude;this.longitude = res.longitude;this.myLat = res.latitude; this.myLong = res.longitude;let data = {lng:res.longitude,lat:res.latitude,province:res.address.province,city:res.address.city,district:res.address.district,createTime:this.time}uni.setStorageSync('map',data);this.setList();},fail(res) {console.log(res)}});
},
...

自定义组件使用this.$refs.del.open()没有起效

解决方法：

this.$refs.del[0].open();

拆分详细地址（省市区，包括自治区和北京市类似的省级）

var reg = /.+?(省|市|自治区|自治州|县|区)/g // 省市区的正则
console.log(详细地址.match(reg)) // ['广东省','广州市','白云区']

APP和H5页面跳转外部访问页面的方法

// #ifdef H5
window.open(href);
// #endif
// #ifdef APP-PLUS
//第一种方法：跳转外部打开
plus.runtime.openURL( href );
//第二种方法：APP内直接下载uni.downloadFile({url: href,success: res => {if (res.statusCode === 200) {uni.openDocument({filePath: res.tempFilePath,// 如果文件名包含中文，建议使用escape(res.tempFilePath)转码，防止ios和安卓客户端导致的差异success: function(res) {console.log('打开文档成功');},fail(err) {console.log(err);}});}}});// #endif

vue的request GET传参数

使用类似的request方法，属性为GET的时候，传参

params:data得注意，GET传参得特别注明赋值的位置参数，params
//新 发电总，日排行榜
export function newsPlantNumLists(data) {console.log("api.data.数据--------",data)return request_user_api({url: 'ranking/queryPlantnUM',method: 'GET',params:data})
}POST
//发电月排行榜
export function PlantNumListsMon(data) {return request({url: 'ranking/selectByYearAndMon',method: 'POST',data})
}

vue的过滤获取单条匹配数据

 let title = res.data.filter(item => {return item.id == this.$route.params.sid;});if(this.$route.params.sid){this.type_title = title[0].cate_name;}

vue数组切换某些属性名

 this.options = res.data.map(item=>{item.value = item.id;item.label = item.cate_name;});

vue 里面js文件跳转路由的方法

import router from '@/router/index.js'router.push('/')
router.back()

应该是已经会统一配置了。
那么直接在main.js导出根组件
api.js中引入import _this from '../main.js';
然后请求里配置_this.$router.push('/login')
注意不要在api.js中导入后直接console.log(_this)，这个时候组件还没创建肯定是undefined。

vue 路由跳转到同一个页面，参数不同，页面刷新问题

watch :{'$route': function (to, from) {this.loadData();}},

vue在页面初次渲染时出现一闪而过的{{}}模板变量问题

问题：使用VUE时，页面加载瞬间，会闪现模板语法，例如{undefined{user }}等

解决办法：

1、可以通过在绑定模板变量的父元素添加VUE内置的指令v-cloak解决这个问题（推荐）
具体实现：

<div class="active_txt" v-cloak v-if="user!=''">{{user}}
</div>

CSS中添加：

[v-cloak] {display: none;
}

2、可以在需要编译的元素前后加上

关于详解
http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/

3、通过切换需要编译元素的display属性，最开始设为none，请求完数据后设为block
4、VUE前置加载
5、使用组件，模板都写在组件中，html 文件中仅插入组件标签
6、用个“loading”的遮罩层，请求数据成功后再显示

但是有的时候会不起作用，可能的原因有二：

一，v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级

[v-cloak] {display: none !important;
}

这里使用了简单粗暴的方法加了个!important，有更好的方法欢迎留言。

二，样式放在了@import引入的css文件中（传统的开发方式）
v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中

基本的方法：
split(‘’):拆分
join(‘’);组合

const arr=[1,2,3,4,5,6,7,8]
//截取数组前三个元素
const sliceA=arr.slice(0,3)

//截取数组后三个元素 slice方法
const sliceArr=arr.slice(-3)
//截取数组后三个元素 splice方法
const spliceArr=arr.splice(-3,3)

var stmp = “rcinn.cn”;

使用一个参数
alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"

alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"

使用两个参数
alert(stmp.slice(1,5))//从第2个字符开始，到第5个字符；返回"cinn"

alert(stmp.substring(1,5));//从第2个字符开始，到第5个字符；返回"cinn"

如果只用一个参数并且为0的话，那么返回整个参数
alert(stmp.slice(0));//返回整个字符串

alert(stmp.substring(0));//返回整个字符串

返回第一个字符
// 1.位位截取

alert(stmp.slice(0,1));//返回"r"

alert(stmp.substring(0,1));//返回"r"

常用方法

1、差分路径和路径参数

//根据路径，拆分urlgetQuery(url){let index = url.indexOf('?')let obj = {}if (index === -1) return objlet queryStr = url.slice(index + 1)let arr = queryStr.split('&')for (let item of arr) {let keyValue = item.split('=')obj[keyValue[0]] = keyValue[1]}console.log("cans--------------",obj)return obj},

2、some():检测数组中是否有元素大于0:

this.BooleanScore = this.tableDatas.some(item => {return item.headerstars <= 0
})

常用的但是容易忘记的css样式..........持续更新，主要自用相关推荐

Android Studio 的一些常用操作和编译报错整理（持续更新中...）
Android Studio 的一些常用操作和编译报错整理(持续更新中...) 目录 Android Studio 的一些常用操作和编译报错整理(持续更新中...) 一.Android s ...
CSS总结---持续更新中 2022.8.4
一.CSS样式 1.引入方式有标签样式(直接写在标签里) 有内部样式(写在里的style,也包括标签样式,写在html文件内部的样式) 有外部样式(通过 href="" 引入) ...
【Linux常用命令】linux常用命令集合配例子解析说明（持续更新）【Linux基础命令使用及总结】2020-12-21
Linux基本命令集合(持续更新) 前言一.pwd命令二.ls命令三.cd命令前言本文将随着个人头发稀疏程度的时间戳而更新,且这个列举的命令,不管简单复制与否,都会逐一做出举例解释说明,但某 ...
HTML修改CSS样式或更新内容,网页自动刷新
**在HTML头部加入 <meta http-equiv="refresh" content="1"> 实现** <!DOCTYPE html ...
CSS（持续更新。。）
文章目录 CSS 引入css方式 css代码风格 css选择器 css基础选择器标签选择器(元素选择器) 类选择器(常用) 类选择器的多类名使用 id选择器(一般和js搭配) 通配符选择器 css复 ...
HTML常用标签（代码＋样例）持续更新
建议可查阅文档: 1.W3C:https://www.w3school.com.cn/ 2.MDN:https://developer.mozilla.org/zh-CN/ 1.html骨架标签代码 ...
idea查看git分支快捷键_开发常用Git/Linux/idea命令快捷键总结（持续更新）
在开发过程中,会使用越来越多的命令,或快捷键,来帮助我们提高工作效率.本文记录了我在平时积累的常用命令,分享给大家. git命令基本命令 set LESSCHARSET=utf-8 --idea T ...
数学建模常用的数据处理方法及例子汇总（持续更新中）
常用的数据处理方法: 文章目录常用的数据处理方法: 一.人口模型和数据拟合 1.1 指数型人数模型 1.2 阻滞型人口模型二.神经网络方法 1. 多层向前神经网络原理介绍 2. Matlab相关函 ...
常用软件的历史版本资源下载汇总(持续更新)
JDK历史版本下载:https://www.oracle.com/cn/java/technologies/oracle-java-archive-downloads.html JDK国内镜像下载:h ...

常用的但是容易忘记的css样式..........持续更新，主要自用