- 博客(14)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 Vue组件的生命周期
Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。1、beforeCreate 在实例初始化之后，数据观测和event/watcher时间配置之前被调用。2、created 实例已经创建完成之后
2018-01-26 19:00:13
1547
2
原创 Mint-ui框架Index List 的应用，以及高度的适配问题
如何应用mint-ui框架的Index List实现滚动列表及索引导航功能？Index List的高度如何适配？以下是本人开发中一些经验的记录。Index List（红色区域）。 vue dom结构：看了一下Index List的源码，发现高度默认为window.innerHeight 减去Index List的getBoundingClientRect().top，也就是除了
2018-01-26 16:37:37
9565
原创 原生JS实现移动端模块的左右滑动切换效果，基于vue、stylus
原生JS实现移动端模块的左右滑动动画效果，基于vue、stylus大概实现方案：手指touch屏幕的整个过程，会派发touchstart、touchmove、touchend三个事件，对这三个事件设置相应函数，通过移动过程中位置的变化计算出偏移值，进行对应的设置。注：以下讲解请忽略数据（可用两个设置高度宽度的空dom代替），这篇博客只针对切换效果的实现效果展示①歌词未左滑：
2018-01-25 19:31:07
10794
原创 歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)1、需求分析：后台歌词接口返回的数据如下（base64字符串）： W3RpOua8lOWRmF0KW2FyOuiWm+S5i+iwpl0KW2FsOue7heWjq10KW2J5Ol0KW29mZnNldD owXQpbMDA6MDAuNTZd5ryU5ZGYIC0g...
2018-01-23 22:49:09
9216
13
原创 JavaScript实现双色球机选逻辑错误与正确的算法
JavaScript实现双色球机选逻辑的错误与正确算法看了下新闻，看到某某幸运儿机选中了巨额双色球的新闻，忽然对JavaScript机选程序的实现产生了兴趣，刚开始的想法是写个随机产生1-33之间的函数，产生六次，作为红球；然后随机产生1-16的数字作为蓝球；然后发现选出的红球有可能重复的情况，貌似没有最初想的那么简单。决定把我的两个想法做个记录。本来想直接写函数的，想想还是写成面向对
2018-01-18 20:58:04
4425
原创 音乐、视频播放模式切换实现方案及原理解析（基于vue、vuex、h5 audio）
音乐、视频播放模式切换实现方案及原理解析（基于vue、vuex、h5 audio）播放模式有三种：顺序播放随机播放单曲循环定义为一个playMode对象并向外暴露，内含三种播放模式，即为：export const playMode = { sequence: 0, loop: 1, random: 2}数据管理：通过vuex提供的语法当mapGet
2018-01-17 03:41:42
3198
原创 Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果需求分析：类似于大多数音乐播放器中等mini播放器控制按钮，显示播放进度，实时更新进度。progress-circle.vue源码： <circle class="progress-bar" r="50" cx="50" cy="50" fill="t
2018-01-16 00:35:40
4285
3
原创 基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释需求分析：①：进度条随着歌曲的播放延长，歌曲播放完时长度等于黑色总进度条长度；时间实时更新。②：当滑动按钮时，实时更新播放时间，橙色进度条长度也会随着按钮的滑动而改变，当滑动结束时，橙色区域停留在滑动结束的位置，歌曲从当前进度开始播放。③：点击进度条，橙色进度条长度变为点击处至起点的长度，并从当前点开始播放歌曲。
2018-01-15 21:49:23
13149
3
原创 Vue2.0+vuex+H5实现音乐播放及歌曲切换功能的方法及原理解释
最近在用mint-ui重写一个vue.js音乐App项目，做到播放器模块，感觉挺有意思，记录一下播放器歌曲播放及歌曲切换功能实现方法及原理。先上一张运行效果图（歌词尚未抓取、播放进度条及时间尚未开发）所需了解的知识：vue2.0、vuex（mapGetters、mapMutations等）、H5 audio标签
2018-01-11 00:24:30
11188
2
原创 使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]
使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]原理：W3C将DOM2.0模型中事件处理流程分为三个阶段：一、事件捕获阶段：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
2018-01-08 20:08:55
770
原创 JavaScript产生一个n到m之间的随机数
JavaScript产生一个n到m之间的随机数算法源码： // 实现方法 function getRandomInt(n, m) { return Math.floor(Math.random() * (m - n + 1) + n); } // 调用方法,产生大于等于23小于等于26的整数 console.log(getRandomI
2018-01-04 23:46:03
2721
原创 Vue2.0中子组件向父组件传递数据的方法，以完整demo演示
子组件child.vue源码：<template> <div class="child"> <button @click="sendData">点击向父组件传数据</button> </div></template><script type="text/ec
2018-01-04 20:24:44
780
原创 移动端页面滑动事件穿透问题及其解决方案
滑动事件穿透：在一个可滚动的列表页中打开弹窗，底部的页面理论上是不可滚动的，但是当滑动弹窗时，底部页面会跟随滚动，这就是所谓的页面滚动穿透的问题。解决方案一：当弹窗显示时，在父元素上添加fix类来禁用滚动；当弹窗隐藏时，移除fix类。 .fix{ height: 100%; overflow: hidden;
2018-01-03 18:55:56
3951
原创 谈谈JavaScript中编程实现以及使用内置方法实现进制转换
方法一：自己写逻辑实现说到Javascript下进制转换，可能你会想到自己编程实现：比如以下方法，是本人编写的将十进制转为二进制的方法： function toBinary(num) { var result = '' while(num >= 1) { if(num%2 == 0) { re
2018-01-02 16:54:17
444
mpvue音乐小程序项目源码/mpvue微信小程序demo
2018-11-14
vue2.0实现外卖APP商家模块，vue2.0实战项目例子
2018-01-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人