慢吞吞的树懒-CSDN博客

原创 vue3中使用Vchart

使用vue开发的web项目中使用图表，可以使用，它基于 Vue 和封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表，避免了做繁琐的数据类型转化、修改复杂的配置项。

2024-01-16 13:19:07 918

原创 Flutter应用启动时背景色改成透明色

修改Flutter应用启动时白色背景色

2022-12-06 10:49:41 1148

原创 flutter中读取sdcard里面的图片跟视频

使用flutter框架开发时,需要对系统里的文件进行读取时，需要在Android目录中添加相应的读写权限

2022-12-02 15:02:14 1317

原创 flutter一个_controller控制多个动效

flutter AnimatedBuilder

2022-10-08 16:22:06 632 1

原创 React Native使用FlatList组件实现水平滚动翻页

主要利用到以下二个方法：1、在一个onScrollBeginDrag回调方法（开始拖动时触发）中记录event.nativeEvent.contentOffset.x：X轴滚动的偏移量。2、在一个 onScrollEndDrag回调方法（拖动结束时触发）中记录event.nativeEvent.contentOffset.x：X轴滚动的偏移量。（1）若开始拖拽的偏移量 < 拖动.x，则表示向后翻页。（2）若开始拖拽的偏移量 >拖动.x，则表示向前翻页。利用onScroll滚动事件也可以

2021-01-09 12:37:06 1946

原创前端同时上传文件和相应的数据，实现与后端交互

有时候前端需要将上传的文件发送给后台，进行前后端的交互，下面是二种简单的方式：第一种方式：利用ajax<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传文件</title> </head><body> <input type="text" id="name"> <input typ

2020-12-20 22:29:12 3187

原创微信小程序使用WeUI组件库搜索组件Searchbar

