- 博客(28)
- 收藏
- 关注
RSS订阅原创 实现一个自适应图片列表
如图，实现一个自适应图片列表，屏幕小于1366放每行3个，屏幕大于1366小于1700每行放四个，屏幕大于1700每行放五个。随着屏幕的变化图片按等比缩放（4:3）。详情查看https://juejin.cn/post/6990520699483848712...
2021-07-30 09:40:53
284
原创 基于等比缩放的大屏自适应方案
前端的数据可视化越来越重要，炫酷大屏的需求越来越多，您是否经常为屏幕不能自适应而烦恼？如何高度还原设计稿？如何在多种终端都呈现完美效果？也许本文可以给您带来帮助https://juejin.cn/post/6966103143402700837...
2021-07-30 09:38:57
475
原创 前端导出功能在ie11中的兼容问题解决
ie文件导出,1.遇到在IE中展示数据的时候报错。strict模式下不允许分配只读属性。经检查之后发现是使用document.createElement方法创建的元素直接使用.style = 'xxx' 进行样式属性的设置造成的。解决方法：设置样式为 ele.style.styleName = val; 的形式2. 报Unhandled promise rejection Error: 拒绝访问。是由于代码执行到click函数抛异常了.解决方法：...
2020-10-14 16:59:08
518
原创 background-clip和background-origin 详解
<div class="box border-box"/><div class="box padding-box"/><div class="box content-box"/><div class="box clip-border-box"/><div class="box clip-padding-box"/><di...
2020-01-26 20:31:56
547
转载 Echarts 解决饼图文字过长重叠的问题
Echarts 解决饼图文字过长重叠的问题转自“https://www.cnblogs.com/minjh/p/9081893.html”之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题，找了很多一直没有一个合适的解决方案，最后自己只能花时间研究echarts文档，功夫不负有心人，终于解决了文字重叠展示不全等问题。废话不多说，直接上图上代码这是手机屏幕的展示效...
2019-10-24 15:09:55
779
原创 rem+vw前端的页面自适应
前置知识：1. rem是相对于根元素也就是<html>元素的字体大小的单位。html{ font-size:12px; } p{ font-size:2rem; /*24px*/}2. vw是可视窗口的宽度单位，和百分比有点一样，1vw =可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px前端屏幕自适应方案：通过改...
2019-09-09 15:27:55
346
原创 获取和设置react native 的TextInput的光标
需求：通过按键向TextInput中输入特定字符。如图所示。问题：如何把字符插入到光标所在位置，就需要获取光标位置打印 this.refs.keywords可以找到：函数：setNativeProps用于设置光标位置。传参为{selection : { start : start, end : end}}，指定光标的开始和结束。如果start和end不能这说明start-...
2019-03-27 19:45:50
5151
1
原创 react native 键盘遮挡问题
ios：import { KeyboardAvoidingView } from 'react-native';<KeyboardAvoidingView style={styles.container} behavior="padding" enabled={Platform.OS === 'ios'} > ... 在这里放置需要根据键盘调整位置的组件 ...<...
2019-03-27 19:37:34
392
原创 现有的android工程中集成到react native
已经有两个开发完整的react native项目，和android项目。需求是在android项目中加入react native的入口。由于两个项目都是完整的，有许多配置会互相影响。如下记录采坑过程1.首先备份react native项目中的android的目录（android_BK），删掉android目录。下文要参考android_bk对现有的android项目进行配置2. 替换为...
2019-02-14 19:08:14
409
原创 安卓项目中调用react native组件，并传递参数
<React Native 混合开发(Android篇)>中介绍了，在RNHybridAndroid项目中使用react native组件有两种方式。1 通过ReactInstanceManager的方式：灵活，可定制性强； 2 通过继承ReactActivity的方式：简单，可定制性差；本节介绍如何向react native中传递参数package com.exampl...
2019-02-11 13:47:50
808
转载 React Native 混合开发(Android篇)
React Native 混合开发-Android篇创建一个React Native 项目1. 通过npm安装react-native的方式添加一个React Native项目2. 通过react-native init来初始化一个React Native项目二、添加React Native所需要的依赖第一步：配置maven第二步：配置权限第三步： 指定要ndk需要兼容的架构（重要）三、创建ind...
2019-02-11 11:24:56
8252
原创 配置本地代理转发，解决跨域问题
第一步：安装http-proxy-middleware$ npm install http-proxy-middleware --save$ # or$ yarn add http-proxy-middleware第二步：创建`src/setupProxy.js`，配置内容如下const proxy = require("http-proxy-middleware");...
2019-02-11 09:36:08
7135
转载 react native 打包APK
1.生成一个签名密钥keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000这条命令会要求你输入密钥库（keystore）和对应密钥的密码，然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.k...
2019-01-17 16:48:04
333
原创 React native 打包安卓apk，图片不显示
react native写的应用在调试模式的时候一切正常，但是生成apk后，在手机上安装图片却不显示，这说明静态文件资源没有被bundle进来。进入项目下的android目录，然后app -> src -> res，如果图片不存在这个目录下，那就要主动去bundle文件。在项目根目录下执行这条命令:react-native bundle --platform android...
2019-01-17 16:37:22
2018
原创 react-redux 中connect详解
connect的作用connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(MyComponent)connect是连接React组件与Redux store，建立组件与store.state和dispatch的映射关系。连接操作不会改变原来的组件类。返回一个新的已于Redux store连接的组...
2018-12-14 18:07:30
5710
原创 创建第一个react应用
使用create-react-app 快速构建react开发环境create-react-app 是来自于Facebook，通过该命令无需配置就能快速构建React开发环境。$ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start在浏览器中打开 http://...
2018-12-13 17:59:22
151
原创 如何设置input框，仅能能输入数字
直接上代码：<input id="startMoney" v-model="inputStartMoney" style="ime-mode:disabled;" onpaste="return false;" @input="keyPressStartMoney()"/>keyPressStartMoney
2018-12-04 10:57:33
603
原创 在h5中实现水平滚动菜单
先上样式，每点击一个菜单项，让其在滚动到中间位置。HTML： <div id="header" class="scroll-nav"> <span v-for="(item,index) in wxTopicList" v-show="wxTopicList.length" @click="choo
2018-11-09 17:52:29
1417
原创 Vue2.0 多入口配置
H5项目，一个入口用于微信，一个入口用于其他平台。设置多入口可以使登录信息，路由配置等互不干扰。目录1.首先创建app目录，分别用于存放两个入口的配置文件（不创建也行，个人感觉分开比较清晰）2.修改构建目录下的文件a.首先修改webpack.base.conf.js文件。改为多入口，对应为应用程式目录下的两个main.js文件b. 修改webpack.dev.conf.j...
2018-11-07 10:00:40
2091
1
原创 CSS3实现平行四边形
变换：skewX（-45deg）可以形成平行四边形。但是里面的内容也会跟着倾斜解决方案：嵌套元素方案：对内容再一次应用反向的歪斜（）变形，从而抵消容器的变形效果缺点是不得不使用额外的HTML元素包裹内容 div{ transform: skewX(-45deg)}div>div{ transform: skewX(45deg)}<div&...
2018-11-04 21:04:28
4047
原创 CSS3 border-radius应用实例
本文主要呈现了使用border-radius的具体案例。border-radius详解见上一篇博文《CSS3 border-radius详解》<html> <head> <style> div{ display: inline-block; height: 50px; width: 160px; border...
2018-11-04 19:58:57
429
原创 CSS3 border-radius详解
有两种方法设置元素的各个拐角1.使用边界半径的所对应的各个展开式属性，分别设置四个拐角。边框左上角半径左上角边框右上角半径右上角边框左下角半径左下角边框右下角半径右下角2.使用边界半径简写属性，从左上角开始以顺时针顺序应用到元素的各个拐角。border-radius：1-4长度 | ％ / 1-4长度 | ％ ;说明： 拐角半径的长度可以用实际长度px em...
2018-11-04 19:35:24
1852
原创 Vue中动态绑定img的src属性
问题：不同的status值，加载不同的图片，如下代码虽然动态绑定了src，但是并不能成功加载图片<div> <img :src="imgUrl"/> <p>{{info}}</p></div>computed: { imgUrl: function () { return './imgs/...
2018-10-16 18:09:06
22858
1
原创 webView在android端出现乱码问题
添加baseUrl属性解决webView在android端出现乱码问题<WebView source={{ html: this.state.content, baseUrl: ''}}/>
2018-10-16 13:45:16
448
转载 使用weinre远程调试移动设备上的网页
weinre简介weinre 是一款类似于firebug 和Web Inspector的网页调试工具， 它的不同之处在于可以用于进行远程调试，比如调试手机上面的网页。weinre的安装weinre是用node编写的，可以用npm来进行安装(前提是您的机器上已经装了node)npm install -g weinre如何运行？本地调试 ipcofig 查看本地的ipv4地址weinre --h...
2018-07-09 19:46:39
184
原创 关于elementui 中select选中值绑定为对象时，如何处理
<el-select v-model="provId" placeholder="请选择省" size="small" value-key="id"> <el-option value="" label="全部"></el-option> <el-option v-for=
2018-06-04 16:20:37
27644
12
原创 img加载失败时，限制onerror执行次数
在vue中，图片加载失败时，用onerror重复请求10次，如果还是失败，则替换为默认图片的实现html:<el-table-column prop="imageUrls" label="底库照片"> <template slot-scope="scope"> <div class="image-container" v-for
2018-05-24 11:22:52
3112
原创 mint ui picker 设置初始值
mint-ui picker 第一次加载时设置默认值按照官方文档说明并不起作用点击打开链接defaultIndex 对应 slot 初始选中值，需传入其在 values 数组中的序号，默认为 0通过查看源码，给Value设置值，即可给picker设置处值times: [ { flex: 1, values: ['上午', '下午'], c
2017-11-22 22:20:58
16391
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人