qq_45219069的博客

手动实现 switch 组件，可调节大小

vxe-table 渲染器的使用

之前也有被问或者听说 如果给你一万条数据，你怎么渲染？，当时觉得为什么会这么问，不是有分页或者上拉加载吗？分页和上拉加载确实能解决这个问题，不过这和虚拟列表是两码事。解释： 不管是分页，还是上拉加载，有一万条数据其实就会渲染一万条dom，dom过多无疑对滚动的流畅性或性能都有一定的影响。区别： 虚拟列表在于，哪怕有一万条数据，列表中只会渲染一部分dom（通常是正常可见的部分dom）。相信看到这里应该就明白不同之处了吧！过程分析：如上图，这是一个正常列表的模型，当我们往上滑动时，dom就会不断加载

最近新增一个抽奖小模块，就是扭蛋机的形式，产品给了参考网页，奈何不好扒下来用，只得自己动手干了，不多bb，先看效果吧！效果图：动画分析由上面gif可看出，整个动画分为四个部分扭蛋随机（也不算随机吧）在固定盒子内跳动中奖扭蛋下落中奖扭蛋移动到中心，并且逐渐放大中奖扭蛋做出扭开姿势，缓慢打开整个过程分析好了，貌似还不难，那就一步一步来实现实现步骤一，盒子内随机跳动在实现跳动前，先要做的一步是，尽可能把蛋摆放的随机，自然一点，怎么做？当然是定位啦。 我比较懒，于是计算了大概边界位置（我将

前几天在好朋友楼上小黑的介绍下，看到了某个平台的官网，里面有一个人物介绍的模块，里面的动画感觉不错，于是就自己动手写了一个。1.0 原官网示例当然这里去掉了具体信息，原网站是里面圆圈中是人物的头像，旁边是介绍信息，每个人物就沿着圆弧移动到指定位置2.0 我们实现的结果当点击中间开始时，几个小球一次转动到固定角度3.0 简单分析下要让小圆在圆弧上动，我们只需要知道圆心在圆弧上的坐标（x,y）就行了所以当我们知道外圆的半径，小圆的半径，以及角度再利用三角函数就可以计算出 小圆在圆弧上定位的位

经常使用vant组件库，今天也是有空去看了看vant源码，看看能不能薅到点什么骚操作，菜是原罪，于是选择了个人认为的软柿子 Toast 来学习。1、回忆写法我们在使用中经常是 this.$toast({ option })，或者单纯的使用 Toast(xxx),里面可以传递对象，也可以传递单个内容，也可以通过指定的方法（success，fail）等方式来调用2、Toast小细节多次调用只会有一个Toast存在多次调用Toast的层级会递增可以配置forbidClick实现阻止背景穿透…正如

今天突然要做一个竖直滚动老虎机，可以设置中奖位置，以及中奖回调，然后再带点常规的滚动动画，还是有点意思，和之前的转盘抽奖有点类似，有兴趣可以看下。简单分析下UI，ui的话，就简单点，三个列表从下往上滚动，搞个框罩住 css的活，应该简单。动画，老规矩，我们采用之前的方案，动态设置 css，可以搞定。设置中奖位置，我们可以想传递一个数组，类似 [1,2,3] 这样，数组每一项代表停留位置，那我们就可以计算得css应该平移的距离值，至于动画结束后，还是参照以前的，监听动画结束就可以了。先看看效果h

1.0 思路整理转盘抽奖很常见，之前也没写过，现在有空来写写，分析如下：1.1 转盘旋转 ? ----- 可以用 transform 的 rotate 来解决1.2 旋转动画 ? ----- transition 过渡来处理1.3 停留目标位置及中奖提示 ？ ------ 通过控制旋转角度控制停留位置，中奖提示，考虑添加回调1.1 开始行动上面的思考，我们知道了大概要实现的步骤，首先我们搞张图片这个圆盘有 10 份，每一份 360/10 = 36deg，假设要停留在第二个---->

1.0今天在看小米11官网介绍时，看到淡入的动画，觉得不错，于是来写写看https://www.mi.com/mi11 官网地址2.0简单分析其实原理很简单，就是添加一个动画.fade-in-bottom { animation: fade-in-bottom 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.1s both;}@keyframes fade-in-bottom { 0% { transform: tra

1、缘由：现在多数移动端网页有些按钮需要吸顶，尤其是落地页，按钮的吸顶有助于得到更多的注册量2、思路：其实大多思路都没得错，多数是 记录吸顶元素距离顶部距离 然后 监听滚动事件，获取当前滚动高度，然后和 记录的距离相比较let viewTop = this.$refs.ele.getBoundingClientRect().toplet scrollHeight = xxxscrollHeight > viewTop ? 吸顶 : 取消吸顶通常记录滚动高度是有兼容的，写的太烦了le

1、前言想起之前一次在写一个小程序商城时候，详情页的类似锚点的跳转花了我不少时间，因为刚写，对小程序滚动，滚动距离那套不熟悉加之本身对什么滚动高度，元素距离顶部距离不是很了解，花了挺长时间的，这几天有空，就研究了下。2、先看效果额，tab点击没有加效果，看着不明显，你懂我的意思就行 哈哈，电商里面最常见了3、页面搭建先搞一个 tab，然后下面就是 几个对应的div盒子// 标题 <div class="tab" > <span v-for="item in 4"