WeUI 是一套同微信原生视觉体验一致的基础样式库，由于功能需求这里直接使用搜索组件Searchbar1，引入组件可以通过npm方式下载构建，npm包名为weui-miniprogram也可以通过页面按需下载2，将下载的压缩包解压，导入到小程序中（解压的目录为component）在component/searchbar.json中:{ "component": true, "usingComponents": { "mp-cells": "./cells",

2020-12-20 21:31:48 4729 1

原创微信小程序路由跳转一些注意事项

当我们需要从当前页面跳转到另一个页面时，需要用到微信路由API总结以下几种路由跳转方式：wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转，以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。注意点：不允许跳转到 tabbar 页面如果从A页面使用wx.navigateTo跳转到B页面时，然后B页面返回到A页面，这时A页面中的生命周期onLoad()方法不会被调用了，onshow()会被调用

2020-12-06 22:30:06 1244

原创微信小程序在页面，自定义组件中使用数据监听器

数据监听器可以用于监听和响应任何属性和数据字段的变化，通常会在监听到某个值的改变时去操作data中的其它属性值。在自定义组件中使用监听器：Component({ properties:{//监测传过来的属性 num: { type: String, observer: function(newVal, oldVal) { console.log('properties-num', newVal) } }, person:

2020-12-06 21:51:30 2336

原创微信小程序中动态更新样式

在微信小程序中动态更新style样式：<button bindtap="onClick" disabled="{{isDisable}}" style="display:{{isDisplay?'flex':'none'}};background-color:{{color}};border-radius:{{radius}};shadow-color:{{shadowColor}};padding:{{padding}};margin:{{margin}};fo

2020-12-06 20:59:47 638 1

原创微信小程序网络请求统一配置管理

在微信小程序开发中，对于页面中多个网络请求时需要多次调用wx.request这个接口，因此我们可以把该接口统一封装，可以减少重复代码，提高代码复用率。新建一个utils文件夹以及二个子文件service.js，api.jsutils/service.js文件中//接口请求统一封装const API_BASE_URL = "http://test/hhl/api" const request = (url,method,data)=>{ let _url = API_BASE_URL

2020-12-06 19:22:44 787

原创微信小程序引用自定义组件及传值

当多个页面需要重复使用某一功能模块时，可将该功能模块抽象成自定义组件，以便在不同的页面中重复使用。引用自定义组件：创建自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。同时也可以在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。项目目录结构：子组件的位置：components/cardItem/cardItem.js的代码如下Component({ properties: { // 这里是从父组件

2020-12-06 18:37:47 861

原创 css中几种水平垂直居中的方式

在前端开发中经常会让一个盒子模型水平，垂直居中。接下来主要是实现的几种方法1，将body中的第一个div元素水平垂直居中代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body{ backgr

2020-12-06 16:47:26 434

原创微信小程序入门介绍

微信小程序简单介绍最近公司打算把已经嵌入到微信公众号里的H5页面(施工流程管理)项目想另外再做一个微信小程序版本的，于是我边看官方文档边做项目…认识微信小程序首先，小程序类似Web，但不同于我们所认识的HTML，它有属于自己的开发语言及工具小程序与普通网页开发的区别小程序的主要开发语言是 JavaScript，同普通的网页开发来做对比两者有很大的相似性。在网页开发中，渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。

2020-12-04 23:39:17 165

原创 jquery实现加载更多“转圈圈“效果

功能：发送网络请求时等待加载的圈圈动态显示，网络请求成功后关闭提示圈圈代码：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css画动态等待转圈效果</title> <link rel="stylesheet" href="public/index.css"></head&gt

2020-11-09 15:08:30 1015

原创原生js中实现页面加载完成后，执行JS的5种方式的顺序

页面加载完成后执行js的5种方式1,2本质上没啥区别,1是2的简写方式。都是document加载完后就执行1：jQuery的(function())2：jQuery的(function (){}) 2：jQuery的(function())2：jQuery的(document).ready(function (){})3：使用jQuery对象,4使用dom对象。都是等整个window加载完后就执行3：jQuery的(window).load(function())4：window.onload=

2020-11-05 17:07:05 1666

原创 vuepress+gitee搭建个人博客

最近想对学过的前端知识以及做过的项目进行整理，于是采用了vuepress+gitee搭建个人博客，本篇文章主要写搭建过程及遇到的坑。前提条件VuePress 需要 Node.js >= 8.6快速搭建博客mkdir vuepress-starter && cd vuepress-starter //创建一个新目录并进入该目录yarn init //包管理器进行初始化，或者采用 npm inityarn add -D vuepress //安装vuepressmkd

2020-11-01 21:42:50 396

原创 vue中解决微信h5原生ios虚拟键返回不刷新问题

问题描述：在安卓机上点击手机自带的返回键会返回上一级路由并重新加载，而ios机上并不会重新加载分析：需要在进入页面时加入监听，并在页面离开时移除监听。因为home页面是个列表滚动，所以采用了keep-alive路由缓存，所以不能在mounted()和beforeDestroy()生命周期中写，因此我在home.vue中加了组件内的守卫beforeRouteEnter()，beforeRouteLeave (),并在里面添加监听、移除监听。注意：addEventListener()与removeEven

2020-10-20 10:09:17 949

原创使用vue-router传参时注意事项

name = nullinviter=undefinedthis.$router.replace('/home',{query: { openId: openId, //string name: name, //null inviter:to.query.inviter, //undefined //这里只是作为测试:路由参数类型只能是： 'string | (str

2020-10-13 10:31:23 1594

转载 github连接远程仓库时出现Warning: Permanently added the RSA host key for IP address ‘***********‘ ......

Warning: Permanently added the RSA host key for IP address ‘***********’ …Permission denied（publickey）的问题。解决方法：1.打开git bash2.输入cd C:3.cat ~/.ssh/id_rsa.pub4.应该会出现上图所示一大段字符串:ssh-rsa…，这就是所谓的publickey；但是如果提示报错的话则说明没有公钥，此时你应当自己创建一个公钥，输入ssh-keygen然后一直回车

2020-08-14 14:58:33 1662

原创 React Native给多个＜Text＞组件添加不同的styles

问题描述遍历了多个组件，当想操作第二个的样式时，可以给每个Text组件添加一个不同的styles代码：return ( <View> { dataArray.map((item,index)=>{ return( <Text key={index} style={styles[`text${index}`]} &

2020-07-30 17:26:25 738

原创 react native中软键盘收起时使输入框失去焦点

问题描述：在TextInput中输入文本，会弹出软键盘，当我收回软键盘时框焦点还在这个输入框中。分析：需要监听键盘的收起事件，然后控制输入框，使输入框失去焦点代码：export default class InputItem extends Component { constructor(props) { super(props); this.inputRef = React.createRef(); } componentDidMount() { th

2020-07-29 10:19:21 1779 1

原创 React Native使用FlatList组件实现上拉加载

运行成功截图：代码如下：import React, { Component } from 'react';import { View, StyleSheet, FlatList, Text, RefreshControl, ActivityIndicator,} from 'react-native';import { thisExpression } from '@babel/types';const tempDatas = [ { color:'bl

2020-07-21 17:03:47 328

原创 Recharts动态遍历多个Area面积图

问题描述：当后台返回多个value时，意味着图形中有多条线，接下来就分析从后台传过来的数据源，然后对图形进行处理。附上遍历成功后的面积图data = [ {time: "25-01", value: "5", valueY: "2"}, {time: "25-02", value: "2", valueY: "6"}, {time: "25-03", value: "8", valueY: "1"}, {time: "25-04", value: "1", valueY: "9"},

2020-07-17 11:18:42 332

原创命令式编程与声明式编程

2.8. 命令式编程与声明式编程声明式编程只关注做什么, 而不关注怎么做(流程), 类似于填空题命令式编程要关注做什么和怎么做(流程), 类似于问答题var arr = [1, 3, 5, 7]// 需求: 得到一个新的数组, 数组中每个元素都比arr中对应的元素大10: [11, 13, 15, 17]// 命令式编程var arr2 = []for(var i =0;i<arr.length;i++) { arr2.push(arr[i]+10)}console.l

2020-07-17 10:42:08 87

原创 React进行事件传参

向事件处理程序传递参数，有两种方式：一种是箭头函数方式：回调形式传参，另一种时function方式：bind()形式传参<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button><button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>示例代码如下：changeOne = (e,title) =

2020-07-17 09:43:35 724

原创 Recharts动态设置y轴的最大值最小值

问题描述：根据父组件传来的值来动态设置柱状图Y轴的刻度线使用配置属性：domain当 y 轴是数值轴时，通过这个配置可以指定 y 轴刻度函数的定义域。这个配置是一个二元数组，数组中的元素可以是一个数值，“auto”, “dataMin”, “dataMax” 或者类似于"dataMin - 100", “dataMax + 200"这样的字符串。如果任意元素的取值为"auto”，我们会生成可读性高的刻度，并且保证设置的刻度数。默认值：[0, ‘auto’]示例代码：export default c

2020-07-15 18:26:32 1778

空空如也

空空如也