目录
6 js插件之图片缩放插件Zooming(element-ui里的image组件有大图预览的功能)
11 H5 CDN引用 vue 和 element 出现的问题
12 VScode 前端插件 Beautify 格式化 javascript,json,css,sass和HTML
标签宽度确定,让文字在标签内平均分布_hibiscusxin的博客-CSDN博客标签宽度确定,让文字在标签内平均分布
还有好多坑没写上,有空就补,仅供参考
感谢活跃在互联网并且乐于分享的技术人们~
前言
有一些知识点在另一篇文章了,毕竟微信小程序开发也有专门的岗位,初心就是想专门搞一个微信小程序工作过程中的知识点总结,但是写着写着突然觉得,前端也用得上,,,一通百通嘛,尽量标题描述清晰一点,你们看目录好找。
小程序实战工作的知识点总结_坐等夕阳落time的博客-CSDN博客
1 css里定义变量
:root {
--primary-color: #ff434f;
--secondary-color: #e3e3e3;
--text-color-lightest: #e7e9ec;
--text-color-darker: #2e2e2e;
--text-color-dark: #494949;
--text-color-gray: #8b8b8b;
--text-color-dark-gray: #727272;
--text-color-light-gray: #c6c6c6;
--backdrop-color: rgba(42, 42, 42, 0.7);
}
2 元素下方有线
第一种: 线在下方且居中取决于divname的父级是否是纵向排列并且使元素水平居中
效果:
/* 下方红线 */
.divname::after {
content: "";
display: block;
width: 80%;
height: 4px;
background-color: var(--primary-color);
margin-top: 14px;
transform: translateX(10%);
}
第二种:直接用相对定位来使元素下方有线
.filter-app {
width: 100%;
height: 90%;
position: relative;
}
.filter-app::after {
position: absolute;
bottom: -8px;
left: 0%;
content: "";
display: block;
width: 100%;
height: 2px;
background-color: black;
}
3 浏览器不显示滚动条(请看本文第7点)
/* 左右滑动的滚动条不显示 */
overflow-x:hidden;
/* 上下滑动的滚动条不显示 */
overflow-y:hidden;
4 网格布局
做响应式网站时,有的区域用网格布局比较方便。
举例:如效果图所示的两行三列,元素是两行两列
两行三列
.features {
margin-top: 20PX;
display: grid;
/* 重复几次,重复的值 1fr:容器宽度的1/3*/
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 126px 126px;
column-gap: 5vw;
}
.feature {
display: grid;
grid-template-areas:
"icon title"
"icon content";
grid-template-columns: 60px 1fr;
grid-template-rows: 1fr 3fr;
}
.feature .icon-name {
grid-area: icon;
font-size: 34px;
color: var(--primary-color);
}
.feature-title {
grid-area: title;
font-size: 18px;
color: var(--text-color-darker);
}
.feature-content {
grid-area: content;
color: var(--text-color-gray);
margin-top: 8px;
}
12 宫格
用网格布局,代码短且快
.grids-12box {
display: grid;
// 一行四列,等宽
grid-template-columns: repeat(4, 1fr);
// 列间距
column-gap: 20rpx;
// 行间距
row-gap: 18rpx;
}
.btn-select {
// width: 120rpx;
height: 60rpx;
background: #EC3D38;
border-radius: 12rpx;
font-size: 24rpx;
color: #FFFFFF;
font-weight: bold;
line-height: 60rpx;
text-align: center;
}
.btn-unselect {
background: #F7F7F7;
color: #686868;
}
两行4列,最后一个元素占两格
// 父元素
.sign-date-list {
display: grid;
// 一行四列,等宽
grid-template-columns: repeat(4, 1fr);
// 列间距
column-gap: 30rpx;
// 行间距
row-gap: 30rpx;
}
// 子元素最后一个元素
.last-item {
grid-column-end: span 2;
}
5 点击图片,打开新的浏览器标签页查看图片
<image src="/static/images/mall-1.png" onclick="javascript:window.open(this.src);"/>
6 js插件之图片缩放插件Zooming(element-ui里的image组件有大图预览的功能)
var zooming = new Zooming({
scaleBase: 0.1,
customSize: {
width: 1088,
height: 688
},
bgColor: 'rgb(0, 0, 0)',
bgOpacity: '0.5'
});
zooming.listen('.img-zoomable');
7 禁止刷新的时候页面向右移动
本来你的视宽是100%的,然后刷新多了,网页整体向右移动,你的视图就不是100%了,就多出了空白的部分,然后左边的内容被遮住。。。。气死我了都,不能简单的写 ‘overflow-x: hidden; ’ 还得把 ‘max-width: 100%; ’ 这个加上。
html, body {
max-width: 100%;
overflow-x: hidden;
}
8 文字不能被选中
默认网页文字是能被选中的,就是鼠标放在文字上,会变成 手写的大写的i
, 加上这个属性后,鼠标箭头符号就不变了。建议用在通配符里,想要文字被选中的时候再单独设置。
* {
user-select:none;
}
9 元素向右延伸动画
https://www.runoob.com/try/try.php?filename=trycss3_transition1
10 实现鼠标悬停(hover)时才出现伪元素样式
.filter-app.active:after,
.filter-app:hover:after {
position: absolute;
bottom: -5px;
left: 0%;
content: "";
display: block;
width: 100%;
height: 2px;
background-color: black;
}
11 H5 CDN引用 vue 和 element 出现的问题
浏览器报错 Uncaught TypeError: Cannot read property 'prototype' of undefined 的解决办法_love_onefly的博客-CSDN博客
12 VScode 前端插件 Beautify 格式化 javascript,json,css,sass和HTML
我格式化了css,还满好用的
13 网页一行,两行文字显示省略号
做法1:这种写法显示省略号的前提是宽度是固定的,没有固定宽度(父级或者自己),隐藏失效!
/* 一定要确定当前元素是不换行的,并且超出的部分要隐藏,文字显示省略号才生效*/
.divname {
max-width: 100%;
white-space:nowrap; /* 如何处理元素内的空白 */
overflow: hidden;
text-overflow: ellipsis;
}
做法2(推荐):不用考虑宽度的问题!
如果没有定宽的,可以父布局display:flex; 然后子布局flex:1,占满剩余的空间,然后就可以一行显示省略号了
display: -webkit-box;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
两行文字显示省略号:
.item-name {
// padding: 10rpx;
padding-left: 10rpx;
padding-right: 10rpx;
display: -webkit-box;
overflow: hidden;
word-break: break-all; // 英文换行
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
不要有padding-top,padding-bottom,不然就像下面这样了,其余行文字没隐藏干净:
14 网页文字中间加横线
<del>删除</del>
// 或者
<strike>199元</strike>
// 或者
<s>删除</s>
15 CSS中设置父元素透明度不影响子元素透明度
一般我们设置透明度,经常用的 opacity: 0.5; 这个导致子元素的透明度也是0.5,即使子元素设置opacity: 1;,也是在父元素的透明度0.5的基础上设置为1,所以子元素透明度还是0.5。要想设置父元素透明度不影响子元素透明度,可以之间在backgroud里设置。
/* 0.5是透明度,三个0是rgb , 即黑色 */
background:rgba(0,0,0,0.5);
16 取消之前的样式属性
在响应式里会用的,不同的屏幕尺寸不同的排版
/* 取消的某个属性值用unset */
position:unset;
17 css 实现翻转效果
效果自己测,有时候需要在父元素写一次,然后在自己本身写一次,能得到自己想要的效果哦!
transform: scale(-1,1);
transform: scale(1,-1);
transform: scale(-1,-1);
18 H5视频问题
移动端video点开后层级过高问题_吞石鱼的博客-CSDN博客_video层级过高
19 横向滚动tabbar css样式
.filter-spus {
width: 100%;
/*设置横向滚动*/
overflow-x: scroll;
/*禁止纵向滚动*/
overflow-y: hidden;
/*设置边距改变效果为内缩*/
box-sizing: border-box;
margin: 0 10px;
padding: 0 10px;
}
.filter-spus::-webkit-scrollbar {
/*隐藏滚动条*/
display: none;
}
.filter-spu {
flex-shrink: 0; /* 宽度不被挤压*/
font-size: 15px;
margin: 20px 10px;
/*段落中文本不换行*/
white-space: nowrap;
color: #666666;
}
主要是 overflow-x: scroll; flex-shrink: 0; 还有最重要的一点,你的所有元素的宽度一定要先比显示的屏幕宽度大,才能达到滚动的效果
flex-shrink: 0 不添加时,我的元素宽度写了400rpx了,然后不生效被挤压
flex-shrink: 0 添加后
20 vant轮播
稍微好看一点点的样式,但是还是没能一比一复刻ui的图,嘤嘤,傻*催得急,我懒得弄了,唉唉唉,不能自由的敲代码。
22 pc端禁止网页缩放
23 自适应网页设计
先挂理论链接,最后自己总结一下,实际中怎么做的
自适应网页设计(Responsive Web Design) - 阮一峰的网络日志http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
移动端适配:font-size设置的思考 - axl234 - 博客园1. 问题的引出如果html5要适应各种分辨率的移动设备,可以使用rem这样的尺寸单位,针对各个分辨率范围在html上设置font-size的代码:html{font-size:10px}@mediahttps://www.cnblogs.com/axl234/p/5156956.html
小于564的用rem单位,其他的都用px单位。
原因:手机竖屏时用rem单位,在各机型都可以完美适配,但是手机横屏了,就变成了灾难。手机横屏时用px,虽说会发生有的手机字大,有的手机字小,但是差别并没有很离谱,并且你整个网页的排版布局都会很完整,并且横屏时,不要使用vh单位了,也是统统使用px。用户看的时候不会觉得怎么竖屏与横屏差距那么多。接上响应式,网页在任何屏幕中都比较舒服,缺点就是打代码的累一点,多个屏幕尺寸下,元素的大小都要一点点的调。。。。。。。。。。
在564尺寸以下用rem,可以使用下面的方法,做布局:
第一步:引入可伸缩的js
把index.js 下下来,然后把下面的代码加上
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./libs/amfe-flexible/index.js"></script>
第二步:vscode 安装插件
px2rem+ ,安装插件的目的是自动帮你计算rem的数值,你敲的时候直接敲px的数值,它就会以你配置的基准计算rem的数值,你在选择就好了。
rem的计算公式:(你的元素大小/设计稿宽度)* 10
然后对插件进行基准配置:设计稿宽度除以10
24 网页的整体缩放
经过一个多星期,我懂了,做好响应式,网页整体缩放都没事了。。。
第一种:原理是使用CSS3的scale来实现缩放(粗糙的)
把下面的代码放在body标签上面就可以了
<!-- 网页整体缩放 -->
<script type="text/javascript">
$(function () {
var r = window.screen.availWidth / document.body.offsetWidth;
$(document.body).css("-webkit-transform", "scale(" + r + ")");
});
$(window).resize(function () {
var r = window.screen.availWidth / document.body.offsetWidth;
$(document.body).css("-webkit-transform", "scale(" + r + ")");
});
</script>
第二种:我把百度和csdn的网站,滚轮缩放了一遍。
25 字间距
第一种:
CSS letter-spacing:10px;
第二种:
view 宽度一定要给,然后使用text-align-last,字均匀分布在固定宽度内
.v-category-title {
width: 130rpx;
font-size: 28rpx;
text-align: justify; // 其实这行不写也生效
text-align-last: justify;
}
标签宽度确定,让文字在标签内平均分布_hibiscusxin的博客-CSDN博客标签宽度确定,让文字在标签内平均分布<div class="basic-info"> <div class="basic-info__username"> <div class="left"> <span class="text">用户名</span> <span class="value">{{ info.userName }}</span>https://blog.csdn.net/qq_41838435/article/details/115353617
26 伪类
27 rtmp协议播放视频
video 属性和事件用法大全 - rogerwu - 博客园1、video 属性 2、video 事件https://www.cnblogs.com/rogerwu/p/10072119.html关于H5页面在微信浏览器中视频播放的问题_weixin_30745553的博客-CSDN博客Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以视频播放的效果差异也很大,这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。而iOS是不允许使用第三方浏览器内核的,就是Google Chrome也是用的系统内建的Webkit浏览器内核 (就是WebView了),APP 都是使用的系统自带的浏览器进行页面渲染,所以IOS的微信浏览器是Chrome的webkit内核。...https://blog.csdn.net/weixin_30745553/article/details/98011664?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.pc_relevant_paycolumn_v3&spm=1001.2101.3001.4242.1&utm_relevant_index=3
28 点击效果
.divname:active {
background: #F0F0F0;
}
:style="{background: tab==0? '#F0F0F0':'white'}"
29 css 文字颜色渐变 animation,css3文字渐变动画
30 切换tabbar时,div返回顶部
$(".cross-border-goods-inphone").scrollTop(
0
);
31 网页接入微信客服
客服账号是我公司的行政去弄的,最后给我发了二维码和一条链接,直接用a标签,手机上就能跳到微信去,pc端不能,但会显示请用手机打开,所以pc端可以做成点击链接,显示二维码
<a href="javascript:void(0);" onclick="contactKefu()">联系客服<text>:400-xxxx-xxx</text></a>
<script>
// 检测用户设备
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
// 是否是手机设备
var isPhoneEquipment = true;
if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
isPhoneEquipment = true;
// window.location.href = './Mhtml/index.html'; // 跳转
document.querySelector(".contact-kefu").style.display = "none";
} else {
isPhoneEquipment = false;
}
// a标签点击事件
function contactKefu() {
if(isPhoneEquipment) {
window.open("https://work.weixin.qq.com/xxxx/xxxxxxxxxxxxxxxxxxxx", "xxxx客服");
} else {
//显示二维码
document.querySelector(".contact-kefu").style.display = "block";
}
}
</script>
32 让某个子元素靠右显示
方法一:
.item{
margin-left:auto;
}
方法二:
.item{
flex:1;
text-align:right;
}
同时居中
.v-order-item-info2 {
flex: 1;
text-align: right;
margin: auto;
background: red;
}
33 显示小数
两位小数,那就是除以100,然后用toFixed(2)显示小数点后两位
<view class="item-price" @click="handleEdit(item)">{{ (item.priceFee / 100).toFixed(2) }}</view>
34 绝对定位 垂直居中
.ic-arr-down {
position: absolute;
top: 0;
bottom: 0;
right: 14rpx;
}
35 js 深拷贝对象,使页面展示数据不受下面数据修改的影响
用于 表单对象 ,展示给用户看的,和提交给系统接口的数据格式不一致,比如价钱,展示给用户看的是显示小数,但是提交给接口时,就要处理成无小数,也就是乘以100
// 深拷贝dataForm,使页面展示数据不受下面数据修改的影响
const dataForm = JSON.parse(JSON.stringify(this.dataForm))
Object.assign()不是
深拷贝,因为 Object.assign()
拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。
// 1、深度拷贝,a 创建副本 a1 把副本给b b=a1, b改变属性值,不会影响到a,即a是页面展示,b是程序操作对象
let a1 = JSON.parse(JSON.stringify(a))
let b = a1
// 2、把a1中存在b的键的值拷贝给b, 如果b中的键比a多,就得用Object.assign(目标对象,源对象)
Object.assign(b,a1)
36 折叠面板 折叠展开动画
37 获取类型
console.log(Object.getPrototypeOf(dataForm.skuList[0].priceFee))
38 列表删除
remove(item) {
// 删除任意位置的元素
var index = this.formData.labelList.indexOf(item)
if (index !== -1) {
this.formData.labelList.splice(index, 1)
}
// 删除最后一个元素
this.formData.labelList.pop()
// 删除第一个元素
this.formData.labelList.shift()
},
39 网页,H5文本识别换行符,
使用css样式: white-space:pre-line;
.group-intro {
font-size: 30rpx;
margin-bottom: 10rpx;
// 识别换行符
white-space:pre-line;
}
之前:
之后:
但是要特别注意,手机端小程序white-space:pre-line;是不生效的,微信开发者工具的模拟器上white-space:pre-line;生效文字换行成功。
40 小程序文本识别换行符
直接使用text标签就可以了
但是text标签上的margin padding 生效的效果会不符合预期,所以在text标签外面需要再用一层view标签包裹,实现margin padding样式。
41 css3的filter(滤镜) 属性
设置好看的样式必学的属性,最常用的效果如下:
模糊
手机端用得最多,就高清的图片在上面(400*400),底下是这个图片的模糊图(600*600),就搞焦点嘛
设置阴影
这个比box-shadow高级,box-shadow是容器阴影,filter的阴影是绕着内容,也就是聊天气泡的三角形,filter阴影可以绕着三角形来画,而box-shadow就是不饶着三角形,直接就是里面的方形阴影了,感兴趣的可以自己试试
置灰置暗
就社会上发生了重大沉重事件,所有网站都要置灰置暗的
42 背景怎么设置,才不会受鼠标滚轮的缩小放大影响
和图片大小没关系,重点是cover,背景就不会随滚轮变大变小了
background: url(~@/assets/login_images/login-bg.jpg) no-repeat;
background-size: cover; // 重点是这个
43 手机端微信小程序的view设置点击效果hover,点击的时候会出现一层蓝色
去除点击元素出现的蓝色高亮背景:
-webkit-tap-highlight-color: rgba(0,0,0,0);
<view class="popup-baojia-footer">
<view hover-class="btn--hover" class="popup-foot-btn"
@tap.stop="onPopupBaojiaClose">
取消
</view>
<view hover-class="btn--hover" class="popup-foot-btn btn-confirm"
@tap.stop="submitBaoJia">
确认
</view>
</view>
.btn--hover {
background-color: #e6e6e6 !important;
}
.popup-baojia-footer {
display: flex;
flex-direction: row;
border-top: 1px solid rgba(153, 153, 153, 0.1);
user-select: none;
box-sizing: border-box;
}
.popup-foot-btn {
-webkit-tap-highlight-color: rgba(0,0,0,0);
color: rgb(96, 98, 102);
flex: 1;
height: 50px;
line-height: 50px;
font-size: 16px;
box-sizing: border-box;
text-align: center;
border-radius: 2px;
}
.btn-confirm {
color: rgb(41, 121, 255);
border-left: 1px solid rgba(153, 153, 153, 0.1);
}
44 伪元素的content文字内容换行
&::after {
content: var(--shopGoodStatu);
// content: "点击\A编辑"; // \A符号
white-space: pre; // 这个一定要加
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
width: 100rpx;
height: 100rpx;
background: var(--shopGoodBg);
color: #FFFFFF;
font-size: 20rpx;
border-radius: 10rpx;
// padding-left: calc(var(--shopGoodPad) * 1rpx);
// padding-right: calc(var(--shopGoodPad) * 1rpx);
box-sizing: border-box;
text-align: center;
// text-indent: 1em;
}
<image class="shop-choosed-good"
:style=" {'--shopGoodStatu': item.isEdited ? '\'已编辑\'' : '\'点击\\A编辑\''
,'--shopGoodBg': item.isEdited ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.6)'
,'--shopGoodPad': item.isEdited ? 0 : 0}" :src="item.image || ''" mode=""
v-for="(item,index) in choosedGoodList" :key="index" @tap="onEditGoodRedPacket(index,item)"></image>
大学解惑10 - CSS中的content怎么换行,以及使用before伪类的优点_经海路大白狗的博客-CSDN博客_content换行
45 js 判断类型
typeof(item)
46 app 有 ios和安卓,时间要这样 2022-11-11 --> 2022/11/11
因为在ios ‘2022-11-11’字符串转时间失败,不能直接new Date(‘2022-11-11’)
// 2022-11-11 --> 2022/11/11
let endTime = new Date(this.pinguiItemByParent.endTime.replace(/-/g, '/'))
47 :first-child 选择器的注意点
48 :first-child 容易选择出错,可以用nth-of-type替代
// 表示选择第三个 .category-item类名 的元素
.category-item:nth-of-type(3) {
position: relative;
}
nth-of-type的正确理解
关于nth-of-type、nth-child选择失败的问题_a:nth-of-type(1)_zerocean_的博客-CSDN博客
.name:nth-of-type(1) 不能单纯的理解为 选择第一个class为name的元素!!!!!
应该理解为,选择父级下class为name的元素,然后这些元素里的同标签名元素中的第一个,如果父级的第一个标签元素的class不是name,那就是选不中的!
49 点击效果,使用伪类 :active
.category-item:active {
background-color: #e9e9e9;
}
50 隐藏手机号中间几位
想隐藏多少位就改中间的数字,不想手动写*,就用方法 repeat(数字) 重复
正则: /^(\d{3})\d{4}(\d{3})$/
getBaomiPhone(phone,num) {
// let reg = /^(\d{3})\d{5}(\d{3})$/;
// $1取正则中第一个括号的内容,$2取正则中第二个括号的内容
// return phone.replace(reg, "$1*****$2");
// 正则中使用变量 -> 通过构造函数的方式
let reg = new RegExp('^(\\d{3})\\d{' + num + '}(\\d{3})$')
// 用 repeat(数字) 重复
let stars = '*'.repeat(5)
return phone.replace(reg, "$1"+ stars +"$2");
},
// 不要使用这个方法了!直接使用正则
changePhone(phone) {
if (!phone) return;
let changeNum = phone.substring(3, phone.length - 3);
// 这种不好的地方就是,不一定是4-8位 长这样changeNum,也许其他位置连续5个数字也是changeNum呢
return phone.replace(changeNum, '*****');
},
changePhone(phone) {
if (!phone) return;
// let changeNum = phone.substring(3, phone.length - 3);
// return phone.replace(changeNum, '*****');
var reg = /^(\d{3})\d{5}(\d{3})$/;
return phone.replace(reg, "$1*****$2");
}
51 正式环境与测试环境切换
// 1、process.env.NODE_ENV
// 开发环境
if (process.env.NODE_ENV === 'development') {
baseUrl= 'http://192.168.1.56:8000'
}
// 生产环境
if (process.env.NODE_ENV === 'production') {
baseUrl= 'https://xxxxxxxx'
}
// 2、process.env.UNI_PLATFORM
if (process.env.UNI_PLATFORM === 'mp-weixin') {
console.log('当前是生产环境')
} else {
console.log('当前是开发环境')
}
52 常用的边框阴影色 #ededed
box-shadow: 0upx 0upx 10upx 1upx #ededed;
53 img标签不能用伪元素
img标签的伪元素是不被渲染的,所以页面上看不到。想用伪元素,就用在img标签的父元素上。
54 用伪元素动态计数
这篇文章滑倒最后。
55 亮光效果
用css3渐变搞亮光
background: linear-gradient(to right, transparent , rgba(255,255,255,.6),transparent);
56 鼠标经过闪光效果,用过渡做动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>闪光滑动效果</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
li {
/* 取消列表默认样式 */
list-style: none;
}
.myswiper-box {
width: 1700px;
height: 200px;
margin: 100px auto;
/* 禁止用户选择 */
user-select: none;
}
.myswiper-box>ul {
}
.myswiper-box>ul>li {
/* 行内块元素,一行显示,中间都是有缝隙的,去不掉,所以用浮动 */
/* display: inline-block; */
float: left;
width: 400px;
height: 200px;
margin-left: 20px;
position: relative;
/* 使伪元素超出自己的范围不可见 */
overflow: hidden;
}
.myswiper-box>ul>li>img {
width: 100%;
height: 200px;
object-fit: cover;
}
/* img不能用伪元素 */
.myswiper-box>ul>li::before {
content: "";
position: absolute;
top: 0;
/* 为什么不是100,因为倾斜了,100的话还是露出一点,所以要把值设大一点,完全看不到 */
left: -110%;
width: 100%;
height: 100%;
/* 亮光 */
background: linear-gradient(to right, transparent , rgba(255,255,255,.6),transparent);
/* 倾斜 */
transform: skew(-30deg);
}
.myswiper-box>ul>li:hover::before {
/* 加上过渡就有移动效果了! */
left: 110%;
/* 亮光闪过,所以时间要快.3 */
transition: all .3s;
}
</style>
</head>
<body>
<div class="myswiper-box">
<ul>
<li><img src="imgs/img1.jpg" alt=""></li>
<li><img src="imgs/img2.jpg" alt=""></li>
<li><img src="imgs/img3.jpg" alt=""></li>
<li><img src="imgs/img4.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
57 数据可视化
d3.js 前端可视化,控制svg达到交互,案例:座位模版选座 https://blog.csdn.net/Achernar0208/article/details/125467937
数据可视化编程-使用D3.js(2022)_哔哩哔哩_bilibili
https://github.com/Shao-Kui/D3.js-Demos
58 动态获取获取元素的高度宽度
this.width = this.$refs.mainContent.offsetWidth
this.height = this.$refs.mainContent.offsetHeight
59 css高亮
.img_ad:hover {
-webkit-filter: brightness(120%);
filter: brightness(120%);
}
60 js颜色转rgba
colorToRgba(color, opc=1) {
console.log(color)
if(color.indexOf('#') !== -1) {
var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
var hex = color.replace(rgx, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if(!rgb){
return color;
}
var r = parseInt(rgb[1], 16);
var g = parseInt(rgb[2], 16);
var b = parseInt(rgb[3], 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + opc + ')';
}
if(color.indexOf('rgb(') !== -1) {
let r, g, b;
let rgbaAttr = color.match(/[\d.]+/g);
if (rgbaAttr.length >= 3) {
let r, g, b;
r = rgbaAttr[0];
g = rgbaAttr[1];
b = rgbaAttr[2];
return 'rgba(' + r + ',' + g + ',' + b + ',' + alp + ')';
}
}
return color
},
61 改变原生滚动条样式
.posterBox_sliderItem::-webkit-scrollbar {
// width: 120rpx !important;
height: 6rpx !important;
background: rgba(0,0,0,0.1);
border-radius: 10rpx !important;
padding-left: calc(100% - 120rpx);
}
.posterBox_sliderItem::-webkit-scrollbar-thumb {
background: linear-gradient(44deg, #FF4C15 0%, #FF6363 100%);;
border-radius: 6rpx;
transition: 0.3s ease-in-out;
}
62 uniapp 微信小程序的深度选择器兼容
在method同级下添加:
options: {
styleIsolation: 'shared'
}
/deep/ .uni-calendar-item__weeks-box-item {
width: 100%;
}
/deep/ .uni-calendar-item__weeks-box-item .uni-calendar-item__weeks-box-circle {
// background-color: transparent;
background: #FFEDE7;
display: inline-block;
width: 100%;
width: 80%;
height: 100%;
top: 0;
right: 0;
z-index: -1;
left: 50%;
transform: translateX(-50%);
}
/deep/ .uni-calendar-item__weeks-box-item .uni-calendar-item__weeks-box-circle+.uni-calendar-item__weeks-box-text {
color: #FF4C15;
}
/deep/ .uni-calendar__weeks-item .uni-calendar-item--isDay {
background-color: rgba(0, 0, 0, 0);
color: #FF4C15 !important;
border-radius: 5px;
}
/deep/ .uni-calendar__weeks-item .uni-calendar-item--checked {
background-color: rgba(0, 0, 0, 0);
color: #FF4C15 !important;
border-radius: 5px;
}
/deep/ .uni-calendar-item__weeks-box-item .uni-calendar-item__weeks-box-text .uni-calendar-item--isDay-text::after {
content: "今日";
position: absolute;
bottom: 0;
left: 50%;
width: 100%;
transform: translateX(-50%);
text-align: center;
font-size: 18rpx;
}
/deep/ .uni-calendar-item--disable .uni-calendar-item__weeks-box-item .uni-calendar-item--isDay-text::after {
content: "";
}
uniapp小程序用deep重写组件样式不生效 已解决_uniapp deep_造梦者FZ的博客-CSDN博客
身份证号校验
IDCardValid(card) { // 身份证校验
var vcity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古",
21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏",
33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南",
42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆",
51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃",
63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外"
};
//是否为空
if (card === '') {
console.log('证件号不能为空!');
return false;
}
//校验长度,类型
var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/
if (reg.test(card) === false) {
console.log('长度不正确');
return false;
}
//检查省份
var province = card.substr(0, 2);
if (vcity[province] == undefined) {
console.log('省份不正确');
return false;
}
//检验生日
var len = card.length;
var arr_data,year,month,day,birthday;
if (len == '15') {
var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
arr_data = card.match(re_fifteen);
year = arr_data[2];
month = arr_data[3];
day = arr_data[4];
birthday = new Date('19' + year + '/' + month + '/' + day);
}
if (len == '18') {
var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
arr_data = card.match(re_eighteen);
year = arr_data[2];
month = arr_data[3];
day = arr_data[4];
birthday = new Date(year + '/' + month + '/' + day);
}
var now = new Date();
var now_year = now.getFullYear();
if (birthday.getFullYear() != year || (birthday.getMonth() + 1) != month || birthday.getDate() != day) {
console.log("生日不正确")
return false;
}
//检验位的检测
if (card.length == '15') {
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var cardTemp = 0, i;
card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
for (i = 0; i < 17; i++) {
cardTemp += card.substr(i, 1) * arrInt[i];
}
card += arrCh[cardTemp % 11];
}
len = card.length;
if (len == '18') {
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var cardTemp = 0, i, valnum;
for (i = 0; i < 17; i++) {
cardTemp += card.substr(i, 1) * arrInt[i];
}
valnum = arrCh[cardTemp % 11];
if (valnum != card.substr(17, 1)) {
console.log("检验位不正确")
return false;
}
} else {
console.log("检验位不正确")
return false;
}
return true
},
getIDCardAge(card){ // 获取身份证年龄
var len = (card + "").length;
var strBirthday = "";
if (len == 18)
{
strBirthday = card.substr(6, 4) + "/" + card.substr(10, 2) + "/" + card.substr(12, 2);
}
if (len == 15) {
strBirthday = "19" + card.substr(6, 2) + "/" + card.substr(8, 2) + "/" + card.substr(10, 2);
}
var birthDate = new Date(strBirthday);
var nowDateTime = new Date();
var age = nowDateTime.getFullYear() - birthDate.getFullYear();
if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
age--;
}
return age;
},
63 悬浮操作栏盒子样式
.tableFixedBox {
background-color: #FFF;
z-index: 999;
position: absolute;
top: 60px;
right: 20px;
width: calc(100% - 40px);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
}
64 下载图片
downLoadPoster() { // a链接下载
var img_a = document.createElement('a');
img_a.download = 'xx.png';
img_a.href = 'xxxxxxxx/xx.png');
img_a.click();
}
65 导出
后端导出:后端异步下载
1、下载优化,前端提交下载请求后,记录在数据库中,采用定时任务查询后写入xlsx或csv文件中,再转存至阿里云oss上面,默认保存近60个月【仅订单】
2、前端请求执行完成后,客户可以在列表中看到历史下载记录,可以选择下载历史表格
3、需要支持多数据分拆为多个sheet,合并为一个文件导出,可以参考扩展php-ext-xlswriter
4、增加前端下载列表页面