上一篇讲了 怎么配置多页面的开发，接下来就是关于打包的优化模拟情景，两个多页面 A 、BA 页面使用了 iview 组件库B 页面使用了 ant-design-vue 组件库假设未做任何配置，会把这两个组件库都打包到一起，等于说 访问A页面，也会加载到B页面的使用的插件，势必会增加首屏的速度通过配置 config.js文件，我们可以将 引用的组件，在打包时 引入各自的组件，这样可以降低首屏的访问速度，达到按需的目的配置如下（有参考网上其他案例）module.exports = { l

最近想试试vue多页面的配置，发现好多例子有点不齐，所以这里写一下 多页面配置的 初期搭建（基于 vue2.0 cli 4.4 比较新了）1、第一步搭建项目就不说了，也没什么格外要配置的2、由于是多页面，每个页面有自己的一套 路由，store，app.vue，main.js，所以 以前的 public 下的 index.html 和 独一的 app.vue main.js 文件可以删除了，新建page目录 下面各自创建对应单页面的 路由 store 组件 css 入口 出口 ，配置好 大概类似 小程序的

生命周期中的函数 通过此函数调用 生命周期函数 同时检查 组件上有无监听生命周期的事件_hasHookEvent–初始化事件时，为false 事件解析到 @hook : xxx 为true即 在组件上绑定相关生命周期函数时 会通过 $emit 去触发，可以达到监听子组件生命周期的作用export function callHook (vm: Component, hook: string) { // #7573 disable dep collection when invoking lifecy

import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'function Vue (options)

vue.use()插件安装源码/* @flow */import { toArray } from '../util/index' ---将参数类数组转为 数组export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlug

keep-alive用于组件缓存，保证我们在页面切换时，缓存部分组件，具体实现如下1、keep-alive 是一个抽象组件export default { name: 'keep-alive', abstract: true,------>标志抽象组件，不会生成标签之类的 props: { include: patternTypes, exclude: patternTypes, max: [String, Number] },可以看到接收三个值 用于缓存

实现一个简单的 鼠标滑过出现文字提示。啥也不说 上代码包括了 指令类容更新import Vue from 'vue' Vue.directive('mouse', { // 初始化 bind: function(el, binding, vnode) { }, // 被插入 inserted:function(el, binding, vnode){ mousEnter(el,binding) }, // 更新值 update:function(el,

有时候我们在上传视频时，可能需要获取视频时长，可以有两种方法1.创建video标签，赋值src，然后播放获取时长（可将标签隐藏）2.通过 Audio 对象将 视频文件对象传入，获取时长，代码如下**获取 视频对象** let fileVIdeo = document.getElementById("upload").files[0]**获取时长 是异步的，可将其封装为priomise**//这里的需求是 时长 8-58秒 大小 50M// 判断时长 getVideoTime(fi

let throttle_timer = nullexport const throttle = (cb,time = 3000) =>{ if (!throttle_timer) { throttle_timer = setTimeout(()=>{ throttle_timer = null },time) cb() } }

在vue项目中使用typescript，主要是vuex的使用，组件全局注册，接口的定义一 项目搭建-----跳过（需要注意的是，如果不小心选择了语法检测，可在根目录下新建 vue.config.js 文件 里面添加如下）module.exports = { lintOnSave: false }二 组件全局注册（定义的过滤器，指令等），主要介绍 vue.use()方法这...

如何在小程序中实现音频播放需要注意几点由于现在官方不再维护 audio 组件 ，所以音频播放尽可能采取 wx.createInnerAudioContext() 接口 （ 若需要在后台播放，则采用 wx.getBackgroundAudioManager() ）音频播放，只有在播放时才可以获取到音频长度（参考了多个带音频的小程序 qq音乐，百度网盘等，都是采取自动播放的方式，以获取...

这是由于语法检查的问题 关闭console的语法检测就好了在项目的根目录下的 package.json文件中的eslintConfig：{}中的 “rules”: {加入"no-console":“off”}如下...

vue 计算属性的 getter和setter的使用使用背景：需要对计算属性的值在 methods的方法中修改，由于计算属性是默认有getter没有setter的，所有需要手动添加一个setterchangeObj为页面绑定的一个对象（注意写法）changeObj为属性----->changeObj:{}里面的为添加的方法------->不能使用箭头函数get-----&gt...

直接 new Date().toLocaleDateString().replace(///g,’-’)可以得到这种格式"2019-11-28"new Date().toLocaleDateString()得到的是2019/11/28用replace方法 将所有的/替换为-

1.在官网添加喜欢的图标—>加入购物车–>然后下载2.解压（有一大堆）只要 iconfont.css–>放入uni-app的common目录下 当然其他也可以3.打开这个css—>更改里面的@font-face–>改成在线地址 注意加https没改之前线上地址–>复制 加上htttps—>替换之前的最后如下4.改好了地址—>可以在...

<body> <div id="box"> <table> <thead> <tr> <th><input type="checkbox" style="margin-left:35px" @click="allChoose($event)"> 全选</th> &...