分类 技术文章 下的文章

MDN上的apply介绍: apply- MDN

apply()方法的第二个参数除了可以是数组外,从 ECMAScript 第5版开始,还可以是一个类数组对象:

从 ECMAScript 第5版开始,可以使用任何种类的类数组对象,就是说只要有一个 length 属性和(0..length-1)范围的整数属性。例如现在可以使用 NodeList 或一个自己定义的类似{'length': 2, '0': 'eat', '1': 'bananas'} 形式的对象。

- 阅读剩余部分 -

在使用Vue Router配置了异步组件后,即使没有激活这些异步组件,在浏览器中仍然可以看到请求这些组件。比如下面的配置:
router.js:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Chat',
      name: 'Chat',
      component: () => import( /* webpackChunkName: "Chat" */ './views/Chat.vue')
    }
  ]
})

- 阅读剩余部分 -

iOS有很多独特(奇怪)的表现,最近在做一个H5页面时,遇到了真机上滑动不流畅的问题。查阅资料得知,可以给带滚动条的那个元素设置-webkit-overflow-scrolling: touch解决这个问题,但设置之后依然如故。最后经过实验,必须给滚动元素显式的设置overflow: auto|scroll才能解决这个问题。
具体原理留待空闲时研究。

image组件底部有空白,这可能是小程序自身的bug,对image设置vertical-align为任意值即可消除。


更新时间:2019-06-22

一直以来对小程序image组件底部空白的理解是错误的,以前以为是inline-block元素底部自带的一点空白,现在在用到image的时候发现其实不是的。

小程序image组件有一个默认的高度:240px,如果image组件不设置mode,并且高度不够240px,底部就会出现空白。

消除image组件空白有两种方法:设置合适的mode、设置固定高度

比如,要图片宽度是100%,高度自适应,就可以这样设置:

<image mode='widthFix' src='xxxx.png'></image>

经过实验发现,给image设置height: auto会导致图片高度为0,所以不能通过重置高度来消除空白,只能设置固定的高度,比如:height: 100%height: 40px等。


更新时间:2019-06-26

image垂直排列的时候,image的宽度是100%modewidthFix,底下依然会有空白,这就是我在开头的时候遇到的情况了。

在保存图片到相册后,微信会弹出提示“图片已保存到xxxxxx”,如果在saveImageToPhotosAlbumsuccess中想要提示用户保存成功,就必须先调用hideLoading(),否则自己写的showToast是不会显示的。

wx.saveImageToPhotosAlbum({
    success(res) {
        wx.hideLoading();  // 必须先调用这个
        wx.showToast({
            title: '图片已保存到您的相册',
            icon: 'none',
            duration: 4000
        });
    }
})

前言

由于移动端屏幕的像素密度都非常高,css中的1px呈现在屏幕中,往往不止1个物理像素,看起来比较粗,设计师很难满意。这和devicePixelRatio有关。
transform实现看起来比较细的边框是一个很简单的方案,在移动端兼容性也非常好,不需要多余的资源,当然,肯定要多些几行代码。

- 阅读剩余部分 -

1、前言

今天要开发类通讯录的可滑动字母索引效果,搜遍了百度也没找到相关的代码,都是只能点击,不能滑动。
其实这个功能不难实现,各位大神应该是不屑提起。这篇文章只是作为记录,如果能给初学者带来一点帮助就更好了。

2、先上效果图:

test.gif

- 阅读剩余部分 -

1、defaultValue

HTML
<input type="text" value="Hello world">

JavaScript
const input = document.querySelector('input');

console.log(input.value);        // 'Hello world'

input.value = 'New value';

console.log(input.value);        // 'New value'
console.log(input.defaultValue); // 'Hello world'

如代码所示,当用JavaScript改变了inputvalue后,可以使用defaultValue来获取这个元素的初始值。

- 阅读剩余部分 -