前端 - 简忆博客

解决苹果ios手机下select标签和input标签显示问题

2020-09-01 前端

手机端页面在苹果ios下select标签和input标签显示颜色很奇怪？而安卓上显示没问题。出现这个问题的原因：因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式input[type=datetime-local]{ ;;;;;;-webkit-appearance:none; ;;;;;;outline:none; ;;;;;;border:none; } select{ ;;;;-webkit-appearance:;none;;;/*这样select默认的样式就没有了，后面的箭头也没有了，自己找个图标添加进去就可以了*/ ;;;;padding-right:30px;;;;;/*给右边图标留位置*/ ;;;;background:;url("arrow.png");no-repeat;

html,css 如何设置input的placeholder样式

2020-08-31 前端

3340 0

html,css 如何设置input的placeholder样式，在做前端开发时，如果想写对input设置字体，文字大小，颜色等，我们该如何设置呢？通过如下设置兼容主流浏览器：-webkit-input-placeholder; ;;/* WebKit browsers */input::-moz-placeholder;;/* Mozilla Firefox 19+ */input::-ms-input-placeholder /* Internet Explorer 10+ */以下是个简单的例子，对input设置字体颜色和字体大小，如果需要其他的样式，加入即可。.rj_zyyform;input::-webkit-input-placeholder;{;/*;WebKit;browsers;*/ ;;color:;#7f7f7f; ;;font-size:;0.96rem; }

JavaScript实现console控制台显示彩色文字，版权信息方法

2020-08-26 前端

3788 0

介绍这个方法之前我们来看下百度的控制台，打开百度网页https://www.baidu.com 按下F12,选择console控制台，可以看到很有趣的百度招聘信息。再来看下大家耳熟的B站https://www.bilibili.com/其次打开博主的网站控制台：可以看到网站名称，qq等信息。看到这里是不是很有趣，我们来看看如何弄这种效果。主要用到这句代码：window.console;&&;(console.groupCollapsed("%c简忆博客",;"color:#FF6666;;font-size:;20px;;font-weight:;300"),console.groupEnd())console.groupCollapsed()方法表示折叠信息组的开始

Layui表格table关闭拖拽列宽、禁用拖拽列宽

2020-08-25 前端

7929 0

table 模块是Layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。我们在使用过程中，如果需要关闭Layui表格table拖拽列宽、禁用拖拽列宽，可以用到unresize参数：是否禁用拖拽列宽（默认：false）。默认情况

Layui table表格数据接口返回更改

2020-08-25 前端

6324 0

Layui数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为默认规定的数据格式layui.code{ ;;"code":;0, ;;"msg":;"", ;;"count":;1000, ;;"data":;[{},;{}] }很多时候，接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：{ ;;"status":;0, ;;"message":;"", ;;"total":;180, ;;"data":;{ ;;;;"item":;[{},;{}] ;;} }则可以借助

echarts生成世界地图，百度echarts生成世界地图方法

2020-08-23 前端

8009 0

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了已经内置的包含了丰富功

echarts生成中国地形图，中国地图数据统计

2020-08-23 前端

8026 0

基于echarts实现中国地图显示，省份区域地区鼠标悬停显示区域数据，数据从低到高，显示不同的颜色，主要用于数据统计。效果如下图所示：步骤1：引入相关地图文件引入 echarts.min.js 和 china.js附件下载及案例：扫码关注“简忆博客”，回复“echartcn”，获取。步骤2：用于存放地图的盒子<div;id="region";style="width:;700px;height:600px;"></div> 步骤3：js实例化代码:<script> var;myChart2;=;echarts.init(document.getElementById('region')); ;;;;var;option2;=;{ ;;;;;;;;backgroundColor:;'#FFFFFF', ;;;;;;;;t

flutter常见命令整理收藏

2020-07-01 前端

3383 0

1、帮助命令：flutter -h2、显示本机的模拟器：flutter emulators3、启动本机的模拟器：flutter emulator --launch apple_ios_simulator4、远程更新package：flutter packages get5、运行应用到模拟器上：flutter run6、热重载：先保存代码ctrl+s,，然后在 terminal中输入r，执行后界面内容更新7、停止运行：ctrl+zVSCode中常用的快捷键R 键重新启动r 键热重载q 退出p 显示网格P 显示帧率o 切换Android与iOS的预览模式

flutter搜索功能实现

2020-07-01 前端

8778 0

搜索功能在每个app里面必不可少，也是常见的功能，以下是个案例。效果图展示：说明：本功能实现，点击搜索框跳转至搜索页面，搜索联想功能import;'package:flutter/material.dart'; import;'detail_page.dart'; ; class;HomePage;extends;StatefulWidget{ ;;_TvPageState;createState();=>;_TvPageState(); } ; class;_TvPageState;extends;State<HomePage>;with;AutomaticKeepAliveClientMixin{ ;;@override ;;void;initState(){ ;;;;super.initState(); ;;} ;;@override ;;Widget;build(BuildCon

flutter页面间跳转和销毁方法

2020-07-01 前端

6761 0

1、push方法：直接跳转到下个页面，可以传递参数Navigator.of(context).push( ;;;;new;MaterialPageRoute(builder:;(BuildContext;context);{ //TextWdigetPage要跳转的页面 //title要传递的参数 ;;;;;;return;TextWdigetPage(title:;"传递的参数"); ;;;;})) ; ),或者Navigator.push(context, ;;;;new;MaterialPageRoute(builder:;(BuildContext;context);{ ;;;;;;return;TextWdigetPage(title:;"传递的参数"); ;;;;}) )2、页面的销毁：跳转后的操作，route == null 为销毁当前页面Navigator.pushAndRemov

futter页面跳转，列表跳转至详情页介绍

2020-07-01 前端

3908 0

1、使用InkWell（）包裹元素，onTap(){}点击跳转onTap:;(){ ;;Navigator.of(context).push( ;;;;;MaterialPageRoute(builder:;(context)=>DetailPage( ;;;;;eachVodId:;val['id'], ;;;;;eachVodName:;val['vod_name'], ;;;;;p:1 ;;;;;)) ); }1.1、demo代码：;;;;;;return;InkWell( ;;;;;;;;onTap:;(){ ;;;;;;;;;;Navigator.of(context).push( ;;;;;;;;;;;;;;MaterialPageRoute(builder:;(context)=>DetailPage( ;;;;;;;;;;;;;;;;;;eachVodId:;val['id'], ;;;;;;;;;;;;;;;;;;eachVodName:;val[

flutter网络编程之dio封装

2020-07-01 前端

5364 0

一、添加依赖pubspec.yamldependencies: dio:;^3.0.9二、dio封装2.1、创建http_service.dart文件（/lib/service/http_conf.dart），用于dio请求封装import;'package:dio/dio.dart'; import;'dart:async'; import;'dart:io'; import;'../config/index.dart'; import;'../config/http_conf.dart'; ; Future;request(url,{formData})async{ ;;try{ ;;;;Response;response; ;;;;Dio;dio;=;new;Dio(); //;;;;dio.options.contentType;=;ContentType.parse('application/x-www-form-url

Flutter视频播放器推荐

2020-07-01 前端

8202 0

fijkplayer 是一个 Flutter 生态的媒体播放器，是对 ijkplayer 的 Flutter 封装，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作为播放器内核。ijkplayer 使用 ffmpeg 进行音视频解封装和解码，同时添加了 Android 和 iOS 平台特有的硬件加速解码能力。;fijkplayer 具有和 ijkplayer 一样的播放能力，并且开箱即用，不需要使用者再去编译 ijkplayer，API易用，易于在 Flutter 项目中集成。;fijkplayer 通过纹理方式将播放器视频画面渲染接入 flutter 中，性能上优于 PlatformView 的接入方法。 fijkplayer 有内置的编译好的ffmepg

Flutter使用 Wakelock 插件控制屏幕常亮方法

2020-06-25 前端

6821 0

有时我们在播放视频是需要使屏幕处于常亮状态，这时可以使用Wakelock 插件。;wakelock在android的电源管理系统中扮演一个核心的角色，wakelock是一种锁的机制, 只要有task拿着这个锁, 系统就无法进入休眠, 可以被用户态进程和内核线程获得。这个锁可以是有超时的或者是没有超时的, 超时的锁会在时间过去以后自动解锁。如果没有锁了或者超时了, 内核就会启动标准linux的那套休眠机制机制来进入休眠。github介绍：https://pub.flutter-io.cn/packages/wakelock安装使用说明：1、添加到pubspec.yaml 文件dependencies: ;;wakelock:;^0.1.4+1

Flutter学习修改app名称和icon图标

2020-06-25 前端

3776 0

一个app应用开发到最后，也就剩下上线的步骤了，上线之前除了测试之外还有一个重要的步骤也就是app信息的修改，最近笔者刚好做好了app，以下记录下个人人修改app应用信息和图标流程，供大家参考一、图标icon修改1.1、android应用icon修改（路径：项目/android/app/src/main/res）把各个文件夹下图片换成你想要的尺寸，还有格式必须是.png后缀。1.2、iso应用图标icon修改：（路径：项目/ios/Runner/Assets.xcassets/AppIcon.appiconset/）注意：ios应用图标必须是圆角透明png图标，相比安卓，安卓只需png图标，不需要圆角。二、修改应用名

android studio flutter打包，踩坑，填坑详细过程。

2020-06-25 前端

5477 1

笔者第一次学flutter,踩坑不少，填坑也不少，不得不说官网在打包的这块留太多坑了。以下是笔者做好flutter项目中遇到的一些问题。一、SDK篇1、修改flutter.gradle 和;resolve_dependencies.gradle路径：flutter/packages/flutter_tools/gradle/flutter.gradle;;;;;;;;;;flutter/packages/flutter_tools/gradle/resolve_dependencies.gradle1.1、flutter.gradle文件修改buildscript部分buildscript;{ ;;;;repositories;{ ;;;;;;;;maven;{;url;'https://maven.aliyun.com/repository/google';} maven;{;url;'https://maven

mac flutter 环境搭建、安装教程记录

2020-06-24 前端

3272 0

本文主要说的是mac系统下的flutter环境安装。如果是window系统的伙伴，可以参考另一篇文章：Win10下 Flutter环境完整安装记录、教程安装步骤说明：1.打开终端，cd到你要安装的目录2. 下载flutter：;git;clone;-b;beta;https://github.com/flutter/flutter.git3.下载好flutter后就在当前目录下执行： export PATH=`pwd`/flutter/bin:$PATH;或者：此代码只能暂时针对当前命令行窗口设置PATH环境变量，要想永久将Flutter添加到PATH中,需要修改 .bash_profile 文件vim;~/.bash_profileexport;PATH=/Users/huipu/Downloads/work/flutter/bin:$P

解决Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/问题

2020-06-24 前端

5293 0

mac终端执行flutter -h命令后，出现过Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/flutter/91a63d6a44c56ca13baadccedc46fd66b001fdbc/dart-sdk-darwin-x64.zipIf you're located in China, please see this page:; https://flutter.dev/community/china 这个问题。解决办法执行flutter -h之前，先执行一下命令export;PUB_HOSTED_URL=https://pub.flutter-io.cn export;FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn成功之后：

Win10下 Flutter环境完整安装记录、教程

2020-06-10 前端

4152 0

本文主要说的是win10系统下的flutter环境安装。如果是mac系统的伙伴，可以参考另一篇文章：mac flutter 环境搭建、安装教程记录flutter开发SDK使用git克隆仓库下载。至于git的使用不是本篇文章介绍的内容，不熟悉git的请移步git使用详细教程一、下载flutter在git命令行下输入如下命令：git;clone;-b;alpha;https://github.com/flutter/flutter.git 注意: flutter的下载路径要全英文并且路径不能有空格！执行完命令后等待下载即可。二、配置环境变量在系统环境变量path中添加刚刚下载的flutter的路径。将bin文件路径添加至path中Win10添加