标签 微信小程序 下的文章

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%，mode是widthFix，底下依然会有空白，这就是我在开头的时候遇到的情况了。

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

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