shuai1999m的博客

原创 Vue2搜索框实现indexedList索引列表-锚点跳转，附带数据动态绑定、多选、单选、搜索功能

简述：如何在pc端实现像手机移动端才有的indexLIst索引列表呢，查阅很多组件库，都没能找到相应组件，那只能自己来手搓了。这里代码中都有注释，样式，js一并贴入，看不懂那我也没办法了，强调一点，其中字母索引，和children是必须的！这里vue版本vue2.0，QQ录屏20240702160508。深拷贝方法，网上自行百度找吧。

原创 uniapp多端编译；scss使用data变量问题记录

当你配置完后会发现小程序毫无反应，其他端正常，选择。这样scss中使用就生效了。

原创 图片路径转base64（h5,小程序，PC端），两种方案

图片路径转base64（h5,小程序，PC端），两种方案

原创 js剪辑视频使用gif.js生成GIF效果

视频上传此处省略，简单说下实现方式，当视频上传完成后，赋值给video，通过监听canplaythrough事件来执行对视频的处理，然后通过画布裁剪为图片数组，然后通过gif.js生成GIF。 video的**crossOrigin**属性一定要配置，视频要自动播放，否则触发不了**canplaythrough**事件！

原创 关于uniapp自定义标题栏，高度自适应对齐方案解决

uniapp多端开发，自定义标题状态栏高度问题解决方案

原创 uniapp获取后端接口返回图片，渲染方法

uniapp获取后端接口返回图片，渲染方法适配微信小程序，APP

原创 uniapp微信小程序subPackages分包处理（保姆教程）

uniapp上传微信小程序代码到小程序管理后台时提示错误码80200，如图所示：错误原因：我们打开详情看到基【本信息-本地代码】，可以看到整体包的大小，如图：此时包的大小已经大于提示的了2mb！解决-分包请仔细阅读官方的subPackages分包说明接下来让我们操作起来：1、在manifest.json文件中找到源码视图，配置subPackages2、创建分包的文件，根据个人需求配置多个包，这里只分了一个包pagesA，把需要分包的文件复制到pagesA中，这里值得注意的是，在你复制

原创 uniapp使用页面传参，传递数组的方式----代码记录

页面传参方式：moreFilter() { uni.navigateTo({ url: './more-filter?engineTypes=' + encodeURIComponent(JSON.stringify(this.engineTypes)) });},页面接收：this.engineTypes = JSON.parse(decodeURIComponent(option.engineTypes))

原创 关于script引入百度api方法无用问题解决

关于script引入百度api方法报错问题解决！！！！

原创 关于地图多点展示，并可展示各自的信息窗口

地图api循环遍历点位信息窗口不同步问题

原创 关于地图坐标不居中显示，显示在左上角的问题

在使用百度地图javascript API时，出现地图坐标不居中，展示在左上角，出现情况：tab切换选中提车信息时地图在切换到提车信息时才展示出来，，所以在这之前地图div长宽都是为0的情况，然后再切换到提车信息时，盒子展示，但地图在页面初始化的时候已经加载好了，所以很简单，在点击到提车信息时，在对地图进行一个初始化加载，然后就能完美解决问题亲测！！！...

原创 关于uniapp小程序发布新版本，小程序不及时更新问题记录

小程序更新机制开发者在管理后台发布新版本的小程序之后，微信客户端会有若干个时机去检查本地缓存的小程序有没有新版本，并进行小程序的代码包更新。但如果用户本地有小程序的历史版本，此时打开的可能还是旧版本。未启动时更新微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序，尽可能保证用户能够尽快使用小程序的最新版本。总的来说，开发者在后台发布新版本之后，无法立刻影响到所有现网用户，但最差情况下，也在发布之后 24 小时之内覆盖绝大多数用户

原创 css文本超出 自动换行

