znbb_-CSDN博客

原创 css-箭头、三角形系列

纯css制作各种小箭头和三角形需求一：不用图片，只用css实现各种上下左右的箭头思路最终效果图需求二、纯css制作三角形思路最终效果图需求三、更高级感的、镂空效果的箭头思路最终效果图需求一：不用图片，只用css实现各种上下左右的箭头思路先写一个只有右border、下border的带颜色的反 “ L ” ,内容部分由padding撑起来，然后根据css3的rotate属性进行各种旋转，实现上下左右四个方向的箭头//html部分,此处的arrow就是所有旋转的基础 <span cla

2021-06-07 09:57:31 321

原创 01：React实战笔记：上线的坑

文章目录1.打包命令2.修改配置等1.打包命令npm run build2.修改配置等项目是用脚手架创建的，有关webpack配置在node-modules下的raect-scripts下的path.js中；不过我们不用显式修改它，以下贴出具体配置步骤（假设项目运行地址:https://你的域名/项目名）以下就举例以https://xxxxx.cn/project 假定为你的线上项目地址项目根目录下新增.env文件加入PUBLIC_URL = https://xxxxx.cn/project（

2021-04-25 10:09:16 134

原创 06:React学习笔记. 组件通信

文章目录1.父传子2.子传父3. 同级组件通信1.父传子1.1 父组件通过props属性=值的形式来传递给子组件数据。1.2 子组件通过props参数获取父组件传递过来的数据。1.3 类组件和函数组件都可以。2.子传父React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可；子组件触发事件，调用父组件函数，同时把数据当做参数传递过去。class Parent extends Component { state = {

2021-03-18 15:21:57 102

原创 05：React学习笔记：state & 生命周期

文章目录1.正确地使用 State2.State 的更新可能是异步的3.数据向下流动4. 生命周期1.正确地使用 State不要直接修改 State,构造函数是唯一可以给 this.state 赋值的地方：2.State 的更新可能是异步的如果要依赖setState后的值来更新下一个状态，可以让setState接收第二个参数，第二个参数是一个回调函数，在setState的异步操作结束并且组件已经重新渲染的时候执行。也就是说，我们可以通过这个回调来拿到更新的state的值。3.数据向下流动不管是父

2021-03-18 15:06:57 125

原创 04：React学习笔记：组件 & Props

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

2021-03-18 14:50:04 51

原创 03：React学习笔记：渲染

文章目录1.元素渲染1.1将一个元素渲染为DOM1.2 更新已渲染的元素2.条件渲染2.1 使用 if 或者条件运算符2.2 元素变量2.3 JSX 中内联条件渲染的方法2.4 三目运算符3.防止组件渲染4.列表渲染5.列表渲染中的key1.元素渲染1.1将一个元素渲染为DOM假设：<div id="root"></div>将以上这个React元素渲染到根DOM节点中，只需把它们一起传入ReactDOM.render();const element = <h1&

2021-03-18 14:37:52 76

原创 02：React学习笔记：JSX

文章目录1.在JSX中嵌入表达式2.jsx也是一个表达式3. JSX特定属性4. 特殊属性的写法1.在JSX中嵌入表达式在下面的例子中，有个name变量，在jsx中使用它并将其包裹在大括号中：const name = 'john'const ele = <h1>hello world</h1>ReactDom.render(ele,document.getElementByID('root'))大括号中可以写任何有效的javascript表达式：运算表达式

2021-03-18 12:06:10 83

原创 01：React学习笔记：安装之hello world

从2020年下半年开始看关于react有关的内容，中间间隔了大半年，现在重新捡起来再学习发现对比vue来说，上手是难了点，但是熟悉后开始体会到react的乐趣了，记录下学习笔记，大家一起学习打卡！

2021-03-18 11:29:51 58

原创记axios有关

axios有关介绍1.axios具体官方介绍见添加链接描述（axios中文网）这里就跳过axios的特性和安装介绍了，直接贴最常用的代码和对应说明2.2.1 get请求axios.get('/user?id=123').then(function(response){ console.log(response); //}).catch(function(error){...

2019-07-12 19:01:45 169

原创记flex弹性布局之理论和实践

记flex弹性布局之理论和实践这里仅记录常用的属性，因为常用的也就那几个，记录太多了反而很杂，自己也记混了。1.通常我们会给要使用弹性盒子布局的外容器加上display:flex;属性开启flex布局；外容器开启了flex布局后，其内部的子元素都会成为其一个个item,你会发现原本自成一行的快级元素也会在一行并排显示，直接达到了float:left的效果；2.接着我们看看父元素上可以加的一些...

2019-07-12 17:24:57 134

原创记$.ajax()有关

一直使用jquery的ajax和后台进行数据的交互，用的最简单也是最多的就是下面的第一种1. $.ajax({ url:'请求后台地址', type:'get',//默认 dataType:'json',//大部分情况下 success:function(data){ }});...

2019-07-08 16:53:34 102

原创 iframe子页面和父页面如何传值通信

业务场景，在index.html的主页面中，我们希望嵌套子页面，这时候就涉及到父子页面的通信问题。以下的都是在同域的基础上的：1.相互获取dom元素 1.1 在父页面获取子页面的dom元素： document.getElementById('iframe_id).contentWindow.document.getElementById('domId');//先获取ifr...

2019-07-08 16:11:08 11890 1

原创前端处理后端返回的二进制流文件

需求：前端展示请求数据后的图片或文档等；刚一看觉得没啥不同，还是请求数据，在success的成功函数里拿到data，然后拿到图片的路径，然后直接放到我们前端页面的图片容器里： success:function(data){ $('.imgBox').attr('id':data.src); }运行发现是不行，因为以上是适用于后台返回的是个图片路径，当返回的...

2019-07-08 15:48:57 9342 2

原创记页面效果之“返回顶部”和“跳转到页面指定位置”的实现

在pc端的页面中当页面内容比较多，长度比较长就会出现竖向滚动条，这时候用户往下拉动滚动条浏览页面到底部后，再次返回到页面的顶部去浏览前面的内容就要往下一直拉动滚动条，用户体验很不好。许多页面都会在页面右侧放置一个固定的回到顶部的按钮之类的，当滚动条拖到到一定的高度就会出现。然后用户从底部回到顶部就很方便直接点击回到顶部即可。实现方式有几种，这边试过2种：1：利用a标签的锚点跳转的属性可以实...

2019-07-08 15:02:19 519

原创记页面加载之前的loading效果

最近做H5页面，内嵌到安卓端的APP内，需求是要在页面所有数据请求完毕之前显示loading图标提示用户等待，因为在手机端的网速很大程度上是不确定的，loading等待在用户体验度上确实比较友好。话不多说，结合代码直接看效果1.HTML结构部分<div class="mask" id="mask_id"> <div class="mask_loading"&g...

2019-07-02 08:50:44 1350

znbb_的博客