BIlly Feng的博客

为了实现横向无缝滚动奖品，作者提前放了多组重复奖品列表，比如原先奖品列表有10个奖品，我们可以放置多几组重复奖品列表，所以奖品的数量（10 * n），为了效果更逼真，如果动画时间长的话，可以适当再加几组，让效果更加逼真。，那么我们点击滚动的时候，为了动画效果，自然要从第一组滚到最后一组，如我们要抽中第一个奖品，即第一组第一个奖品要滚到最后一组的第一个奖品，而且最后一组第一个奖品要在中间位置，我们可以计算好这个距离，这个距离怎么计算呢？我们可以看到停止时，第一个奖品的左边的奖品消失了，为什么呢？

好了，继续，这时知道老板的苹果手机的版本是很新的，所以基本排除属性兼容的问题。这时继续推测，可能是网络的问题导致，因为我看到信号没有满格，正当我们准备打算叫老板换浏览器访问，或者看下手机网络信号之类的问题的时候，这时被我们主管发现了图中另外个问题，大家有没有发现呢？好了，不卖关子了，直接说。这时我开始百度了，我发现一个知乎网友提供了一个地址，这个我手动改了下，发现是可以将https改成http的，这时我心中开始有定论了：之所以手动无法将https改成http，是因为这个网站做了相关的配置！

正常来说不刷新页面，也能更改浏览器url地址的方法有很多，我们在网上搜的话可以看到有pushState、replaceState、popstate等方法，那还有没有其他方法呢？以上意思是，总体的意思就是假如浏览器url后面带有#, 使用window.location.href, 是无法跳转的，这个刚好是vue的单页面应用的一个。最近做一个vue商城项目的时候，用户点击支付时，用户可复制当前链接（加上登录态），粘贴到第三方浏览器之后，完成整个支付闭环。

在JavaScript中，定时器的执行是通过浏览器的事件循环(Event Loop)机制来实现的，而不是通过单独的线程来执行的。当定时器达到指定的时间间隔时，浏览器会将回调函数放入任务队列中等待执行。因此，定时器的执行与主线程是在同一线程上完成的，并不会像其他语言中的定时器一样在单独的线程中执行。在有些浏览器里，定时器可能是在单独的线程执行的。执行任务而不干扰用户界面（主线程），除此之外，当主线程遇到大量计算或者复杂的业务逻辑时，会对我们的页面造成不好的用户体验，我们也可以用webworker。

用户通过第三方浏览器打开商城，点击立即支付时，会先弹出一个确认窗之后，立即自动跳去一个链接打开支付宝或app中打开支付宝。在微信环境内我们为了更好的用户体验，不用每次购买一个商品都要让用户经过一个中间页，我们在步骤二做了处理。会判断用户是否已经支付，如果没有支付会提示没有支付，如果已经支付成功，则弹窗支付成功，点击。最近开发了一个web商城，需要支持pc端，手机端，且需要支持微信支付和支付宝支付。唤起成功后，进行支付宝支付：支付成功、支付失败、支付取消、支付超时。

最近用到了async，所以想把它用到实际开发上，具体async如何实现在官方文档都有说明了，在这里的话，我只会做一些补充说明。async 是隐式返回一个promiseasync function f() { return 1;}f().then(alert); // 1当然我们也可以显示返回一个promise，如下：async function f() { return Promise.resolve(1);}f().then(alert); // 1这样async就可以和

目前项目所有表格全部都要设成可许拖拽调整宽度的，文档如下：需要每一列设置width固定宽度才能生效，这样就产生一个问题，如下：屏幕一长，最后一列就出现额外的空白，这时我们会说可以把最后一列width设成自适应，即“auto”不就解决了？但是这样又遇到另外个问题：如下 就是屏幕一缩小，表格样式就会发生错乱（不知道是不是iview的bug），所以当iview表格中设置resizable为true时，最后一列要设成固定宽度，但这面临一个问题，就是屏幕变得再大的时候，最后一列还是留有空白，所以这还是无法解

今天需要实现这样一个需求：在表格往下拖动的时候，需要固定表头整体思路：自己用iview写的，当时自己想得是这个表头用绝对定位，根据页面滚动的距离从而计算出定位数值，但是这样有个问题，就是当数据多的时候，很快去滚动页面的话，这个表头会出现抖动的状态，应该计算定位px数值的时候耗了点时间，当时自己参照别人网站的时候，发现别人用的是position: sticky，自己当时也百度去搜了position: sticky的用法，发现有点乱，所以自己用google搜了下MDN文档，从而看到一个比较系统的说法：上面

有时候我们在完成一个业务需求的时候，进入一个页面可能需要一些初始值，像我这种用惯ES6的人来说，看代码如下//person是 const person = { name:{ first: 'billy', last: 'feng' } }; export default { data() { return { test :{ ...person } }

最近在项目实现一个问卷调研的功能，发现正常情况下，多选框是可以单击取消选中状态的，单选框就不行，单选框选中了就不能再取消，刚开始自己不知道怎么解决，然后自己百度了下，果然还是有大神解决了。1、问题就是将input radio单选框改造成单击可以取消其选中状态2、单纯的对input radio进行js控制行不通，因为radio是通过v-repeat出来的，有很多个，如果每一个都去获取元素的话，执行效率太低，failed3、给radio添加click事件，判断checked属性，如果为true则取消ch

又隔段时间没写博客了，今天写下博客。之前在项目遇到要实现这样一个需求，如下图所示：就是根据不同的状态呈现不同的颜色，一开始拿到这个需求的时候有点迷惑，后来自己查了下文档，发现可以这样做，废话不多说，直接上代码（相关逻辑代码可以忽略）：//template里面 <ul class="flex calendar_day font-ml flex"> <li v-for="(item, index) in calendarInfo.calendars" :k

节流考虑一个场景，滚动事件中会发起网络请求，但是我们并不希望用户在滚动过程中一直发起请求，而是隔一段时间发起一次，对于这种情况我们就可以使用节流。应用：常见的搜索功能：没有使用函数节流的情况下，为input绑定keyup事件处理函数，在控制台输出我输入的内容。每按下一个键盘键，就输出了一次。短短的一些内容，输出了15次，如果每一次都是一次ajax查询请求的话就发了14个请求了。在性能上的消耗可想而知。// func是用户传入需要节流的函数// wait是等待时间const throttl