我也要用- 博客(860)
- 资源 (37)
- 论坛 (3)
- 问答 (6)
- 收藏
- 关注
RSS订阅
原创 网站开发进阶（六十二）最强大的 CSS 布局——Grid 布局
Grid 布局是什么？Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局：Grid 布局和 flex 布局讲到布局，我们就会想到 flex布局 ，甚至有人认为既然有 flex布局 了，似乎没有必要去了解 Grid布局 。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维
2021-04-13 14:43:03
153
原创 Vue进阶（幺柒幺）：前端用户体验提升（五）Flex实现弹性布局
需求背景在实现组件拖拽设计过程中，发现组件样式中设置了 display: flex属性信息，导致组件生成后无法实现拖拽效果，网上查阅资料后发现了Flex布局大有天地。Flex来源传统的布局解决方案采用CSS实现，基于盒状模型，依赖 display属性 + position属性 + float属性。但是，它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—Flex布局，该布局方案可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这
2021-03-14 20:19:48
415
原创 Vue进阶（幺捌零）：Vue优质开源项目汇总（持续更新中...）
最近做了一个Vue开源项目库汇总，里面集合了OpenDigg 上优质的Vue开源项目库，方便Vue开发人员便捷的找到自己需要的项目工具，感兴趣的可以到GitHub上给个star。UI组件element ★9305 - 饿了么出品的Vue2的web UI工具套件Vux ★6802 - 基于Vue和WeUI的组件库mint-ui ★4776 - Vue 2的移动UI元素iview ★4458 - 基于 Vuejs 的开源 UI 组件库Keen-UI 
2021-03-07 11:37:40
711
8
原创 Web APP UI一致性设计
前言做前端开发一段时间后，你会不会发现自己在持续的做着页面重复开发的工作，后面甚至干脆是Ctrl+C、Ctrl+V操作。你可能会说，那就使用组件啊！的确，通过抽取公用视图，创建子组件的方式确实可以提升代码复用度。上面是回答是基于你做程序员开发某个产品模块功能点的时候做出的。当你的问题思考提升一个层次，从前端框架设计角度思考的时候，会不会思考这样的问题：对于交互样式比较固定的业务系统，能否基于UI一致性、UI设计规范进行规范的交互方式、页面及组件样式设计，简易高效的进行界面搭建？通过搭建可视化、所见即所得的
2020-12-23 09:57:03
875
原创 ReactNative进阶（二十四）：ScrollableTabView组件详解
文章目录属性及方法介绍Demo属性及方法介绍renderTabBar(Function:ReactComponent)TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar。注意：每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字。DefaultTabBar：Tab会平分在水平方向的空间。ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示。tabBarPosition(String，默认
2021-05-11 17:26:02
8
原创 ReactNative进阶（二十三）：Javascript 严格模式详解
文章目录1. 概述2. 为什么用严格模式3. 进入标志4.如何调用4.1 针对单个脚本4.2针对单个函数5.语法与行为改变5.1 全局变量显式声明5.2 禁止this关键字指向全局对象5.3 禁止在函数内部遍历调用栈5.4 禁止删除变量5.5 对象不能有重名的属性5.5 函数不能有重名的参数5.6 显式报错5.7 禁止八进制表示法5.8 arguments对象的限制5.9 函数必须声明在顶层5.10 保留字拓展阅读1. 概述除了正常运行模式，ECMAscript 5添加了第二种运行模式：”严格模式”
2021-05-11 11:07:17
12
原创 ReactNative进阶（二十二）：点击事件.bind(this)引发的思考
文章目录前言React中bind方法的选择前言在React或React-native的点击事件中，会经常用到bind(this)。比如说一个简单的React-native点击组件：export default class AwesomeProject extends Component { constructor(props){ super(props); this.state = { } } handleClick () { console.log('
2021-05-11 10:15:49
12
原创 ReactNative进阶（二十）：Could not connect to development server
文章目录问题描述问题分析解决方法问题描述在RN Android开发过程中，测试机突然报如下错误信息：问题分析红屏给出的解决方案翻译过来如下：请按照以下的步骤来修复此问题：确保包服务器在运行确保你的设备或者模拟器连接着电脑，并且手机打开了USB调试模式，然后在cmd中运行adb devices来查看已经连接好的设备列表确保飞行模式是关闭的如果是使用真机来开发，输入 adb reverse tcp:8081 tcp:8081来检查设备解决方法1、首先检查包服务器是否运行正常。
2021-05-10 17:47:37
11
原创 ReactNative进阶（十九）：React Native按钮Touchable系列组件使用详解
文章目录前言TouchableWithoutFeedback使用详解TouchableHighlight使用详解TouchableOpacity使用详解TouchableNativeFeedback使用详解前言在做RN App开发过程中离不了用户交互，在React Native中没有专门的按钮组件。为了让视图能够响应用户的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，以下四个组件都可以用来包裹视图来响应
2021-05-10 15:59:54
16
原创 ReactNative进阶（十八）：[Android] TypeError: expected dynamic type int64‘, but has type ‘null‘
文章目录问题描述问题分析解决措施问题描述在RN开发过程中，项目运行在android平台时报如下错误信息：TypeError: expected dynamic type int64', but has type 'null'初次接触该类型问题，一脸懵。问题分析{ (()=>{ return this.state.data.length? [<Text key={"title"} style={{textAlign: "center", color: "#
2021-05-10 12:26:06
17
1
原创 ReactNative进阶（十七）：RefreshControl组件实现刷新效果
文章目录一、简介二、API三、应用示例一、简介刷新功能在数据更新的时候很常用，它对用户有一个非常明显的数据正在更新的提示信息。ReactNative中提供了RefreshControl组件来实现这个刷新功能。RefreshControl组件可以用在ScrollView或ListView内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。二、API它是跨平台的组件，提供的属性如下：//视图下拉开始刷新时调
2021-05-10 10:35:54
79
1
原创 ReactNative进阶（十六）：React-Native 组件生命周期
文章目录概述一、组件的生命周期1.1 创建阶段1.2 实例化阶段1.3 运行（更新）阶段1.4 销毁阶段二、生命周期函数详细介绍constructorgetDefaultPropscomponentWillMountrendercomponentDidMountcomponentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdatecomponentWillUnmount三、完整样例四、总结概述所谓生命周期，
2021-05-08 15:02:43
27
原创 ReactNative进阶（十五）：react-native-tab-navigator实现底部导航栏
1.引入react-native-tab-navigator使用npm i react-native-tab-navigator --save引入tab库，目前最新版本为0.3.4。接着，我们在MainScreen类中将Tab控件import进来，具体代码如下：import TabNavigator from 'react-native-tab-navigator';export default class MainScreen extends Component { render() {
2021-05-08 10:03:20
25
原创 ReactNative进阶（十三）：Could not resolve all dependencies for configuration ‘:app:debugRuntimeClasspath‘
在RN开发过程中，执行react-native run-android命令之后，报如下错信息：Error:Could not resolve all dependencies for configuration ':app:debugRuntimeClasspath'解决措施在项目的build.gradle 文件buildscript 和 allprojects节点同时加上 mavenCentral() google() 即可。// Top-level build file where you c
2021-05-07 14:37:52
26
3
原创 ReactNative进阶（七）：导航组件react-navigation
前言在RN项目开发过程中，经常会看到如下形式的路由跳转。render() { return ( <View> <Text>2</Text> <Button title = "跳转到指定的页面" onPress = {() => this.props.navigation.push('ChangePassword')} /> <Bu
2021-05-07 11:04:18
82
2
原创 ReactNative进阶（一）：ReactNative学习资料汇总
序目前主流的移动跨平台技术方案大体可以分为三类，使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和轻快应用；使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。对于其他的浏览器方案，基本可以抛弃了，相比较React Native和Flutter，React Native和Flu.
2021-05-07 10:59:30
17
原创 ReactNative进阶（十四）：初探Gradle
Java世界中主要有三大构建工具：Ant、Maven和Gradle。经过几年的发展，Ant几乎销声匿迹、Maven也日薄西山，而Gradle的发展则如日中天。Maven的主要功能主要分为五点：依赖管理系统、多模块构建、一致的项目结构、一致的构建模型和插件机制。我们可以从这五个方面来分析一下Gradle优于Maven的先进之处。依赖管理系统Maven为Java世界引入了一个新的依赖管理系统。在Java世界，可以用groupId、artifactId、version组成的Coordination（坐标）唯
2021-04-28 16:15:26
20
原创 ReactNative进阶（十三）：使用prop-types进行属性确认（必要属性验证、类型验证）
一、基本介绍1，属性确认的作用使用 React Native 创建的组件是可以复用的，所以我们开发的组件可能会给项目组其他同事使用。但别人可能对这个组件不熟悉，常常会忘记使用某些属性，或者某些属性传递的数据类型有误。因此我们可以在开发 React Native 自定义组件时，可以通过属性确认来声明这个组件需要哪些属性。这样，如果在调用这个自定义组件时没有提供相应的属性，则会在手机与调试工具中弹出警告信息，告知开发者该组件需要哪些属性。注意：为了保证 React Native 代码高效运行，属性确认
2021-04-27 14:50:25
17
原创 ReactNative进阶（十二）：本地存储-AsyncStorage及Realm使用
前言数据持久化一直都是软件开发中重要的一个环节，几乎所有的应用都具备这一项功能；那什么是数据持久化呢？—— 说白了就是数据的本地化存储，将数据存储到本地，在需要的时候进行调用。本文介绍两种在 React-Native 中比较常用的存储方式：AsyncStorage及Realm。AsyncStorage：官方使用的存储方式，类似于 iOS 中的 NSUserDefault ，区别在于，AsyncStorage 只能存储字符串键值对，而 NSUserDefault 可以存储字符串和number。Rea
2021-04-26 17:39:12
27
原创 ReactNative进阶（十一）：realm 数据库
realm 是一款专为移动端开发的高性能数据库，其宣称自己是最快的 react-native 数据库。realm 优点如下：简单易用；跨平台；快速，性能优越；提供高级功能。realm 核心数据引擎用 C++ 打造，并不是建立在 SQLite 之上的 ORM。因此性能就是比普通的 ORM 要快很多，甚至比单独无封装的 SQLite 还要快。同时因为是ORM，本身在设计时也针对移动设备（iOS、Android），所以简单易用，学习成本很低。一、安装依赖npm i -S realmreac
2021-04-26 17:20:01
17
原创 ReactNative进阶（十）：网页组件（WebView）的使用详解
一、WebView组件介绍使用 WebView 组件我们可以通过 url 来加载显示一个网页，也可以传入一段 html 代码来显示。下面对其主要属性和方法进行介绍。1. 主要属性source：在 WebView 中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）；automaticallyAdjustContentInsets：设置是否自动调整内容。格式：bool；contentInset：设置内容所占的尺寸大小。格式：{top:number,left:num
2021-04-26 15:56:51
17
原创 ReactNative进阶（九）：API学习---注册组件AppRegistry
AppRegistry简介每一个应用程序的运行都需要有一个入口文件或者入口函数，而在React Native 中，AppRegistry是RN应用的入口函数。AppRegistry负责注册运行React Native应用程序的JaveScript入口，程序入口组件使用AppRegistry.registerComponent来注册。当注册完应用程序组件后，Native系统（OC）就会加载jsbundle文件并触发AppRegistry.runApplication运行应用。AppRegistry有以下方
2021-04-26 15:00:50
19
原创 ReactNative进阶（八）：redux在react-native上的connect使用
普通写法原来在组件中connect连接redux的写法是:import { connect } from 'react-redux';import { start, stop, reset } from './actions';class Home extends Component { ... // dispatch一个action this.props.dispatch(reset()); ... const mapStat
2021-04-26 13:47:01
20
原创 ReactNative进阶（六）：ReactNative语法学习
前言对于第一次接触ReactNative的同学，最痛苦的是什么时候使用{}，什么时候使用(),当然我也经历过那段时间，为此简单总结了下。ReactNative中，使用表达式的时候需要用{}包住；style={styles.mainStyle}ReactNative中,在字符串中使用变量的时候，需要用{}包住;var str = 'hello'<Text>{str}</Text>ReactNative中，对象，字典需要用{}包住;style = {},
2021-04-22 19:31:55
20
原创 网站开发进阶（六十）：Javascript追加style样式
前言在前端开发过程中，会遇到js实现业务逻辑的时候代码式追加元素样式的应用场景。思路1、通过拼接cssText方式实现。2、通过设置class，累加设置class方式实现 。代码示例1、第一种方式可以应用下面函数实现，el表示待追加样式的dom节点，strCss表示待追加的样式。function setStyle(el, strCss){ function endsWith(str, suffix) { var len = str.length - suffix.len
2021-04-22 15:47:09
19
原创 Vue进阶（幺捌零）：JS向Vue传值
前言项目开发过程中，组件通过render()函数渲染生成，并在组件内部定义了自定义拖拽指令。自定义拖拽指令规定了根据用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。另一个逻辑处理页面由Vue实现，该页面可以实时展示元素相关属性信息（包括size、width、height及left、top等属性）。思路监听器方式实现；Vuex state实现;代码实现.js// 鼠标按下事件el.onmousedown = function (e) { ... document.onmouseu
2021-04-22 15:46:43
32
原创 Vue进阶（幺捌肆）：CodeMirror应用小结
前言CodeMirror支持在线编辑代码，风格包括js, java, php, c++等等100多种语言。能够做到代码自动补全，代码折叠，可配置键盘事件，支持vim， emacs， sublime text 编码风格、能完成查找替换，括号匹配，分栏显示，显示行号，自行配置字体大小和风格等。应用下载codemirrornpm install vue-codemirror --savemain.js引入：import VueCodeMirror from 'vue-codemirror'.
2021-04-22 15:45:57
13
原创 Vue进阶（幺捌伍）：应用qs插件实现参数格式化
在vue项目开发过程中，使用axios请求后台时，后台无法获取前端传参数据。qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。1、安装npm install qs2、在组件中应用import qs from 'qs'或定义为全局组件：//在main.js引入qs import qs from 'qs' //配全局属性配置，在任意组件内可以使用this.$qs获取qs对象 Vue.prototype.$qs = qs3、具体应用主要使用qs.parse(),
2021-04-22 15:45:33
22
原创 Vue进阶（幺捌陆）：异步请求导致页面数据渲染错误问题解决措施
场景描述在Vue项目优化过程中，页面部分应用JS调用promise返回的异步数据，导致页面部分始终无法加载后台返回的数据值。通过触发其他DOM操作（例如折叠栏位的操作），后台数据可以正常渲染展示。处理逻辑大致如下：<template> <div v-for="(items, index) in results" :key="items.itemsID"> <span v-for="(item, index) in items.appendItems" :key="it
2021-04-22 15:44:38
29
原创 Vue进阶（幺玖零）：表单验证时，trigger:‘blur‘ OR trigger:‘change‘
前言利用elementUI实现表单元素校验时，出现下拉框内容选中后校验不消失的异常校验情形。通过去除校验规则中相应元素的trigger:'blur'属性，可解决以上问题。至于表单校验时，校验元素trigger属性值的选择，需要继续深究。若不设置trigger属性，该属性是否有默认值？表单验证时，trigger:‘blur’ OR trigger:‘change’ OR 不设置？对el-input输入框的验证，trigger的值选blur，即失去焦点时进行验证。下拉框（el-selec
2021-04-22 15:44:07
26
原创 ReactNative进阶（四）：ReactNative原理剖析之JS 层渲染之 diff 算法
在ReactNative启动完成之后，就会加载jsbundle中的js代码，进入js层渲染。为什么讲 ReactNative JS 层渲染，重点讲 diff 算法呢？使用 React 写过 Web 和 ReactNative的，能很明显感觉到：除了组件命名不一样之外，生命周期、刷新机制等几乎是完全一样的，这也就是 Facebook 所说的“learn once, write anywhere”，只要会写 React，就能无压力同时开发 Web 和 ReactNative。而 React 框架相对于传统
2021-04-22 15:43:03
16
原创 网站开发进阶（六十七）浅谈css中hsl()和hsla()设置颜色值的方法与应用
实例定义 HSL 颜色：#p1 {background-color:hsl(120,100%,50%);} /* 绿色 */#p2 {background-color:hsl(120,100%,75%);} /* 浅绿 */#p3 {background-color:hsl(120,100%,25%);} /* 暗绿 */#p4 {background-color:hsl(120,60%,70%);} /* 柔和的绿色 */定义与用法hsl() 函数使用色相、饱和度、亮度来定义颜色。H
2021-04-13 14:49:54
155
4
原创 网站开发进阶（六十三）详解CSS3中的calc()
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。.foo { width: calc(100px + 50px);}如果你使用过 CSS 预处理器，比如 SASS，以上示例你或许碰到过.foo { width: 100px + 50px;}// Or using SASS variables$width-one: 100px;$width-two: 50px;.bar {
2021-04-13 14:49:28
181
原创 Vue进阶（幺捌叁）：IE9兼容性问题-数据初始化问题
前言在Vue项目开发过程中，以父子组件的形式进行页面调用，在测试过程中发现IE9下，子组件中定义初始化数据dataA=0，执行异步逻辑A，在异步请求方法前，输出dataA结果为0，请求结束后时，后台返回值将dataA赋值为1，输出dataA结果为1。再次触发子组件同样事件，但后台请求结果不满足赋值条件，对dataA不做赋值操作，发现在异步请求方法前后，输出dataA结果为1！伪码如下：data () { return { dataA: 0 }}<script> methods
2021-04-13 14:48:55
141
原创 Vue进阶（幺捌贰）：父子组件元素获取、方法互相调用
场景复现在项目开发过程中，通过父子组件方式嵌套项目本身页面，在加载到子组件页面时，对子组件页面元素操作，发现document.getElementsByClassName(className)报空数组。原因分析解决方法
2021-04-13 14:47:45
132
原创 Vue进阶（幺捌幺）：element中select多选，数据回显错误的问题解决方法
前言在项目开发过程中遇到这样一个问题，新建表单时用element的select多选以后，在编辑的时候打开表单发现其他组件数据能正常显示，多选却无法正常回显。表单代码如需：<el-select v-model="textForm.receDeptIds" multiple filterable allow-create default-first-option @change="changeSelect
2021-04-13 14:47:15
126
原创 网站开发进阶（六十一）详解js中Number()、parseInt()和parseFloat()的区别
本文主要对js中Number()、parseInt()和parseFloat()的区别进行详细介绍。Number()Number() 函数把对象(Object)的值转换为数字。语法Number(object)参数描述object必需，JavaScript 对象。如果是Boolean类型，true和false值将分别被转换为1和0。如果是数字值，只是简单的传入和返回。如果是null值，返回0。如果是undefined，返回NaN。如果是字符串：
2021-04-13 14:46:47
91
原创 Vue进阶（幺柒捌）：延伸阅读Sass、Scss、Less与Stylus编程特性
1.混合(Mixins)Mixins是CSS预处理器语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。Sass的混合
2021-04-13 14:46:13
112
dubbo-monitor-simple-2.5.3.zip
2018-04-29
Vue下textarea文本框根据内容自适应改变高度
2020-10-20
ZMQ的三种通信方式极其需要的jar包（完整版）
2015-06-06
BackToTop.zip
2019-11-05
Icon制作神奇-Greenfish Icon Editor3.31官方中文版
2017-04-25
dubbo-admin-2.5.4 Web管理平台.zip
2018-04-29
利用正则表达式批处理含链接内容文档
2015-11-30
Chart.js实现饼状图添加文字
2017-08-28
w3c标准html5手册
2017-08-28
json解析工具包
2015-07-23
No Silver Bullet的留言板
发表于 2020-01-02 最后回复 2020-03-22
Redis面试题
发表于 2019-08-23 最后回复 2019-08-25
Oracle中ddl与dml的区别
发表于 2019-08-23 最后回复 2019-08-23
谁是第3w [face]monkey2:012.png[/face]
2021-03-24
学无止境[face]monkey2:005.png[/face]
2021-03-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人 TA的粉丝