- 博客(29)
- 收藏
- 关注
RSS订阅原创 vue 实现页面内滚动条滑动时 按钮隐藏，滚动条停止时按钮显示
做到一个功能页面有个区域可以上下左右滑动，当滚动条上下或者左右滑动时按钮需要向下一动，隐藏起来，当滚动条停止滚动后，按钮在从下到上显示出来。1.获取可滚动条元素并增加监听事件。我这里的场景是在app内需要次功能。3.页面的显隐按钮及样式。2.触发滚动后逻辑函数。
2023-12-05 13:56:30
1057
原创 js 文件下载到浏览器 excel文件（.xls 、.xlsx ）
接口请求时，请求响应格式 设置为 responseType: 'blob'使用 new XMLHttpRequest 将相应格式改为 ‘blob’1.文件在oss 上面 接口返回的是oss文件地址 进行下载并更改文件名称。blob转file 获取url。调用接口获取oss上文件地址。2.接口返回的文件流 进行下载并更改文件名称。第一种情况：文件在oss上面。第二种情况：接口返回的文件流。本次所涉及到两种情况。
2023-11-09 10:39:56
1202
原创 符号换行和文字两端对齐充满当前行 & 解决ios 父元素 有定位时 滚动条失效
里面有一个功能是点击按钮弹出一个蒙层，蒙层上面显示一些图片文字，显示内容的模块有高度限制，内容较多就会超出内容模块的高度，就需要用到滚动条。在做项目时经常会遇到一放一些文字，文字右端排列不整齐和标点符号换到下一行开头；但是在ios上发现滚动条失效了，完全不能滑动了。2、解决ios 父元素 有定位时 滚动条失效。1、符号换行和文字两端对齐充满当前行。最近在做一个项目，遇到的一个问题。
2023-05-24 12:06:31
277
原创 微信小程序 video 全屏时 覆盖在原生组件之上的内容 不显示
小程序提供了俩个标签cover-image： 覆盖在原生组之上的图片视图cover-view：覆盖在原生组件之上的文本视图需要将需要覆盖在video之上的标签 放到video标签内<video id="myvideo" title="视频" autoplay src="视频地址"> <cover-view class="anthology">选集</cover-view> <cover-vie.
2022-04-20 14:04:11
2154
1
原创 微信小程序 video 横屏全屏播放完成 改变 小程序 方向
列表页面是竖屏，点击列表跳转的视频播放页面，播放完成时回退的列表页，发现小程序的方向变成了横屏，再次进入小程序又变成了竖屏。此问题只在安卓手机上发现，iOS为发现解决方法在 onShow 方法中使用 wx.setPageOrientation({ orientation: 'portrait' }); 给当前页面在设置一次屏幕方向，发现还有一部分手机有问题。增加了100毫秒的延时就可以了orientation 可以取值以下portrait 竖向landscape 横向auto
2022-04-15 11:06:12
4431
原创 微信小程序 保存图片 wx.saveImageToPhotosAlbum
保存图片到手机1.微信公众平台配置 域名 开发管理 - 开发设置 -downloadFile合法域名 - 可能有延时下重启编译器2.调用函数 先wx.downloadFile 在wx.saveImageToPhotosAlbumpreservationBtn() { wx.showLoading({ title: '保存中...' }) let self = this; wx.downloadFile({ //下载文件...
2022-04-13 09:24:45
3906
原创 微信小程序 单个页面横屏 & 整个小程序设置横屏
portrait 竖向 （默认）landscape 横向auto 自适应单个页面：1.单个页面的.json文件内增加{ "pageOrientation": "landscape"}2.js文件中使用 wx.setPageOrientation 进行屏幕方向设置wx.setPageOrientation({ orientation: 'landscape' })整个小程序：app.json中加入"window":{ "pageOrientation
2022-03-21 15:38:08
9431
1
原创 页面横向滚动条不能滑动
最近做个需求 里面有个小功能 超出的标签可以滑动手机模式有滚动条但是不能滑动发现有个属性：touch-action 用于指定某个给定的区域是否允许用户操作touch-action: pan-y; 启用单指垂直平移手势修改为：pan-x 或者 auto 均可所有的属性关键字 感兴趣可以看一下touch-action: auto;touch-action: none;touch-action: pan-x;touch-action: pan-left;touch-act
2022-02-24 16:46:52
1087
原创 echarts x轴 只显示最小和最大两个值
axisLabel:{ interval: 900000000, //度标签的显示间隔 前一个标签和下一个标签的间隔 showMaxLabel: true, //是否显示最大的 margin: 13, align: 'center', formatter: function (value, index) { //给第一个标签 和 最后一个标签 增加标识 设置样式用 let text = ''; if(0 =...
2022-02-21 10:17:53
1414
1
原创 :style 使用写在计算属性 computed 里面的函数并传递参数
<div v-for="curr in item.child" class="info_detailed" :style="childInfoWidth(curr.ratio)"></div>computed: { childInfoWidth(ratio) { let difference = (100 - this.vm.part6.memberRatio[0].ratio * 100) / 2; return .
2021-11-30 10:32:55
2760
1
原创 vue :style 使用calc()
css calc() 可以给% 和 rem等单位加减px可以给100%的宽度减掉15px.title{ width:calc(100% - 15px);}如何在:style使用calc()<div :style="aaa"></div>aaa() { let w = '50%'; let ml = '10%'; return {width: `calc(${w} + 2px)`, marginLeft: `calc(${..
2021-11-29 20:34:34
12747
原创 vue页面内嵌iOS App搁置一段时间后this.$router.push跳转失效
最近发现了一个问题页面内嵌在App内搁置一段时间后跳转失效了原本以为是@click失效了 测试后发现点击有效 this.$router.push未生效感觉像是this失效了this.$router.push({ path: '/home'})解决办法1.引入router 使用router.push进行跳转import router from "@/router"router.push({ path:'/home'})2.使用a标签跳转3.使用wind
2021-11-18 19:40:58
3270
原创 html2canvas ios 15.0截屏 变黑 页面刷新
查阅资料 说是font-family引起的修改页面所有的font-family目前只有iOS 15 版本内发现问题*{font-family: Microsoft YaHei!important;}覆盖掉font-family就好了
2021-11-15 20:23:18
2102
原创 vue v-html 内的标签样式不生效 /deep/ & ＞＞＞
使用深度选择器/deep/ & >>><p v-html="text"></p>text = '文字文字文字<span>变色文字</span>'less 或者 sassp{ font-size: 12px; color: #333; /deep/ span{ color: #f00; }}cssp{ font-size: 12px;..
2021-11-04 10:09:55
648
原创 echarts绘制的图标上下左右存在间距
option 里增加以下代码 改变组件距 上下左右的距离grid: { top: '50px', left: '0px', right: '0px', bottom: '20px'},
2021-10-21 11:23:28
1268
原创 css文件缓存问题 增加版本号也不生效
最近修改了一个css文件一开始增加个版本号文件就会更新，过了一天增加版本号文件就不更新了，浏览器的css文件就怎么也不更新，着实难受浏览器会将image、css、js缓存到本地中image 和 js 增加版本号后 基本没有遇到过文件未更新解决方案1. 手动增加版本号<link rel="stylesheet" type="text/css" href="css.css?v=1.1">2.增加随机数作为参数。<link rel="stylesheet"...
2021-09-15 15:47:14
549
原创 微信h5页面图片预览
引入js文件<script type="text/javascript" src="/res/js/jweixin-1.1.0.js"></script>方法1：#content 为 此id 范围内的图片可预览function imgPreview() { $("#content").delegate('img','click','img',function(){ var imgsurl=[]; var nowurl='.
2021-09-14 11:01:28
817
原创 数组按照字母排序 abc 排序
使用字母的 Unicode编码进行排序var arr = ['a', 'b', 'c', 'A', 'B'] ;以此arr为例，这里是每个字母的Unicode编码a - b 从小到大b - a 从大到小var arr = ['a', 'b', 'c', 'A', 'B'] arr.sort(function(a, b) { return a.charCodeAt(0).toString(16) - b.charCodeAt(0).toString(16)...
2021-09-07 19:23:57
1643
原创 页面点击返回按钮 或 侧划 触发返回操作时 拦截返回
h5页面触发返回需要弹出一张图 或者 文字某些app侧划关闭webview 无法拦截本文代码 只执行一次返回监听,再次触发将返回页面this.aaa(); // 页面初始时调用aaa() { window.history.pushState(null, null, document.URL); //监听页返回 window.addEventListener('popstate', this.bbb, false);}bbb() { aler.
2021-09-03 17:35:22
415
原创 vue 绑定背景图片 :style
:style="bgc"1.图片是在别的服务器：bgc: {backgroundImage: 'url(你的图片路径)', // 例https://.......},2.图片在本地：bgc: {backgroundImage: 'url(' + require("@/image/你的图片.jpg") + ')',},...
2021-08-27 10:51:24
390
原创 微信公众号h5页面禁止用户调整字体大小
微信公众号内 h5页面，使用计算后的单位 rem 时，用户调整字体大小会导致页面字体、元素的宽高变大活变小，导致页面布局错乱this.prohibitAndroidAdjustmentSize();prohibitAndroidAdjustmentSize() { if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') { this.hand
2021-08-25 11:58:40
1358
原创 html元素拖拽 标签拖拽
调用发方法 传入要拖拽元素的idelDrag (id)；兼容 pc端 & 手机端只做左右吸附 上下超出未做限制放开位置小于宽度50%靠左吸附，大于50%靠右吸附 elDrag (id) { var dragEl = ''; var bodyWidth = $(document.body).width(); var flag = false; var cur = { x:0, y:0 }; var nx = 0; var ny = 0
2021-08-23 10:09:04
502
原创 上传图片可剪辑 生成带二维码的图片 截屏成一张图片 cropperjs、html2canvas、canvas2image、qrCode
项目中复制而出，如有多余代码删除即可坑：ios系统不同版本相机拍出的照片有点会有旋转 和 拍照时拍摄去比例也有关本文以ios 13.5 和 照片旋转数 为判断条件 <div class="s-page-content" id="s-page-content"> <div class="poster_content" id="poster_content" v-show="!isGeneratePos...
2021-08-16 16:20:12
342
原创 vue 中修改css样式不生效
修改css不生效 使用 !important也不生效时 使用 /deep//deep/#qrcode{width:200px;}
2021-08-16 14:02:58
1474
原创 html2canvas截屏、绘制透明图片 .png
html2canvas(content, {useCORS: true, //允许跨域width: width, //dom 原始宽度height: height,scale: scale,dpi: window.devicePixelRatio,taintTest: false,backgroundColor: null,}).then((canvas) => {html2canvas(content, {useCORS: true, //允许跨域widt
2021-08-06 14:56:20
1735
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人