![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
uniapp
世俗ゝ
所有的伟大都源于一个勇敢的开始!
展开
-
uniapp 上传名片或者图片base64图片视图不更新
uniapp 上传名片或者图片base64图片视图不更新原创 2023-03-20 16:50:43 · 495 阅读 · 1 评论 -
css white-space属性详解
css white-space属性详解转载 2023-02-27 13:35:09 · 16041 阅读 · 0 评论 -
html2canvas文字重叠
html2canvas实际使用中遇到了生成的图片中文字重叠的情况,经排查,定位到换行时英文标点占位与文字占位不同导致该问题。各种尝试后,通过设置letter-spacing解决原创 2023-02-27 13:17:52 · 796 阅读 · 0 评论 -
uni-app中checkbox-group实现全选功能
uni-app中checkbox-group实现全选功能原创 2023-02-23 16:50:58 · 2005 阅读 · 2 评论 -
【uniapp】解决 uni.previewImage 不支持Base64的图片在APP上预览的问题
在使用 uni.previewImage 预览 base64 流的图片的情况下,只能在 H5 实现预览,在 APP 上打开后会呈现黑屏并一直转圈。参阅了网上资料后,有效的方法思路如下:先将 base64 转为临时路径,再通过 uni.previewImage 来进行预览。1)到插件市场下载 image-tools 到项目里(或直接 npm 下载)转载 2022-11-03 14:29:14 · 1497 阅读 · 0 评论 -
uniapp 禁止动态禁止页面上下滚动
现在有个需求是在当前页面添加可拖拽的悬浮球,但是页面长度太长,当拖拽的时候,球和页面一起滚动,很是苦恼,但是当页面没有滚动条的时候悬浮球是正常的,所以判断是页面太长,悬浮球计算了整个页面的高度来计算激动的,而不是可视区域,所以,有个思路,当手指触屏的时候把页面锁死,手指离开屏幕的时候解除限制,这样悬浮球可自行移动,页面不滚动,完美解决,废话不多说上代码。...原创 2022-08-09 10:29:26 · 1993 阅读 · 0 评论 -
vue或者uniapp阻止页面滚动
最近uniapp有个需求,页面底部增加悬浮窗,代码上完之后允许上下拖拽,写完之后发现当页面超出屏幕长度的时候拖拽就瞎跑,悬浮窗上下移动页面也跟着移动,思考了下,在滚动触发的时候把当前页面的滚动条锁死,当拖拽离开屏幕的时候再还原,完美解决,话不多说上代码。完毕,组件引入什么的我就不上代码了,太简单了直接省略。...原创 2022-08-05 09:55:40 · 1336 阅读 · 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 · 1279 阅读 · 2 评论 -
控制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 · 2938 阅读 · 0 评论 -
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 · 995 阅读 · 0 评论 -
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 · 3321 阅读 · 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 · 317 阅读 · 0 评论 -
前端 图片压缩 png/jpg
https://tinypng.com/原创 2021-09-27 15:39:34 · 218 阅读 · 0 评论 -
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 · 656 阅读 · 0 评论 -
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 · 867 阅读 · 0 评论 -
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 · 1675 阅读 · 1 评论 -
git常用命令
git秘籍1.首先下载git 安装 任何git都要登录 这样公司才知道你是谁 以什么身份提交的命令如下git config --global user.name "Your Name"git config --global user.email "you@example.com"本地仓库和远程仓库要通过SSH加密才能传输,所以需要让gitlab认证本地的SSH Key认证之前,则先使用G...原创 2020-05-08 08:48:09 · 115 阅读 · 0 评论 -
flex 影响兄弟元素宽度问题
因为设置了display: flex; 导致block布局变成了flex布局, 所以在子元素宽度没有被撑破的情况下,子元素宽度是有效的,但是当子元素内容过多,此时宽度会比实际宽度小,所以如果想要在已经设置了flex布局的基础上,再进行子元素宽度的设置,可以应用下面的样式:(在该子元素上设置)width: 180px;flex-shrink: 0;...原创 2021-01-29 16:08:14 · 868 阅读 · 0 评论 -
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 · 12996 阅读 · 0 评论 -
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 · 5428 阅读 · 0 评论 -
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 · 1018 阅读 · 0 评论 -
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 · 1157 阅读 · 0 评论 -
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 · 1989 阅读 · 0 评论 -
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 · 3866 阅读 · 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 · 1626 阅读 · 0 评论 -
vue 或 uniapp 点击图片或图标180度翻转
<style lang="css" scoped> .aa{ transition: all 2s; } .go{ transform:rotate(-180deg); transition: all 2s; }</style><template><div> <i :class="[rotate?'go':'aa']" @click="start"><原创 2021-01-12 13:48:08 · 5504 阅读 · 0 评论 -
uniapp如何引入html
话不多说上代码1.把你需要引入的html代码同意放在static文件下如图2.哪个页面需要引入html 需要用到uniapp的 web-wiew标签 然后在data里引入html的路径 如下![在这里插入图片描述](https://img-blog.csdnimg.cn/20201222175943577.png#pic_center)然后就可以看到你html的页面内容了。...原创 2020-12-22 18:00:42 · 8176 阅读 · 3 评论 -
vue 和 uniapp 的密码框小眼睛(通用)
密码输入框的小眼睛适合Vue 或者 uniapp使用步骤1动态绑定:type步骤2在data里声明Data(){Return{seen:'',pwdType: 'password', // 密码类型openeye: **require**('@/assets/eye.png'), //图片地址nopeneye: **require**('@/assets/neye.png'), //图片地址//重要提示:如果是uniapp的话把加粗的require的去掉}}步骤3动态绑定小眼睛图片原创 2020-08-28 14:04:32 · 5053 阅读 · 0 评论 -
uniapp 上拉加载更多
<view class="content"> <view class="contentlist" v-for="(item, index) in newsList" :key="index" @click="todetail(item.id)"> <image :src="imgurl + item.images" mode=""></image> <view class="contentext"> <text原创 2020-08-06 16:15:43 · 3743 阅读 · 0 评论