- 博客(46)
- 收藏
- 关注
RSS订阅原创 VUE监听（动态/实时）获取元素的宽度变化
1920*1080的云图效果能自适应显示，所以得实时获取屏幕的宽度，然后用屏幕的宽度和1920的宽度进行对比，计算出占比，然后用CSS3的transform scale来实现自适应。在utils文件下创建directive，然后directive文件夹下创建一个resizeObserver.js文件。是可以监听到DOM元素，宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度。第二步：在directive文件夹再创建一个index.js文件，目的是为了集中注册自定义指令。
2023-12-18 10:21:04
1312
原创 小程序 词云图 echarts-for-weixin-wordcloud
这个是适配与小程序版的词云图，之前有找到ucharts来代替，但是ucharts的词云图功能有两个缺点：1.无法根据值的大小显示词云图的大小；2.显示的顺序是随机的。第一个还比较好解决，自己写一个方法就可以处理了，但是第二个就处理不了了，没法达到echarts自带的那种显示方法。这样处理就没啥问题了。
2023-10-07 15:57:53
1048
3
原创 vue2.x 迭代更新项目去掉缓存处理
然后在.js和.css前面加上.${Version}就可以了（注意得把原本的''换成``）找到build文件下的webpack.prod.conf.js文件。定义一个常量version。
2023-09-26 17:25:44
405
原创 小程序 解决自定义弹窗滚动穿透问题，解决弹窗背景内容滚动问题
可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动，如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。当出现弹窗时，为wxml最外层元素动态添加fixed类。但是这种方式会导致页面自动回到顶部。* 生命周期函数--监听页面加载。/*获取屏幕高度*/
2023-09-25 16:59:04
1025
原创 vue 监听页面卷去的高度，获取元素离页面顶部的距离
得换成this.$refs.xxx.$refs.yyy[0].offsetTop(xxx为子组件得ref，yyy为子组件里面的元素ref)//this.$refs.$el.tag.xxx.offsetTop(这是网上找到的，但是我实测不行)，下面是获取元素离页面顶部的距离的使用方法。//在这里就可以写监听逻辑了。1.首先在mounted生命周期上。2.也别忘了在离开页面前去掉监听。// 监听页面滚动事件。3.方法的使用methods。
2023-09-25 11:40:10
1435
原创 vue使用swiper轮播组件开启loop模式点击不了问题处理
1.原本在这里的点击事件换成 :data-href="func_str(item)"//拿到item之后就可以进行自己原本第1步那里的事件了。3.在原本的调用调用轮播图方法里面加入点击事件。2.在methods里面写好方法。
2023-09-15 21:44:10
406
原创 vue 文件url转文件流下载方法
fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址。
2023-05-25 09:32:44
1715
原创 vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
这里写自定义目录标题页面空白问题一：修改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。问题二：这个坑是当你使用了路由之后，在没有后端配合的情况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的情况，问题三：图片或字体路径不对问题页面空白原因：打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。问题一：修改一下config下
2020-09-04 18:48:22
1107
原创 Vue项目分环境打包、运行server
参考地址：https://www.jianshu.com/p/5218ad9e0129；或者：https://www.jianshu.com/p/320d9efccc6a
2020-08-19 10:22:26
159
原创 jq 实现老虎机抽奖
1.首先，得下载jquery.slotmachine.js的文件引入2.调用：var machine1 = $(".machine1").slotMachine({ active : 0, delay : 500});var machine2 = $(".machine2").slotMachine({ active : 0, del...
2020-08-19 10:20:29
563
转载 如何搭建一个vue项目(完整步骤)
如何搭建一个vue项目(完整步骤)参考资料一、安装node环境1、下载地址为：https://nodejs.org/en/2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。检查是否安装成功：
2020-08-18 10:42:59
10754
3
原创 解决ios13+动作与方向的权限的获取问题，从而导致无法实现摇一摇
function iosGrantedTips(){ var ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("like mac os x") > 0){var reg = /os [\d._]*/gi ;var verinfo = ua.match(reg) ;...
2020-04-09 17:46:55
10488
9
原创 js移动端判断手机系统
var u = navigator.userAgent;if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机alert("安卓手机");// window.location.href = "mobile/index.html";} else if (u.indexOf('iPhone') > -...
2018-12-29 10:21:50
206
原创 Vue：不同页面之间的传递参数--params
1.参数在url中显示首先你要确定自己要传的参数，并在控制路由的文件中的Router中path内添加对应的字段如：{ path: '/details/:id', name: 'details', component: details}我要传的参数是活动id。在你要跳转的组件内定义参数，如：var info = {id:"123",mes...
2018-10-22 18:10:24
3764
1
原创 js判断ios还是android
js判断客户端是否是IOS或者是Android//如果返回true 则说明是Androidfunction is_weixin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { ret...
2018-07-31 18:14:53
2289
原创 js获取手机的重力感应
window.ondevicemotion = function(e) { var accGravity = e.accelerationIncludingGravity; var ax = event.accelerationIncludingGravity.x ; };
2018-07-17 13:47:53
2607
原创 git（码云）的使用：线上代码和线下代码的统一
一.SSH公钥的生成1.打开码云的设置选项，选中SSH公钥选项2.公钥的生成：b必须得先安装好git,验证电脑上是否安装好git可以直接通过cmd敲git --version的命令来查看git版本，同时也可以版本来验证电脑是否安装了git...
2018-05-27 23:28:39
2786
1
原创 Sublime Text 3安装及常用插件安装
1. 崇高文字3下载：直接上百度输入Sublime Text 3点进官网，然后点导航栏的下载按钮进去，就可以看到选择不同操作系统的下载2。 Sublime Text 3安装：傻瓜式安装，一直点下一步即可。3. Sublime Text 3插件配置：使用Package Control组件的安装的方式按 Ctrl +`（此符号为tab按键上面的按键）调出console（注：避免热键冲突） 粘贴以下...
2018-05-22 16:04:13
353
原创 js判断手机操作系统
1，要引用文件：<script type="text/javascript" src="js/mobile-detect.min.js" ></script>2，为了方便我把判断弄成一个函数：//判断是操作系统function getOs(){ var systemOS=-1;//操作系统 -1为未知 0为IOS 1为安卓 var model = ""; tr...
2018-03-29 11:10:17
871
原创 CSS实现单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;接下来重点说一说多行文本溢出显示省略号，如下。实现方法：display: -webkit-box;-webkit-bo...
2018-03-08 15:56:04
147
转载 vue.js 2.x 版本脚手架中没有dev-server.js 如何进行数据模拟
参考了别人的代码，可以用，记下来：最新的vue里dev-server.js被替换成了webpack-dev-conf.js在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改第一步，在const portfinder = require(‘portfinder’)后添加第二步：找到devServer,在里面加上before（）方法以下为json数据：PS：所有的修改配置都需要...
2018-03-06 16:32:12
1318
原创 60行jq代码实现棍子英雄
html:<div class="wrap"> <div class="gamePage"> <div class="persons"> <img src="img/chook.gif"/> </div> <div class="stick"&am
2018-02-28 09:19:58
2204
原创 jq 实现简单版别踩白块儿（40多行jq代码）
html: 倒计时：0分数：0css:.wrap{width: 100%;height: 100%;position: relative;overflow: hidden;}.gamePage{width: 100%;height: 100%;position: absolute;left: 0;top: -2
2018-02-06 09:34:34
551
原创 textarea框内容的改变，触发其他事件的改变
$('.redeem_code').bind('input propertychange', function() {var redeemCode_text = $(".redeem_code").val().trim();var redeemCode_strs = redeemCode_text.split('\n');var redeemCode_length = redeemCo
2018-01-31 14:22:32
5592
转载 background-attachment:fixed在ios中失效
今天做了个页面，往页面中添加内容，添加多了才发现，背景图重复了，然后上网找解决办法，灵机一动，让背景图不动就好了，于是找到了background-attachment:fixed，在安卓中没问题，但是ios的微信无效，用Safari打开也是无效，后来找到一个hack的方法，不错，分享一下。body:before { content: ' '; position: fixed;
2018-01-30 10:16:51
2448
原创 IOS系统 Input或者textarea Disabled默认样式问题
问题：Input或者textarea在设置了disable之后在安卓手机上显示正常，但ios系统手机上就会显示背景为半透明，字体颜色为灰色。解决方法：input:disabled, textarea:diabled { -webkit-text-fill-color: #000; -webkit-opacity: 1; color: #000;}
2017-12-18 17:22:35
1967
原创 js实现tab菜单（选项卡）
//获取DOM元素var box = document.getElementById('box'); //最大的盒子var ul = box.children[0];var div = box.children[1];var liArr = ul.children;var divArr = div.children;for(var i=0;i liArr[i].
2017-11-24 09:54:05
1652
原创 css的position在不同手机系统的兼容问题（点击input标签弹出输入框影响样式）
问题描述：在input被获取焦点时，屏幕上position属性值为absolute的元素，包含input，会被弹出的虚拟键盘顶起，导致显示样式异常设备：安卓设备存在此问题，而ios设备显示正常原因分析：css属性中对容器的样式中提到，子元素定位方式为absolute或者fixed，若父容器没有添加属性position:relative；则当前元素的定位坐标是
2017-11-22 15:17:53
3004
原创 js实现获取手机机型和系统
首先得下载一个js插件。地址：https://github.com/hgoebl/mobile-detect.js/代码的实现效果如下：script src="js/lib/jquery-1.11.1.min.js">script> script src="js/lib/mobile-detect.min.js">script> script>
2017-11-15 19:15:24
8616
原创 js实现加载公共html页面
$(document).ready(function(){ $(function() { $('nav').load('/UI/web/System/_Public/nav.html'); });})
2017-11-09 10:17:30
7415
2
原创 js实现微信摇一摇以及震动
// 摇一摇var shakeFlag = true; //定义是否在摇动var SHAKE_THRESHOLD=4000;//定义一个摇动的阈值var last_update=0;//定义一个变量记录上一次摇动的时间var x=y=z=last_x=last_y=last_z=0;//定义x、y、z记录三个轴的数据以及上一次触发的时间function initShake()
2017-11-08 16:41:15
2583
原创 window对象下获取的屏幕宽高
1.浏览器的内部窗口宽度（兼容写法）：window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth 浏览器的内部窗口高度（兼容写法）：window.innerHeight || do
2017-10-23 10:27:22
2375
原创 css的配置文件reset的总结
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, stron
2017-10-18 14:54:28
358
原创 js处理移动端有虚拟按键影响页面布局的处理方法
//针对移动端有虚拟按键导致高度短影响整个页面的布局给予滚动条处理function set_screen(wrap){var s_height = document.body.clientHeight; var s_width = document.body.clientWidth;var proportion = s_height/s_width;if(proportio
2017-10-18 14:40:29
3326
原创 jQuery九宫格抽奖功能的实现
var lottery={ index:-1, //当前转动到哪个位置，起点位置 count:0, //总共有多少个位置 timer:0, //setTimeout的ID，用clearTimeout清除 speed:10, //初始转动速度 times:0, //转动次数 cycle:50, //转动基
2017-10-18 14:25:52
5094
10
原创 原生js实现公告栏向上滚动
window.onload = function(){//调用滚动条函数的界面notice(".notice_ul",5);，}function notice(node,num){//信息滚动，获取ul的dom元素var news_move = document.querySelector(node);//获取li的高度var li_height = news_mo
2017-10-17 10:00:09
3705
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人