MDistance-CSDN博客

原创 vue-cli3安装使用

Vue-cli 3安装及使用vue-cli安装vue-cli创建项目自定义脚手架vue-cli3.0添加插件方法vue-cli安装使用下面的命令安装vue-cli3npm install -g @vue/cli# ORyarn global add @vue/cli安装完成，检查vue版本vue -V可以通过一下命令查看vue3.x对应的命令vue --help# ORv...

2019-01-15 18:37:42 18825

原创形状-平行四边形

平行四边形是矩形的超集，我们可以通过 skew() 的变形属性把一个普通的块状按钮进行斜向的拉伸，从而形成一个平行四边形。<div href="#" class="button">Click me</div>.button { background: #FAC; transform: skewX(-45deg); text-align: ce...

2018-09-21 14:09:57 1370

原创形状-自适应椭圆

自适应椭圆根据内容自适应宽高，如果宽高相等，显示为一个圆，宽高不等显示为椭圆，如下图所示：自适应椭圆实现想要达到上图所示的效果，我们必须先了解border-radius 的两个特性border-radius可以单独指定水平和垂直半径，只要用一个斜杠（ /）分隔这两个值即可。这个特性允许我们在拐角处创建椭圆圆角。#circle{ background: hsl(49, ...

2018-09-21 11:18:50 568

原创 ScrollView嵌套listView、Gridview问题

今天在做项目的过程中，遇到了内容过多需要滚动的情况，于是我在布局外面嵌套了一层scrollView，由于里面使用了ListView以及GridView，测试的时候出现了一个问题：ListView和GridView只展示一行的高度解决思路：重写高度测量方法，重新设置高度...

2018-06-29 08:59:10 189

原创 Gson实现复杂json字符串转bean

Gson实现复杂json字符串转bean要解析的数据[ { "airCondition": "良", "city": "保定", "coldIndex": "易发期", "date&quot

2018-06-28 17:40:57 8437 1

原创 AndroidStudio ShareSDK集成

shareSDK集成MOD官网为开发者提供很多的服务，包括推送服务（MobPush）、社会化分享服务（ShareSDK）、手机短信验证功能（SMSSDK）、即时聊天功能（MobIM）、各种常用数据服务（MobAPI）等多种服务。本文主要介绍ShareSDK的集成问题。在官网注册并登录后，创建应用，并记住Appkey 以及App Secret，后面的配置会用到。一、配置gradle 1...

2018-06-25 16:21:22 1222

原创 Android“再按一次退出程序”实现

为了降低用户误操作退出程序的概率，很多应用都会采用“再按一次退出程序”的方式来处理。实现原理下图所示：实现方式如下：private long exitTime = 0;@Override public void onBackPressed() { if ((System.currentTimeMillis() - exitTime) > 2000) {...

2018-06-25 15:32:54 194

原创 AndroidStudio代码混淆

Android混淆基本配置android { buildTypes { release { // 是否进行混淆 minifyEnabled true //Zipalign优化 zipAlignEnabled true // 移除无用的resourc...

2018-06-25 14:51:59 158

原创错误日志收集-Bugly集成

Bugly是腾讯提供的专业Crash、Android ANR、ios卡顿解决方案，24小时实时监控和告警，可以及时发现异常问题。Bugly Android SDK 使用自动集成方式（推荐）android { defaultConfig { ndk { // 设置支持的SO库架构 abiFilters 'arme...

2018-06-25 11:51:20 1198

原创 Vue.js前端开发笔记--Vue.js基础特性(2) 之计算属性

计算属性我们展示的数据汪汪需要经过一定的处理，除了在模板中使用绑定表达式或者使用过滤器外，Vue.js还提供了计算属性，避免在模板中加入过多的业务逻辑，保证了模板结构的清晰和可维护性。在Vue.js中，所有的计算属性都定义在computed 中基础示例：&amp;lt;span&amp;gt;{{fullName}}&amp;lt;/span&amp;gt;var vm = new Vue({ el:...

2018-06-11 14:35:43 249

原创复杂背景——棋盘

棋盘背景上图貌似可以在CSS中很容易重现出来，只要创建两个不同背景定位的方块就可以了，但是并非如此，我们没有办法使用渐变创建一个四周有空隙的方块。解决方式：我们可以通过两个直角三角形拼接成，首先我们线创建一个直角三角形，并把它的直角边缩小.div_bg{ background: #eee; background-image: linear-gradient(45...

2018-06-08 15:28:02 536

原创 Vue.js前端开发笔记--Vue.js基础特性(2) 之数据绑定

数据绑定Vue.js是一个数据驱动视图的框架，它的核心是一个响应式的数据绑定系统，建立绑定之后，DOM将和数据保持同步，不需要手动维护DOM，使代码更简洁易懂，提升开发效率。数据绑定语法1.文本插值数据绑定最基础的形式就是文本插值，使用双大括号标签 {{}},为Mustache语法单次插值：首次赋值后再更改vm实例属性值不会引起DOM变化{{*}}&amp;amp;lt;span&amp;amp;...

2018-06-08 13:47:34 241

原创 Vue内置过滤器

1.capitalize：字符串首字符转大写 2.uppercase：字符串转大写 3.lowercase：字符串转小写 4.currency：将数字转化为货币符号，并且自动添加数字分节号参数 {String}[货币符号], {Number}[小数位]{{amount | currency '$' 2}}...

2018-06-08 13:29:38 2947

原创 Vue.js前端开发笔记--Vue.js基础特性(1)

MVVM模式Vue.js的使用是通过构造函数来创建Vue的实例，一个Vue实例相当于一个MVVM模式中的ViewModel。var vm = new Vue({}) 可以在实例化的时候传入一个选项对象，包括数据、模板、挂载元素、生命周期钩子、方法等。模板el：类型为字符串、DOM元素或函数。 template ：类型为字符串，默认会将template值替换挂载元素(el值对...

2018-06-08 12:27:20 430

原创复杂背景——波点

波点背景我们首先使用径向渐变创建一个圆点阵列background: white;background-image: radial-gradient(rgba(200,0,0,.5) 30%, transparent 0);background-size: 50px 50px;效果如上图所示，显然这不是我们想要的结果，我们可以生成两层圆点阵列，通过背景定位把他们错开这样就可以...

2018-06-06 14:32:29 1080

原创复杂背景——网格

网格背景当我们把多个渐变图案组合起来，透过彼此的透明区域显示时，会出现很神奇的效果。下图看起来像是一张方格纹图案的桌布，通过这个思路我们可以把半透明的垂直和水平条纹叠加起来，从而得到这种网格。 1.普通网格背景首先，我们先绘制水平条纹background-image: linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);...

2018-06-06 13:58:27 1102

原创同色系条纹

CSS实现同色系条纹在大多数情况下，我们使用的条纹并不是颜色相差较大的几种颜色组成的，往往是属于同色系的。例如实现下图所示的条纹图案实现方式：background: repeating-linear-gradient(30deg, #79b, #79b 30px, #58b 0, #58b 60px);不足：使用了两个同色系的...

2018-06-06 10:34:49 304

原创斜向条纹

斜向条纹在前面我们已经实现过CSS条纹背景，利用前面的方法，想要实现60°，30°或者其他角度的斜向条纹是非常困难的。这里我将介绍更加灵活的实现斜向条纹的方式。repeating-linear-gradient()repeating-linear-gradient是css3背景色的一个新属性：重复渐变，可以非常容易的实现隔行变色的效果。语法background:repe...

2018-06-06 10:08:17 1604

原创 CSS3实现条纹背景

条纹背景水平条纹1.我们先创建一个渐变背景background: linear-gradient(#fb3, #58a);2.逐渐拉近两个色标，当两个色标重合在一起，效果如图所示background: linear-gradient(#fb3 50%, #58a 50%); 如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最...

2018-06-06 09:23:04 3451

原创 CSS实现边框内圆角

CSS实现边框内圆角实现如图所示效果的两种方式: 1. 利用两个元素实现利用一个元素实现快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q插入链接 Ctrl + L插入代码 Ctrl + K插入图片 Ctrl + G提升标题 Ctrl + H有序列表 Ctrl + O无序列表 ...

2018-06-05 14:02:01 11841

原创 CSS背景定位

灵活的背景定位问题针对某一个特定容器的某一个角对北京做偏移定位background-position方案CSS3中对background-position属性进行了扩展，允许我们指定背景图片距任意角的偏移量，只要在偏移量前面指定关键字即可。.div_bg{ height: 200px; width: 200px; ...

2018-06-05 13:20:51 989

原创多重边框

CSS3多重边框box-shadow方案box-shadow属性介绍利用box-shadow属性实现多重边框 box-shadow的第四个属性称为“扩张半径”，通常指定正值或负值，来控制投影面积的增大或减小，若将垂直和水平的阴影位置置为0，加上一个正值的扩张半径，那么看起来就像一个实线边框，我们也可用border属性实现相同的效果。 box-shadow的优点在于它支持逗号分隔...

2018-06-04 14:15:11 374

原创 box-shadow属性

box-shadow属性语法box-shadow: h-shadow v-shadow blur spread color inset;默认值 none 值描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread...

2018-06-03 17:35:21 1044

原创半透明边框

半透明边框background-clip属性浏览器支持： IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。注释： Internet Explorer 8 以及更早的版本不支持 background-clip 属性。默认值：border-box语法background-clip: border-...

2018-06-03 17:34:54 196

Mi的博客