实践
文章平均质量分 52
TurtleOrange
bug需要debug
展开
-
Vue 动态绑定图片地址,使用require也失效问题解决方案
解决Vue中,使用require显示图片失效问题原创 2022-09-15 15:29:03 · 2998 阅读 · 1 评论 -
微信小程序比较用户微信客户端版本号
微信小程序客户端版本号比较原创 2022-07-07 11:42:24 · 1161 阅读 · 0 评论 -
flex布局自动换行并解决最后一行对齐
flex布局自动换行并解决最后一行对齐实现效果:html代码(父级容器里面有5个子级盒子)css实现对齐效果:.flex-wrp { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 16rpx; box-sizing: border-box;}/* 实现最后一行对齐 */.flex-wrp:after{ content: ""; width: 180rpx;原创 2022-02-10 09:44:15 · 3878 阅读 · 0 评论 -
踩坑:小程序 new Date(“YYYY-MM-DD hh:mm:ss”)在ios手机上显示null
踩坑:小程序 new Date(“YYYY-MM-DD hh:mm:ss”)在ios手机上显示null一、发现问题:苹果手机上进入小程序,点击picker组件选择时间日期(YYYY-MM-DD hh:mm:ss),用new Date(“YYYY-MM-DD hh:mm:ss”)转化时间格式,进行比较时,变量转化后的结果为null二、解决方案:let d1= (“YYYY-MM-DD hh:mm:ss”).replace(/\-/g, '/') // ios和安卓手机统一格式// let d1= (原创 2022-01-20 17:56:14 · 3234 阅读 · 0 评论 -
微信小程序引入WeUI组件库(详细成功案例,带图)
微信小程序引入WeUI组件库本章选择官方引入组件的方式为第一种通过npm方式(第二种)引入WeUI通道第一步(引入WeUI库)第二步(组件代码)第三步(注册组件)第四步(看效果)原创 2021-11-04 11:55:43 · 861 阅读 · 0 评论 -
微信小程序引入WeUI组件库(详细成功案例,带图)
微信小程序引入WeUI组件(详细成功案例)第一步(确定位置):在小程序的根目录下,pages文件夹点击右键,选择在资源管理器中显示第二步(初始化npm):进入根目录文件夹后,打开cmd或者git bash,在根目录下输入 npm init,运行之后一直按回车成功后会增加一个文件第三步(安装weui-miniprogram插件):继续运行下一条命令 npm install weui-miniprogram -S,安装插件安装好之后会多出这个文件夹第四步(使用插件):在需要使用UI原创 2021-10-08 10:43:49 · 2127 阅读 · 6 评论 -
Object.assign()用法小结
Object.assign()用法1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。2.Object.assign方法实行的是浅拷贝,而不是深拷贝。目标对象拷贝得到的是这个对象的引用3.语法:Object.assign(target, …sources)代码let aaa = { text: 2, value: 11,}let bbb = { text: 3}let ccc = Object.assign(a原创 2021-09-30 11:51:22 · 12205 阅读 · 2 评论 -
微信小程序实现底部导航栏自定义tabBar
重要!!!1.custom-tab-bar组件目录位置一定要和pages同级,不能放在自定义的components文件夹内,不然底部导航栏跳转异常。2.转跳的目标页面在onShow生命周期一定要有以下代码,因为跳转后选中的值会初始化,为了防止选中的值重置。(备注:如果第1点没做到,this.getTabBar()会undefined,故custom-tab-bar组件一定要和pages同级)onShow: function () { if (typeof this.getTabBar ===原创 2021-09-27 10:05:00 · 518 阅读 · 0 评论 -
Vue 3 中使用Element-plus国际化语言问题(修改为中文语言成功案例)
Vue 3 中使用Element-plus国际化语言问题(修改为中文语言成功案例)1.遇到的问题使用Element-plus组件默认是中文,如图:2.分析问题原因于是我就去找了他们的官方文档的源码以及查看他们的讨论区,找到了这个 i18n related issue | 国际化相关问题再找了它1.0.2-beta.59版本的更新内容一句话总结就是,最新的ElementPlus 国际化兼容版本还在开发中…3.解决办法使用1.0.2-beta.59以前的Element版本,我这里打了原创 2021-08-11 17:48:35 · 3863 阅读 · 0 评论 -
flvjs播放器事件动态监听并实现flvjs实例销毁(http-flv协议)
flvjs播放器侦听其相关事件1.困扰我的问题最近在使用flvjs播放器播放http-flv协议流的直播视频,业务需求要动态加载非固定数量的视频(不超过6个),使用创建flvjs实例,但销毁flvjs得想法子,下面为你们解决我曾经的困扰~2.思路我们要监听创建出来flvjs实例事件,然后设置变量去判断何时该销毁实例3.代码说明watch: { device(val) { if (val) { this.changeLampPost = true // 切换设备时销毁 } }}原创 2021-07-27 17:08:31 · 9680 阅读 · 2 评论 -
90版本以上的谷歌浏览器,本地请求不携带cookie
90版本以上的谷歌浏览器,本地请求不携带cookie1.发现问题本地用谷歌浏览器跑localhost代码在登录页面去登录,接口一直报请求超时(之前没有问题),经查看前端在发请求的时候没有携带cookie(如下图)2.产生问题原因经过测试,谷歌浏览器线上代码没问题√,谷歌浏览器跑本地代码localhost有问题×,火狐浏览器线上代码没问题√,火狐浏览器跑本地代码localhost没有问题√;原因是:Chrome禁用第三方Cookies的计划,在91版本后谷歌浏览器把same-site-by-def原创 2021-07-21 17:45:34 · 2446 阅读 · 0 评论 -
前端性能优化(节流、防抖、图片懒加载)
前端性能优化1.性能优化原则多使用内存、缓存减少CPU计算量,减少网络加载耗时空间换时间2.节流throttle拖拽一个元素时,要随时拿到该元素被拖拽的位置直接用drag事件,则会频繁触发,很容易导致卡顿节流:无论拖拽速度多快,都会每隔100ms触发一次<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-原创 2021-04-27 02:14:48 · 196 阅读 · 0 评论 -
图片加载完成后执行相应功能
图片异步加载1.计时器异步加载(缺点很明显,不知道图片加载时长,受网络影响)$(function(){ setTimeout(function(){ console.log(document.getElementById("image").complete) // function },1000)})2.image标签onload属性(简单)<img src="./long.png" id="image" onload="handleLoad原创 2021-02-19 14:21:15 · 372 阅读 · 2 评论 -
Vuex中getters的使用方法
Vuex中getters的使用方法前提脚手架搭好Vuex,项目内store文件夹下的index.js实例代码export default createStore({ state: { todos: [ { id: 1, text: '...1', done: true }, { id: 2, text: '...2', done: false }, { id: 3, text: '...3', done: true } ] }, getters: { // 基础用法原创 2020-12-23 11:53:40 · 1223 阅读 · 0 评论 -
Vue中使用Vuex获取多个state状态的4种写法
Vue中使用Vuex获取多个state状态的3种写法写法①computed: { count () { return this.$store.state.count }, count1 () { return this.$store.state.count1 } }写法②computed: mapState([ 'count', 'count1' ])写法③computed: { ...mapState(原创 2020-12-22 15:34:37 · 2825 阅读 · 0 评论 -
运用极简行代码实现省市区三级联动【固定数据版】
运用极简行代码实现省市区三级联动【固定数据版】页面展示效果map.html<style> body{ background: #eee; } select{ width: 90px; }</style><body> <div> <select id="province"> &l原创 2020-12-21 16:32:43 · 3122 阅读 · 0 评论 -
运用极简行代码实现省市二级联动【json动态数据版】
运用极简行代码实现省市二级联动【json动态数据版】map.html请查看:运用极简行代码实现省市二级联动【固定数据版】map.jsvar arr = [] //存数据$(function() { $.ajax({ // 获取json数据 url: 'map/map.json', dataType: 'json', success: function(res) { let _pro = document.getE原创 2020-12-18 11:20:14 · 397 阅读 · 0 评论 -
运用极简行代码实现省市二级联动【固定数据版】
运用极简行代码实现省市二级联动【固定数据版】固定数据(加到map.js开头)var area =[ { "proName":"广东", "cityName":['潮州','东莞','佛山','广州','河源','惠州','江门','揭阳','茂名','梅州','清远','汕头','汕尾','韶关','深圳','阳江','云浮','湛江','肇庆','中山','珠海'], }, { "proName":"广西", "city原创 2020-12-18 11:05:26 · 313 阅读 · 0 评论 -
微信浏览器切换页面不间断播放音乐解决办法思路
应用场景微信浏览器打开的H5页面不可能做到的,微信每跳转一次页面,就会销毁之前的页面,storage记录上次播放的时间也会消失,不过,ios手机可通过底部出现的左右导航栏切换页面的时候,storage不会被销毁,可以实现页面不间断音乐播放,但还是会有点不精准,上次记录播放的时间点有误差思路:使用的技术:localStorage.setItem(‘键’,值)localStorage.getItem(‘键’)localStorage.removeItem(‘键’)具体实现参考下面链原创 2020-12-16 17:22:51 · 983 阅读 · 0 评论 -
ios系统微信H5页面背景音乐自动播放
思路:在html页面代码内嵌小程序的代码块,可让ios手机自动播放背景音乐注意:微信小程序的代码块script脚本必须写在html文件,不可外部引入html代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxi原创 2020-11-04 11:35:32 · 1195 阅读 · 0 评论 -
js前端实现ios12和ios13+摇一摇功能
前言:做过H5摇一摇玩法的小游戏的朋友都知道,随着ios的系统升级,安全协议越来越严格,例如ios系统手机的运动和方向感控被限制了,必须得用户手动授权方可进行,前端为了要实现摇一摇功能,必须要具备以下思路。思路: ① 必须是https协议,即打开h5页面的链接开头必须是https://… ②摇一摇功能开启必须经过用户授权,必须用户手动点击确定。PS:相关H5页面操作,均是在微信浏览器打开html代码<!DOCTYPE html><html lang="zh-CN"&.原创 2020-11-04 10:20:26 · 2197 阅读 · 7 评论 -
解决ios手机select下拉选择不居中问题
解决ios手机select下拉选择不居中问题思路:select选择后赋值给span,select字体设置透明,span要设置不可点击html5代码<div class="page" style="position: relative;"> <span disabled>第 1 页</span> <select id='pageIndex' onclick="hasSelect()" onchange='pageChange(this.value原创 2020-09-07 17:59:15 · 1432 阅读 · 0 评论 -
vue动态绑定class和style,三目运算符条件判定
三目运算符vue语法#标签内容{{button? ‘取消’ :‘确定’}}【例子】<el-button class="button" type="primary" @tap="handleClick">{{button? '取 消' : '确 定'}}</el-button>#类名:class = “[className ? ‘xx’ : ‘xx’]”【例子】<input :class="[className ? 'class1'原创 2020-08-31 10:37:04 · 9066 阅读 · 0 评论 -
js checkbox全选和取消全选功能
全选和取消全选先来看下效果附上代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选和取消全选</title> <link re原创 2020-06-10 11:35:24 · 451 阅读 · 0 评论 -
JQ实现弹窗滚动背景页面不跟随滚动
JQ实现弹窗滚动背景页面不跟随滚动情景:当自己写的弹窗使用overflow滚动的时候,其背景页面也是设置了overflow可以滚动的,这时候当弹窗滚动到底部时,背景页面会开始滚动,而滚动弹窗没有反应了。解决问题:弹窗滚动,页面背景就不能滚动思路:当弹窗弹出时,设置背景页面的bodyposition属性值为fixed固定住页面不能拖动,并让它置于顶部,然后当关闭弹窗的时候再恢复背景 页面滑动...原创 2019-07-09 16:13:08 · 1347 阅读 · 0 评论 -
简易JS计算器
简易JS计算器<!DOCTYPE html><html><head> <title>原创--计算器</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text/css"...原创 2019-06-25 09:54:27 · 264 阅读 · 0 评论 -
实现单选(radio)和多选(checkbox)自定义选择样式
自定义单选和多选的radio和checkbox实现先看效果如图↓单选:123多选:12代码1//单选时的html代码<div class="Seleted"> <label class="border-bottom"> <input name="Select1" type="radio" hidde...原创 2019-04-25 17:20:04 · 3695 阅读 · 0 评论 -
踩坑:Vue.js中v-for和v-if不能同时使用
踩坑:Vue.js中v-for和v-if不能同时使用问题出现之时:v-if代码地方出现报错下面有红色的波浪线,具体报错信息大概是说v-for和v-if不能混用,取而代之要使用computed计算属性,让数组变量替换为返回的已过滤数组的计算属性。那就写一个计算属性呗在计算属性中已经是过滤了一次数组遍历项,这样写使得性能更优,而且代码不会再报错了!!!!...原创 2019-04-25 16:26:17 · 13137 阅读 · 8 评论 -
Html+Css+js实现计时器
Html+Css+js实现计时器人狠话不多,先上图实现原理:1.通过js控制图片的路径,动态替换图片2.通过js控制图片的显示或隐藏,动态替换图片一版的实现代码:game.html<body> <div class="game-startNumber flex"> <div class="staticTime"> &l...原创 2019-05-08 12:05:13 · 4306 阅读 · 2 评论 -
Vue项目解决iphoneX底部小黑条遮挡底部菜单栏布局问题
Vue项目解决iphoneX底部小黑条遮挡底部菜单栏布局问题1.先在公共样式里给body加上红色区域块的代码2.在入口文件的viewport的内容里使用viewport-fit=cover属性3.效果如图码字前:~~~~~~码字后:~~~~~~~~~引用该链接的见解实现↓https://blog.csdn.net/dx18520548758/article/details/8...原创 2019-04-11 14:36:51 · 4807 阅读 · 4 评论