.card-item { width: 32%; font-size:28upx; word-break: break-word;//文本超出 自动换行 }

原创 根据日期判断是否大于1年（12个月）

这里使用的jq获取日期，可根据自己的方式更改代码var time1 = new Date($("#prodDateStr").text())var time2 = new Date($("#initialRegistration").text()) if(time1 && time2) { var diffyear = time2.getFullYear() - time1.getFullYear() ; if(diffyear >= 1) {//判断年份是否大于1

原创 下载excel方法

function exportExcel(){ var m_url = '接口' var xhr = new XMLHttpRequest(); xhr.responseType = "arraybuffer"; xhr.open("POST", m_url, true); xhr.onload = function () { const blob = new Blob([this.response],.

原创 解决canvas画布图片跨域问题

设置图片crossOrigin属性image.crossOrigin = 'Annoymous'crossorigin有如下取值：anonymous：执行一个cors请求，但是该请求不会发送相关证书，例如cookie。服务器需要相应的设置Access-control-Allow-Origin响应头，图片才是未被污染的。use-credentials:执行一个cors请求，该请求会发送相关证书，携带cookie和http基本验证信息。服务器需要相应设置Access-Control-Allow.

原创 input框自定义验证

原创 利用画布canvas，实现图片编辑马赛克效果。canvas.putImageData()实现不一样的马赛克

接到需求修改马赛克的样式，不知所措~，开始研究，实现效果如下图重点都在代码注释中，就不多解释了 drawImageToCanvas(image) { const canvas = document.querySelector('#canvas') const ctx = canvas.getContext('2d') return new Promise((resolve, reject) => { image.onload = functio

转载 h5页面下载apk方法

需求描述接到的原始需求是这样的，有一个H5页面，页面中有个“点击下载”的按钮，点击之后，完成下载特定的apk。大概是下面这样的?：图片描述需求分析接到需求的时候我偷乐了一下，这个H5页面最大的优点是不在微信中使用（微信好坑，各种限制，基本上从微信浏览器里面实现直接下载apk是不太可能的），如果是在平常的浏览器的话，就简单多了。功能实现于是我想到了第一种，点击下载按钮的时候改变location.href。方法一：// 我随便找了个apk的下载链接举个例子window.location

原创 关于uniapp全量更新、增量更新-app端

关于uniapp app端更新的两种方式：全量更新（apk）增量更新（wgt包）注意事项真机测试情况下获取的appId为“HBuilder”，不是我们在manifest.json中配置的appId，需在打包安装后才能获取配置的appId每次打包的版本号需大于上次的版本号增量包安装后需通过“plus.runtime.restart()”api重启app才生效plus.runtime.getProperty方法只在app下才生效，小程序方面也有专门的api下载进度可视化通过onPro

原创 滚动条样式修改，隐藏区域实现可滚动

隐藏区域实现可滚动.chose-salesman { overflow-y: scroll;}滚动条样式修改.chose-salesman::-webkit-scrollbar{width:4px !important;height:1px !important; }.chose-salesman::-webkit-scrollbar-thumb:horizontal:hover {background-color:#c5c5c5 !important;transition: 0.5s al

原创 uniapp使用页面通讯$on、$emit进行数据传参，页面不刷新问题

根据本人研究半天，经过数次测试发现跟路由跳转的方式有关只有以下两种方式路由跳转，页面通讯数据才生效uni.navigateBack()uni.switchTab()亲测！！！！

原创 uni-app小程序、app返回上级页面并向上级页面传参（1.$on/$emit,2. 页面栈getCurrentPages()）--问题记录

二级页面onBackPress(e) { //监听返回事件api、与methods同级 uni.$emit("handClick",{//点击返回的这个页面触发一个事件，使用uni.$emit(“handClick”,{}) rightText: this.rightText, //传递的参数 checkedBoxArray: this.checkedBoxArray }); uni.switchTab({ //返回的页面的路径 url: '/pages/like/index' })

原创 uniapp项目中app、小程序页面底部显示正常，但ios页面底部显示被隐藏

只需要给page加入样式page { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); margin-bottom: 110upx;}

原创 使用tinymce富文本编辑器二次修改渲染问题

首次修改后进入其他页面富文本编辑器，内容区显示都一样的：想了半天不知道为什么，此时就想到v-if组件，使组件创建销毁，默认布尔类型为true、进入页面后赋值false然后使用$nextTick让布尔赋值为true，此时在进入其他页面会发现，渲染数据是不一样了，但我输入的内容没有被动态绑定的value取到，然后我使用input事件，从新给value赋值，这样就好了...

转载 uniapp转换富文本方法

https://blog.csdn.net/qq_37682202/article/details/100522172?ops_request_misc=&request_id=&biz_id=102&utm_term=uniapp%E5%A6%82%E4%BD%95%E5%B1%95%E7%A4%BA%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E7%9A%84%E6%96%87%E5%AD%97&utm_medium=dist

原创 创建动态id、class

props接受父组件传递的id值props: { id: { type: String, default: function() { return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '') }//随机数 }, }， data() { return { tinymce: this.id }

原创 JS方法map/forEach/findIndex/reduce/filter

map// map//作用：对数组进行遍历//返回值：新的数组// 是否改变：否var arr = [1,3,4,7];var ret = arr.map(function(value) { return value + 1;});console.log(ret); //[2,4,5,8]console.log(arr); //[1,3,4,7]forEach// forEach 方法// 作用：遍历数组的每一项// 返回值：undefined// 是否改变：否v.

原创 键盘事件使用

绑定键盘事件<i class="el-icon-d-arrow-left" @keyup.right.native="goUp" />注册全局键盘事件window.addEventListener('keyup', this.handleKeyup)handleKeyup(event) {//event键盘ASCII 码，键盘事件触发 if (event.keyCode === 37) { this.goUp()//调用方法 } else if

翻译 addEventListener() 方法

先看个例子：document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World";});定义和用法addEventListener() 方法用于向指定元素添加事件句柄。提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。语法

原创 时间选择器DatePicker ：只能选择当前时间后x天的时间

<el-form-item :label="$t('下次跟踪时间')"> <el-date-picker v-model="entrustTrackForm.nextTrackTime" :picker-options="pickerOptions" type="datetime" placeholder="选...

原创 js对Number类型取整，取余，四舍五入，向上or下取整--代码学习记录

js对Number类型取整，取余，四舍五入，向上or下取整

原创 全国城市根据首字母分类json格式

[ { name: "A", citys: ["阿坝", "阿拉善", "阿里", "安康", "安庆", "鞍山", "安顺", "安阳", "澳门"] }, { name: "B", citys: ["北京", "白银", "保定", "宝鸡", "保山", "包头", "巴中", "北海", "蚌埠", "本溪", "毕节", "滨州", "百色", "亳州"] }, { nam.

原创 Vue搜索框实现indexedList索引列表功能，锚点跳转--代码记录

@PC端搜索框实现index索引列表功能–代码记录实现效果领导提出莫名奇妙的需求，实现效果如上图，直接上代码父级代码 <el-popover placement="bottom" width="250" v-model="visible">//这里使用的是element-ui组件 <index-list class="indexArea" @closeList='c

原创 git push 报错：! [rejected] master -＞ master (non-fast-forward) error: failed to push

! [rejected] master -> master (non-fast-forward)error: failed to push some refs to ‘https://gitee.com/nanjing-zili-network/Cloud_Web’提交代码时出现报错1.解决办法：$ git pull origin master --allow-unrelated-histories2.重新开始提交代码：$ git add .$ git commit -m