js
分享js相关实战案例
z.week
技术驱动创新
展开
-
uniapp封装缓存方法,支持类似cookie具有过期时间
set用来设置缓存,get用来获取缓存大概逻辑如下:1、将接收params参数,包含key、data、unit、time2、判断key和data不能为空,防止设置缓存时出错3、判断unit参数,分别处理缓存过期时间4、判断缓存size是否超上限,并及时清除5、设置缓存,并以’|'字符分割过期时间戳6、实现代码如下:3、完善get逻辑大概逻辑如下:1、将接收要获取的缓存key2、判断key不能为空3、获取缓存4、获取当前的时间戳,与缓存时间错比较,以判断缓存是否过期5、获取指定缓存ke原创 2023-03-07 15:04:54 · 1746 阅读 · 0 评论 -
封装时间处理函数,让你更快捷的处理时间业务
包括获取当前日期、获取指定日期、计算日期差、计算两个日期的月份差、获取当前月有几天。原创 2023-03-07 15:32:36 · 371 阅读 · 0 评论 -
蓝牙发送数据到设备异或和计算
蓝牙发送数据到设备异或和计算原创 2023-01-16 14:39:04 · 142 阅读 · 0 评论 -
一行代码实现「远程搜索」匹配搜索关键字,实时高亮显示
一行代码实现「远程搜索」匹配搜索关键字,实时高亮显示原创 2021-12-21 10:19:49 · 467 阅读 · 1 评论 -
H5端rem自适应屏幕
计算设计图尺寸与窗口宽度,窗口宽度放大100倍即1rem = 100px在head标签中引入,让页面一加载就适应屏幕; (function (win) { var tid; function refreshRem() { let designSize = 1920; // 设计图尺寸 let html = document.documentElement; let wW = html.clientWidth;// 窗口宽度原创 2021-12-10 18:38:33 · 793 阅读 · 0 评论 -
js提取企业名称的关键字(简称),生成文字LOGO
> 实现思路:> > 1、判断用户键入的字符串长度,长度 2、判断字符串是否以 “xx省” 开头,如果是则删除该部分> 3、判断字符串是否以 “xx市” 开头,如果是则删除该部分> 4、判断字符串后缀是否以 “xxxx” 结尾,例如“有限公司”,如果是则删除该部分 > 5、判断字符串中是否存在特殊符号,例如 “(xxxx)”,如果存在则删除该部分> 6、考虑“不是常规的”企业名称(以上过滤截取过程均被跳过),或者以上过程截取完之后长度 >4 ,则直接截原创 2021-06-03 11:37:36 · 3594 阅读 · 0 评论 -
Vue 修改data数据后视图没同步更新的解决方案
导致视图不同步更新的原因是因为对象数据嵌套太深,导致vue监听不到数据变化,render函数不会自动更新解决方案一:使用this.$set()方法重置属性语法:this.$set(object, key, value)this.$set(this.labels[index], 'select', !this.labels[index].select)如果还搞不定它就用下面的方法解决方案二:数据修改后调用this.$forceUpdate()强制更新视图this.labels[index].原创 2021-03-25 18:40:06 · 2113 阅读 · 1 评论 -
Vue3.0 使用print打印功能(兼容vue3.0)
npm上没找到兼容vue3.0的print打印功能,于是找到了兼容vue2.0版本的print,在此基础上修改,兼容3.0现已将修改后的兼容版本上传到了npm,可直接安装使用npm i print-vue3.0 --save原创 2021-03-24 16:38:32 · 3357 阅读 · 8 评论 -
Vue filter 实现文章更新日期--时间戳
Vue.filter('formatTime', function(time) { const d = new Date(time); const now = Date.now(); const diff = (now - d) / 1000; if (diff < 30) { return "刚刚"; } else if (diff < 3600) { return Math.ceil(diff / 60) + "分钟前"; } else if (diff < 360原创 2021-03-19 11:17:45 · 146 阅读 · 0 评论 -
记录:子组件相互嵌套导致不渲染的解决方案
简单解释下嵌套场景:A组件中嵌套了B组件B组件中嵌套了A组件C组件也嵌套了A组件或者B组件类似这种循环相互嵌套的组件(很少有这么狗需求了吧,建议项目中不要这么嵌套)这种嵌套方式会导致 比如B组件在A组件可以正常渲染,然而在C组件不渲染经过一番调试,将组件注册到了全局下,得以解决,将此记录下来如果小伙伴们也遇到了类似问题那么可以将这些组件注册到全局可以解决这个问题...原创 2021-03-11 17:26:38 · 639 阅读 · 0 评论 -
jQuery懒加载 lazyload,支持video、image
jQuery版本下载:https://www.jq22.com/jquery-info122lazyload下载:https://appelsiini.net/projects/lazyload/$(document).ready(function ($) { $(".lazyload").lazyload({ effect: "fadeIn", //没有加载图片时的临时占位符 // placeholder: "images/default.png原创 2021-01-25 10:41:17 · 775 阅读 · 0 评论 -
vue2.x vue3.x ECharts中国地图散点图,含China.js文件以及中国地图JSON文件
因公司项目需求,需要实现中国地图数据散点分布,如下图按照ECharts官方文档给出的示例,并没有单独的中国地图,需要自己去找配置文档修改配置,达到自己想要的结果实现这一模块需要有china.js这个关键的文件进行处理,否则会报错意思是 [地图中国不存在。必须提供地图的GeoJSON。]因此还需要有中国地图的JSON文件(这文件可不好找,ECharts官方不提供下载)中国地图GeoJSON下载链接以下是china.js文件的代码(function (root, factory) { if原创 2021-01-20 15:22:50 · 3184 阅读 · 0 评论 -
vue 简单的tab切换滑动效果
实现一个简单的滑动效果:代码逻辑比较简单,利用css的transform和transition属性实现简单的tab切换效果贴上代码,仅供参考:html部分:<template> <div class="container"> <div class="flex_c"> <p style="margin-right:20px;" @click="tab('0')">切换</p>原创 2020-08-14 17:43:12 · 3313 阅读 · 4 评论 -
Vue上拉框显示隐藏动画简单demo
css简单布局.picker { height: 300px; background: #fff; width: 100%; position: fixed; left: 0; bottom: 0; z-index: 2020; overflow-y: scroll; box-shadow: 0 0 12px 0 #f4f4f...原创 2020-03-03 11:16:29 · 912 阅读 · 0 评论 -
小程序页面自定义顶部到航栏
小程序顶部到航栏可全局设置也可以局部设置全局设置只需在app.json中window对象添加"navigationStyle": “custom"配置,然后每个页面的顶部导航条都是自定义的局部设置(单个页面),在你需要自定义的页面的json文件中添加"navigationStyle”: "custom"配置即可下面上代码首先获取顶部导航栏的高度,注意ios和安卓的高度不一样 cus...原创 2019-12-30 09:35:58 · 344 阅读 · 0 评论 -
父子组件与兄弟组件之间的通信
1、父子组件通信1.1 父传子 ----------------------------------------------------------父组件传值到子组件使用 props父组件代码:<template> <div> <child :msg="parentMsg"></child> </div...原创 2019-12-27 13:40:50 · 213 阅读 · 1 评论 -
顶部导航栏下划线跟随鼠标移动
css部分:#slidebar { height: 3px; width: 64px; background: #1476CB; position: absolute; left: 35px; bottom: 0px; transition: left .3s;}html部分:js部分:给元素添加mouseover(移入)、m...原创 2019-11-25 16:21:05 · 512 阅读 · 0 评论 -
滚动页面,右侧小圆点样式跟随(类似轮播效果)基于jquery
这样页面滚动时小圆点就能跟随啦,点击小圆点也能定位到对应的版块。html部分:(贴图)原创 2019-11-25 16:12:39 · 863 阅读 · 1 评论 -
electron将vue项目打包成exe桌面应用流程及可能出现的问题
近期项目需求,把网页(基于vue)打包成exe桌面应用,在网上找到了electron;这里说说我对electron-builder的使用心得electron打包exe程序主要有两种方法:1、electron-packager:初学者入门demo传送门2、electron-builder:稍微复杂一丢丢,需要配置文件#######先将vue项目打包 npm run build 得到dis...原创 2019-11-13 17:49:16 · 2361 阅读 · 1 评论 -
vue路由history模式刷新页面一片空白,也不报错(解决方案)
如果项目不在根目录下,路由需添加配置(base)router/index.jsmode: 'history',base: '/h5/',config/index.jsbuildassetsPublicPath: '/h5/',后台配置代码:引用链接END....原创 2019-11-07 17:14:02 · 9600 阅读 · 1 评论 -
vue项目pc端使用flexible适配,字体显小问题
安装 npm i lib-flexible -S安装 npm i px2rem-loader -D在main.js引入 import ‘lib-flexible’build/utils.js修改配置//utils.jsconst cssLoader = { loader: 'css-loader', options: { sourceMap: options.sour...原创 2019-10-22 17:41:03 · 2566 阅读 · 2 评论 -
微信小程序request请求封装,并可设置防抖
请求函数加入防抖功能:有两种防抖效果,根据自己需求使用。页面中使用函数:先在app.js引用,方便调用。request请求封装基于promise。看下防抖效果(上图)原创 2019-10-17 11:00:32 · 962 阅读 · 1 评论 -
移动端滑动反弹效果
原生js实现移动端滑动反弹效果纵向滑动效果演示横向滑动效果演示请在谷歌浏览器移动端模拟下查看具体实现思路触摸事件(touch event)可响应用户手指(或触控笔)对屏幕或者触控板操作,给基于触控的用户界面提供了可靠支持。触摸事件接口是较为底层的 API,可为特定程序提供多点触控交互(比如双指手势)的支持。多点触控交互开始于一个手指(或触控笔)开始接触设备平面的时刻。随后其他手指也可触...转载 2019-07-24 12:52:10 · 907 阅读 · 0 评论 -
vue-cli公众号调用微信支付(坑)
id=1(栗子)的形式,而正常的url是https://so.csdn.net/so/search/s.do?通过调试,仔细观察发现,vue的每一个路由访问,路由路径都是index.html#/后面发生路由变化,所以index.html#/就相当于是路由的一级目录,当配置成http://xxx.xxx.com/dist/调用支付,它会认为这不是根目录,怎么解决这个问题?配置url的时候,加上index.html#/:http://xxx.xxx.com/dist/index.html#/原创 2019-08-13 13:26:04 · 2026 阅读 · 1 评论 -
小程序下滑触底,切换页面
小程序项目需求,触底后上滑切换页面,下滑取消切换。用到touch事件,分别绑定touchstart、touchmove、touchend事件wxml代码<view class="section" bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"&g...原创 2019-08-02 13:29:44 · 1277 阅读 · 0 评论 -
vue+vant公众号项目踩的坑
vant – List组件在页面初始化后连续触发多次的问题,如下图:代码:html代码:<van-list v-model="category.dropLoading" :finished="category.finished" finished-text="--没有更多了--" @load="onLoad" > 内容</van-list>data数据 c...原创 2019-08-06 17:56:05 · 1622 阅读 · 0 评论 -
vue父组件异步传递props值,子组件接收不到的问题
父组件异步请求数据之后传值给子组件,子组件接收不到贴上父组件代码图:子组件代码图:打印结果:父组件异步请求数据回来在传到子组件,子组件无法接收,打印的依然是默认值。这里有两种解决思路:第一种:子组件使用watch监听但是watch监听也会有接收不到值的情况,因为要修改props的favoriteValue的值,favoriteValue接收不到的话就无法修改,所以这里同时...原创 2019-08-07 09:31:32 · 17079 阅读 · 6 评论 -
vue搭建的公众号微信分享功能
微信分享,这里要注意的是,获取签名参数时,前端传的URL是#前面部分,所以要截取一下,否则即使能分享,分享的信息也是默认的,不能修改成传过来的标题和其他想要修改的数据import request from '../request/http'import Vue from 'vue'import { Toast} from 'vant'Vue.use(Toast)import api...原创 2019-08-14 09:11:50 · 1548 阅读 · 7 评论 -
Vue定时器报“timeout.close is not a function”的问题
今天在项目中用到定时器,发现个问题当vue清除定时器时发现报错解决方案:加上window前缀无报错信息原创 2019-08-21 09:04:16 · 1630 阅读 · 0 评论 -
Vue使用有赞ImagePreview(图片预览)遇到的问题
首先说下有赞ImagePreview的使用有赞官方文档:https://youzan.github.io/vant/#/zh-CN/image-preview先上个预览效果图问题点:如果图片预览弹框没有隐藏的话,在路由切换的时候也会一直显示如图,路由已切换:解决方案:beforeRouteLeave 钩子中调用 close() 方法关闭预览遮罩beforeRouteLeave ...原创 2019-08-22 09:23:05 · 19479 阅读 · 9 评论 -
vue项目自定义滚动指令控制按钮显示隐藏
在vue项目中,有些页面需要toTop的按钮(滚到顶部),因此在页面中需要用到滚动事件,但是如果很多页面都需要用到这个按钮,就要在这些页面中都加上滚动事件,会导致页面代码臃肿,不便维护。这里使用vue自定义指令封装一个全局的滚动事件,在需要的页面引用组件,加上指令即可。下面上代码:1、首先封装一个toTop的按钮组件(默认显示)<template> <div id...原创 2019-09-05 14:10:12 · 1934 阅读 · 1 评论 -
小程序实现日期上一天、下一天切换
# js实现小程序日期切换(上一天、下一天)项目中有类似日期切换需求,所以把它记录下来# data数据 data: { date: '今天', targetNum: 0, nextNum: 0 },# 封装日期处理函数 showdate(n) { // 日期切换处理函数 返回时间格式 YYYY-MM-DD va...原创 2019-07-04 22:08:03 · 3233 阅读 · 2 评论