- 博客(260)
- 资源 (23)
- 问答 (1)
- 收藏
- 关注
原创 vue2+openlayers6 项目实战示例详解【目录】
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动OpenLayers是一个JavaScript 类库包,主要是用于开发Web GIS客户端。这就是说,要先在网页中引用OpenLayers的JavaScript文件以及相应的css样式表和资源,根据其提供的功能接口,直接调用。
2023-09-15 11:34:25 1899 1
转载 uni-app 微信小程序根据角色动态的更改底部tabbar
文章目录1. 需求背景1.1 源码下载2. 问题前提及思路3. 开始撸3.1 设置 `tabbar.js` 配置不同角色不同的菜单3.2 设置 `page.json`3.3 vue 配置3.4 tabBar组件代码3.5 setRole方法1. 需求背景公司要求开发一个小程序,要求二种不同权限的人群都可以使用,使用时根据不同的权限,获取不同的tabbar,以及展示对应不同的内容。登录页面分为 用户登录 及 管理员登录1.2 用户登录和管理员登录的 tabbar 根据账号角色进行对应展示1.1
2020-10-14 15:44:48 98366 139
原创 js 函数节流和函数防抖及区别详解
浏览器中总是有一些操作非常耗费性能。所以就有了函数节流和函数防抖来提高浏览器性能。函数节流:频繁触发一个事件时候,每隔一段时间,函数只会执行一次。函数防抖:当触发一个时间后的n秒内,如果该事件没有被第二次触发,则执行。否,则重新开始计时。不论是函数防抖还是函数节流,都是性能优化的一种手段,都是为阻止函数无意义的执行,减小dom压力,避免不必要的性能浪费。以上是封装好的防抖,节流函数。大家可自取。
2024-04-20 20:33:25 363
原创 ajax轮询 websocket SEE 实现实时消息推送与优缺点详解
在很久很久以前,前端一般使用轮询来进行服务端向客户端进行消息的伪推送,为什么说轮询是伪推送?因为轮询本质上还是通过客户端向服务端发起一个单项传输的请求,服务端对这个请求做出响应而已。通过不断的请求来实现服务端向客户端推送数据的错觉。并不是服务端主动向客户端推送数据。显然,轮询一定是上述三个方法里最下策的决定。首先轮询需要不断的发起请求,每一个请求都需要经过http建立连接的流程(比如三次握手,四次挥手),是没有必要的消耗。客户端需要从页面被打开的那一刻开始就一直处理请求。
2024-04-20 20:12:58 831
原创 js事件循环机制(event loop)宏任务 微任务详解
用简单的流程解释事件循环。在了解什么是事件循环之前我们需要先行了解 javascript是一个单线程语言 和 javascript的事件分类。
2024-04-20 11:25:31 602
原创 js try catch用法详解 异常处理 异步捕获
这2段代码try,catch都不会捕获到错误信息,因为promise内部的错误不会冒泡出来,而是被 promise 吃掉了,只有通过。catch 包裹了计划要执行的函数,该函数有延迟,这时js引擎已经离开了 try…为了捕获到计划的函数中的异常,那么 try…能工作,代码必须是可执行的。块中的语句执行完毕,或者没有发生任何错误try块中的语句执行完毕,最后将执行。块中的语句首先被执行。try语句包含了由一个或者多个语句组成的try块,和至少一个。块中语句,其中括号中的err参数被作为例外变量传递。
2024-04-19 17:51:04 550
原创 014:vue3 van-list van-pull-refresh实现上拉加载,下拉刷新
用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。用该组件可实现上拉加载。两个变量控制加载状态,当组件滚动到底部时,会触发 load 事件并将。事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将。此时可以发起异步操作并更新数据,数据更新完毕后,将。若数据已全部加载完毕,则直接将。// 如果返回数据为空,表示已加载完成。
2024-04-12 17:35:46 748
原创 013:vue3 Pinia详解使用详解
通过创建数据仓库vuex 中的 state 在 pinia 中可以引用ref和reactive创建响应式数据vuex 中的getters在 pinia 中可以引用computed创建计算属性vuex 中的mutations和actions在 pinia 中就是普通函数, 同步异步都可以。
2024-04-11 15:01:39 859
原创 012:vue结合纯CSS实现蛇形流程图/步骤条
** 偶数行旋转箭头,步骤倒序排列(使用transform交换位置) */隐藏多余的箭头(如果container设置了overflow。// 给每行最后一个步骤(除最后一行)添加向下的连接箭头。/** 可配置的参数 可以调整试试 */
2024-04-11 10:10:05 959
原创 CSS3 实现文本与图片横向无限滚动动画
文章目录1. 实现效果2.html结构3. css代码1. 实现效果gif录屏比较卡,实际很湿滑,因为是css动画实现的2.html结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2024-04-03 14:42:14 1137
原创 使用nvm管理nodejs版本
这个是每个全能前端经常会用到的,之前用过现在重装了,又要去看博客安装,索性自己总结下记录下来,方便以后更快捷开发nvm是一个node版本管理工具,通过它可以安装多种node版本并且可以快速、简单的切换node版本。
2024-03-29 16:43:27 513
原创 css的active事件在手机端不生效的解决方法
需求:需求就是实现点击图中的 “抽奖” 按钮,实现一个按钮Q弹的放大缩小动画。上面是实现的效果,pc端,点击触发。问题:但是这种方式在模拟器上可以,解决方案:在页面body添加一个。,下面是简单的demo代码。
2024-03-22 20:09:53 460
原创 css3 实现html样式蛇形布局
文章目录1. 实现效果2. 实现代码1. 实现效果2. 实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>蛇形布局</title> <style> html, body { height: 100%; display: flex; flex-direction: column; align-i
2024-03-15 16:08:56 1236
原创 vue3 使用实现签到活动demo静态布局详解
虽然这个功能看上去比较简单,但是着仅仅是一个简单的demo,还要很多细节处理判断,比如当天已签到时,展示已签到图标当天未签到时,金币添加光圈旋转并且左右晃动动画签到天数为8天时候,进去后默认横向滚动到第8天动画实现。
2024-03-01 11:25:31 934
原创 react 使用react-seamless-scroll实现无缝滚动
项目地址拉下来跑起来效果(gif录屏有点卡,实际很丝滑)可以支持多种无缝滚动方案,如向下滚动向左滚动滚动速度鼠标悬停单布停顿单行停顿时间数组属性更新数组添加数据图表滚动等react-seamless-scroll 无缝滚动有两种实现方式,一种是,另外一种是。
2024-02-03 10:38:23 863
原创 uni-app 微信小程序之红包雨活动
/ 处理红包点击事件,可以增加分数或显示提示等操作。// 或者:this.showTip = true;// 例如:this.score += 1;// 可以根据实际需求自行添加逻辑。// 更新红包位置,约 60 帧。GIF录屏有点卡,实际比较丝滑。// 每秒创建一个红包。// 4秒后移除红包。// 点击后移除红包。
2024-01-26 16:50:10 2075 4
原创 010:vue结合el-table实现表格小计总计需求(summary-method)
/ 调用后端接口table数据。// 调用后端接口返回的总计数据。
2024-01-17 09:44:37 1491
原创 009:vue结合el-table实现表格行拖拽排序(基于sortablejs)
/ 需要在odEnd方法中处理原始eltable数据,使原始数据与显示数据保持顺序一致。// 略去数据,与前段代码一直。
2023-12-28 11:03:32 1423
原创 008:vue通过CSS实现手机充电效果
文章目录1. 实现效果2. index.vue 页面3. VabCharge.vue 组件代码1. 实现效果2. index.vue 页面<template> <div class="home"> <div class="body"> <vab-charge :end-val="endVal" :start-val="startVal" /> </div> </div></templa
2023-12-08 10:04:35 203
原创 uni-app 微信小程序之好看的ui登录页面(四)
文章目录1. 页面效果2. 页面样式代码1. 页面效果2. 页面样式代码<!-- 简洁登录页面 --><template> <view class="login-bg"> <br /><br /><br /><br /><br /><br /><br /> <view class="t-login"> <form class="cl">
2023-12-07 14:32:14 2264 1
原创 uni-app 微信小程序之好看的ui登录页面(三)
文章目录1. 页面效果2. 页面样式代码1. 页面效果2. 页面样式代码<!-- 简洁登录页面 --><template> <view class="login-bg"> <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image> <view class="t-login"> <view class="t-
2023-12-07 14:31:52 3005
原创 uni-app 微信小程序之好看的ui登录页面(二)
文章目录1. 页面效果2. 页面样式代码1. 页面效果2. 页面样式代码<!-- 蓝色登录页面2 --><template> <view style="height:100vh;background: #fff;"> <view class="img-a"> <view class="t-b"> 您好, <br /> 欢迎使用,XXX小程序 </view> </v
2023-12-07 14:30:24 2953 2
原创 uni-app 微信小程序之好看的ui登录页面(一)
文章目录1. 页面效果2. 页面样式代码1. 页面效果2. 页面样式代码<!-- 蓝色简洁登录页面 --><template> <view class="t-login"> <!-- 页面装饰图片 --> <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image> <image class="img-b" src
2023-12-07 14:30:07 4364
原创 uni-app 微信小程序之加载行政区图
*样式的width和height一定要与定义的cWidth和cHeight相对应*///正常这里给2就行,如果pixelRatio=3性能会降低一点。"网络错误,小程序端请检查合法域名"//替换为你组件的组件行政区域。
2023-12-06 09:35:27 903
原创 uni-app 微信小程序之整合colorui
uni-app版本支持多端,兼容性经过近上万使用者测试、反馈、改进,目前已非常稳定!说白了,就是uni-app版本的,只是uni-app版本更适合使用colorui。
2023-12-04 10:18:42 136
原创 uni-app 微信小程序之自定义navigationBar顶部导航栏
文章目录1. 实现效果2. App.vue3. pages.json 配置自定义4. 顶部导航栏 使用微信小程序自定义 navigationBar 顶部导航栏,兼容适配所有机型1. 实现效果2. App.vue在App.vue 中,设置获取的 StatusBar,CustomBar 高度(实现适配高度写法)uni.getSystemInfo 获取可视区域的高度wx.getMenuButtonBoundingClientRect() 胶囊按钮位置信息<script> im
2023-12-03 21:17:08 2134 1
原创 uni-app 微信小程序之自定义中间圆形tabbar
首先在pages.json文件中,新建一个tabbar页面"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages"style": {"navigationBarTitleText": "tabbar页面",},.....// 其他页面],tabbar页面代码此页面主要是写tabbar的html样式和布局,引用主页面代码,通过v-if控制进行展示主页面indexsearchmaimnews。
2023-12-02 00:47:31 1187
原创 uni-app 微信小程序 电子签名及签名图片翻转显示功能
接的一个开发一个小程序,需求很简单,使用uni-app实现一个微信小程序的电子签名功能
2023-12-01 15:02:28 708
原创 uni-app 解决钉钉小程序日期组件uni-datetime-picker不兼容ios问题
最近在使用uni-app开发钉钉小程序,遇到一个ios的兼容性问题组件在模拟器上可以使用,在真机上不生效问题。
2023-11-02 18:16:06 3711
原创 让生产力起飞的超火开源CSS框架:tailwindcss
如果你工作中涉及前端部分,那你一定和CSS打过交道。大家在开发中应该都用过不少的CSS 框架,例如Bootstrap,Muse UI,Element UI等等。技术领域一直都在追求更快和更好,新框架不断涌现,那到底哪个最好用呢?今天我们来推荐一个超热的开源原子化CSS框架,帮助你开发速度原地起飞, 目前在GitHub已超过31K Star,他就是:Tailwind CSS。
2023-10-24 17:23:41 339
原创 006:vue使用lottie-web实现web动画
Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovie导出为json格式),支持web、ios、android、flutter和react native。在web端,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制在我们的页面上.找到我们想要的动画,然后点击后,弹出窗口,点击下载,格式为JSON。然后就能把这个动画的json数据用到我们自己的项目里边去了。
2023-10-23 11:20:13 980
原创 005:vue使用vue-type-writer实现打字机效果
Vue Type Writer是一个Vue.js 2打字机效果组件,支持像打字机一样模仿键入文本。
2023-09-20 17:49:47 1532
源码uni-app 微信小程序根据角色动态的更改底部tabbar
2022-03-24
Export2Excel和Blob的js文件.rar
2020-08-07
SM4Util.js 【前端JS sm4加密解密工具类】
2020-07-14
echarts 省级地图联动下钻(放在服务器下访问).zip
2020-03-31
echarts大屏设计图(7680-3240)分辨率.rar
2020-01-03
JQuery颜色渐变插件jquery.color.js
2018-12-10
JFreeChart生成图表数据所需的Jar包
2018-05-31
Echart报表实现的Demo案例
2018-05-31
vm10keygen注册机秘钥获取
2018-01-25
Java生成条形码所需的barcode4j-light.jar包
2018-01-13
MyBatis逆向工程代码
2017-12-15
包含jstl-api-1.2.1.jar,jstl-1.2.jar,jstl-impl-1.2.jar,standard-1.1.2.jar
2017-08-29
24套java项目源码及视频教学
2017-07-21
Java实现物流跟踪查询+Demo+Word
2017-07-07
tomcat7官方版apache-tomcat-7.0 正版
2017-06-19
淘淘商城Spring注入报错求大神帮看看啊!!!跪求,看了好久了没解决
2018-01-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人