- 博客(80)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 uniapp 或 vue 封装公共方法
项目中，如果频繁用到某些方法的时候，我们肯定要去想到封装，不然代码冗余，看上去非常不美观，下面，我简单封装个例子，希望大家都能主动去封装自己常用的方法1.我一般喜欢把封装的js文件放在utils静态文件夹下 如图：2.举个例子 我封装手机号码的验证格式//校验手机格式function checkMobile(mobile) { return RegExp(/^1[34578]\d{9}$/).test(mobile);}//一定要声明暴露函数，可以被引用 module.exports
2021-01-26 13:28:54
1934
原创 js 删除数组对象中指定那些或者某个对象
let arr = [{id；1，name:‘张三’}，{id；2，name:‘历史’}]； //需求是返回 id不等于1的对象 let filter =arr .filter( (item) => item.id!= 1 ); console.log（filter ） //结果 [{id；2，name:‘历史’}] ...
2020-10-19 11:51:46
6011
原创 vue 封装axios 以及全局的loading 以及统一的接口api 项目配置
1. 运行项目如何自动弹出浏览器地址到浏览器？config.js 里面的index.js 把 autoOpenBrowser:属性值设置为true就行***2.***如何在手机上运行调试项目代码config.js 里面的index.js 把host 改为自己的ip地址，重新运行即可3....
2020-08-26 17:20:34
1260
原创 uniapp 选项卡 切换组件内容
第一种<view class="end-title"> <view @tap="change(0)" :class="{btna:btnnum == 0}">基本信息</view> <view @tap="change(1)" :class="{btna:btnnum == 1}">公告信息</view> <view @tap="change(2)" :class="{btna:btnnum == 2}">换区信息<
2020-07-05 11:45:27
6657
4
原创 uni-app如何引入阿里图标库 （其他项目一般都通用）
uniapp引入阿里图标库，话不多说，代码走起！！！！第一步：www.iconfont.cn/进入阿里图标库官网第二步：把购物车中的图标添加到项目中，这个项目是在阿里图标中建立的一个文件夹，如果之前没有建立过，可以点击添加项目，项目名字随便写第三步：右上角点击随便建个项目，为的是下边我们修改在线地址，方便查看复制在线地址所用，跟你所写的uniapp项目并无关联，随便写就好，最后还要下载到本地。第四步：去下载的代码中找到iconfont.css这个文件复制粘贴到你自己的项目中去 第三步：在你的
2020-06-30 17:09:30
5457
原创 git常用命令
git秘籍1.首先下载git 安装 任何git都要登录 这样公司才知道你是谁 以什么身份提交的命令如下git config --global user.name "Your Name"git config --global user.email "[email protected]"本地仓库和远程仓库要通过SSH加密才能传输，所以需要让gitlab认证本地的SSH Key认证之前，则先使用G...
2020-05-08 08:48:09
113
原创 vue调取手机原生摄像头和相册
个人总结的移动端拍照和相册原生方法1. 图片显示 <div class="imgBox name"> <img :src="imgSrc" /> </div>2.这里引用的vant插件样式 <van-action-sheet v-model="show1"> <ul> ...
2020-05-06 10:28:37
4756
6
原创 html2canvas文字重叠
html2canvas实际使用中遇到了生成的图片中文字重叠的情况，经排查，定位到换行时英文标点占位与文字占位不同导致该问题。各种尝试后，通过设置letter-spacing解决
2023-02-27 13:17:52
714
转载 【uniapp】解决 uni.previewImage 不支持Base64的图片在APP上预览的问题
在使用 uni.previewImage 预览 base64 流的图片的情况下，只能在 H5 实现预览，在 APP 上打开后会呈现黑屏并一直转圈。参阅了网上资料后，有效的方法思路如下：先将 base64 转为临时路径，再通过 uni.previewImage 来进行预览。1）到插件市场下载 image-tools 到项目里（或直接 npm 下载）
2022-11-03 14:29:14
1391
原创 uniapp 禁止动态禁止页面上下滚动
现在有个需求是在当前页面添加可拖拽的悬浮球，但是页面长度太长，当拖拽的时候，球和页面一起滚动，很是苦恼，但是当页面没有滚动条的时候悬浮球是正常的，所以判断是页面太长，悬浮球计算了整个页面的高度来计算激动的，而不是可视区域，所以，有个思路，当手指触屏的时候把页面锁死，手指离开屏幕的时候解除限制，这样悬浮球可自行移动，页面不滚动，完美解决，废话不多说上代码。...
2022-08-09 10:29:26
1876
原创 vue或者uniapp阻止页面滚动
最近uniapp有个需求，页面底部增加悬浮窗，代码上完之后允许上下拖拽，写完之后发现当页面超出屏幕长度的时候拖拽就瞎跑，悬浮窗上下移动页面也跟着移动，思考了下，在滚动触发的时候把当前页面的滚动条锁死，当拖拽离开屏幕的时候再还原，完美解决，话不多说上代码。完毕，组件引入什么的我就不上代码了，太简单了直接省略。...
2022-08-05 09:55:40
1264
1
原创 uni-app scroll-view 点击实现元素居中？
如图所示，下面的scroll-view是横向滚动的，动态展示当天前后半个月的日期，需求是点击哪个日期就让谁选中并且居中显示，搞了快一天了才发现这个方法，下面分享给大家到此结束，下面贴上源码<!-- 日历 --> <view class="classname" style="width:100%; height: 200rpx;"> <scroll-view :scroll-x = "true" scroll-with-animati
2022-03-08 15:00:28
1212
2
转载 学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）
学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）
2022-02-09 16:51:46
144
原创 控制Highcharts中x轴和y轴坐标值的刻度
绘制小一点的Highcharts图表的时候，因为图表太小了，坐标轴上的刻度值显示不出来怎么办捏，只要把yAxis或者xAxis中的tickPixelInterval设小一点就ok了。这个属性表示区域内坐标刻度之间的间隔距离，单位是像素，y轴默认值72，x轴默认值100。chart = new Highcharts.Chart({ chart:{ ... }, xAxis:{ tickPixelInterval:10 }, yAxis:
2022-01-07 14:43:33
2813
原创 uniapp 横屏之后自定义的tab导航栏样式错乱，字体变大
意思就是 禁用Webkit内核浏览器的文字大小调整功能。1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}2、-webkit-text-size-adjust放在body上会导致页面缩放失效3、body会继承定义在html的样式4、用-webkit-text-size-adjust不要定义成可继承的或全局的添加样式.text{ -webkit-text-size
2021-12-28 14:25:32
924
原创 uniapp 使用 vconsole
1.安装npm install vconsole2.main.jsconst vconsole = require('vconsole')Vue.prototype.$vconsole = new vconsole() // 使用vconsoleok,完成，记得发生产包的时候注释掉 main.js的这两行代码如果大家觉得好的话欢迎投票哦...
2021-12-24 11:33:15
3288
1
原创 JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
个人推荐最下面使用es6的写法///集合取交集Array.intersect = function () { var result = new Array(); var obj = {}; for (var i = 0; i < arguments.length; i++) { for (var j = 0; j < arguments[i].length; j++) { var str = arguments[i][j]; if (!obj[.
2021-11-29 17:27:22
312
原创 vue父子组件生命周期执行顺序
vue父子组件生命周期执行顺序今天面试被面试官问到vue父子组件生命周期执行顺序，一头雾水，果断写下打印看下结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA.
2021-10-27 14:40:46
107
原创 html用自适应rem单位的配置
直接上案例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> html { font-size: .32rem; } body { flex: 1; overflow: hidden; } .abn
2021-09-09 14:30:05
319
原创 js数组去重的9种方法
一、利用ES6中的 Set 方法去重注：Set为ES6新增的一个对象，允许存储任何类型（原始值或引用值）的唯一值let arr = [1,0,0,2,9,8,3,1];function unique(arr) {return Array.from(new Set(arr))}console.log(unique(arr)); // [1,0,2,9,8,3] console.log(…new Set(arr)); // [1,0,2,9,8,3]二、使用双重for循环，再利用数组的spl
2021-09-06 15:49:58
652
原创 js数组遍历和对象遍历
针对js各种遍历作一个总结分析，从类型用处：分数组遍历和对象遍历；还有性能，优缺点等。JS数组遍历：1，普通for循环，经常用的数组遍历var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ console.log(arr[i]);}2，优化版for循环:使用变量，将长度缓存起来，避免重复获取长度，数组很大时优化效果明显for(var j = 0,len = arr.length; j < len; j+
2021-09-06 15:15:42
281
原创 Vue中的扩展运算符 ...
Vue中的扩展运算符 …含义：扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。1.操作数组：methods: {/*** 把数组中的元素孤立起来*/iClick() { let iArray = ['1', '2', '3']; console.log(...iArray); // 打印结果 1 2 3},2.在数组中添加元素iClick3() { let iArray = ['1', '2', '3'];
2021-09-06 15:01:20
849
原创 vue aes 和 md5 加密解密和区别
1.首先介绍下aes如何使用首先确保有node.js运行命令：npm install crypto-js --save然后在src文件夹下新建js文件夹，目录结构如下：在until.js里面引入crypto-js，然后封装加密和解密的函数。接着在需要用到加解密的文件中引入until.jsimport utils from '@/js/utils.js'做个演示：我在页面创建后执行data函数，打印结果如下：2.介绍下md5的使用方法npm安装：npm install --s
2021-09-03 15:21:46
1654
1
原创 html如何运用rem自适应
？如何使用rem通常设计师提供的效果图都是指定宽度的效果，如750px等，因此可以在编写html时，一开始就设置整个dom文档html标签的font-size，假设设置的font-size为x，然后页面的其他元素便可以根据这个参照点，计算出大小并以rem作为单位。？如何适配分辨率不同的设备可以动态的改变上述中的x值，即可使得页面中设置了rem的元素大小对应变化。因此可以在html文档中添加javascript脚本，动态设置x。相关代码：;(function(win, doc) { 'use
2021-08-26 11:02:52
779
原创 input 正则验证码格式并限制验证码位数
<input type="text" v-model="datalist.vCode" maxlength="6" @input="getClick" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入验证码" v-blur-event />oninput 事件在用户输入时触发。该事件在 或 元素的值发生改变
2021-08-19 10:04:40
312
原创 vue mock数据教程
1.mock简介mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。其可模拟 Ajax 并返回模拟数据，使前端不用去调用后端的接口，方便测试。2.vue直接使用mock（1）安装mocknpm install mockjs（2）新建并引入mock.js，并编写mock接口（Mock.mock）。【mock.js】//引入mock模块import Mock from 'mockjs';Mock.mock('/login', { //输出数据 'name
2021-04-20 14:55:52
380
原创 flex 影响兄弟元素宽度问题
因为设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置）width: 180px;flex-shrink: 0;...
2021-01-29 16:08:14
834
原创 vue 或者 uniapp ref的用法总结
1.基本用法，本页面获取dom元素<template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div></template><script>export default { methods: { getTest()
2021-01-29 11:43:48
12512
原创 uniapp 组件生命周期 he 页面生命周期
编写uniapp 项目时，组件生命周期用了页面生命周期，不生效，查了下是因为生命周期的问题，特此记录1.组件生命周期beforeCreate 实例已经开始初始化之后调用 【数据初始化未完成，页面没有开始渲染】created 实例创建完成之后调用 【组件创建完成，不代表组件已挂载到页面】beforeMount 在挂载开始之前被调用。 mounted 挂载到实例上去之后调用。 注意：此处并不能确定子组件被全部挂载，
2021-01-28 15:53:07
636
原创 js 去掉小数点后面的0 （uniapp 和 vue比较适用）
在项目中后端返回的数据是这样的由于移动空间比较小，00 也比较占用空间，干脆去掉，美观又好看var a=11.00;console.log(a);;数字类型用的时候直接就去掉了无用的0var a=‘11.00’;console.log(Number(a));字符串类型转成数字类型也就直接去掉了后面没用的0OK了...
2021-01-28 09:36:37
5276
原创 vue 子路由 以及处理子路由高亮bug
点击主路由想让主路由显示高亮就要在底部的footer文件里 写好主路由下的子路由比如 交易模块下又三个子路由 <div class="tab-item" id="teshubox" @click="switchTo('/transaction')"> <div class="slot"></div> <div cla...
2021-01-27 15:47:04
202
原创 uniapp 封装request 网络请求
每个项目开始前，都要做好充分的准备工作，网络封装必不可少直接上代码1.根目录下新建 config.js 文件const config = {base_url: '这里可以是生产环境或者测试环境'}export { config }这里主要配置接口的基本路径2.根目录下新建 utils/api.js 文件 (js文件名随便取大部分都是 api.js 或者 http.js)import { config} from '../config.js'export const apiResqu
2021-01-27 15:43:21
1010
原创 uniapp 或者 vue 解析时间成年月日或者时分秒格式
如果遍历后端接口返回的时间格式是 createtime: 1611559327 这种 ，然而我们现实需要显示具体的日期，可以这么做1.在min.js 写入如下封装的代码Vue.filter('dateFormat', (date, format) => { var time = new Date(date); var y = time.getFullYear(); var month = time.getMonth() + 1; var d = time.getDate(); var h
2021-01-26 13:40:17
1134
原创 uniapp 获取定位（经纬度） 并且用腾讯地图api解析省市区门牌号
1.首先去腾讯地图申请必要的keyhttps://lbs.qq.com/根据项目需求勾选不同的方案，我写的是h5,如下2.在项目中配置你的key3.接下来就是代码了必须引入腾讯的api，地址如下自己提取，放在项目static目录下https://pan.baidu.com/s/1bKIsogYo98orxI75yW-yPQ在全局声明一个变量 let qqmaonReady() {qqmap = new QQMapWX({// key: ‘PATBZ-EZURU-G***FU-GC
2021-01-16 09:31:31
3777
3
原创 uniapp或者vue input只允许输入文字
<view class="oderInfo1"> <text>联系人：</text> <input type="text" focus clearable value="" v-model="form.contacts" @input="onKeyYHKNameInput" placeholder="请填写联系人" /></view> data() { return { form: { contacts
2021-01-15 09:00:51
1602
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人