标签 微信小程序 下的文章

想要通过事件冒泡,获取到.item的data,WXML如下:

<view class="toolbar" catchtouchend="format">
    <view class="item" data-name="list" data-value="ordered">
      <text class="iconfont icon-youxuliebiao"></text>
      <text class="name">有序列表</text>
    </view>
</view>

上面的结构是无法在js中通过e.target.dataset获取到data-namedata-value的:

- 阅读剩余部分 -

navigationStyle(官方文档)设置为custom后,导航栏消失,可以自定义导航栏。

在不同的手机上,胶囊到屏幕顶部的距离是不一样的,尤其是刘海屏,这个距离会很大。所以自定义导航栏的高度不能写死。页面主体部分不能被右上角的胶囊覆盖;为了美观,自定义导航栏的标题最好也和胶囊在水平上对齐。所以,自定义导航栏的高度需要适配。

- 阅读剩余部分 -

微信小程序中,隐藏滚动条的方法,其实就是通用的css:

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

但是在小程序中,它只能隐藏scroll-view组件的滚动条,page中的滚动条还是依然存在。

如果想让页面没有滚动条,可以用一个scrll-view来当做页面的容器,但是这时候可能就没法用page提供的方法了,比如enablePullDownRefresh。如何取舍就要根据实际需要决定了。

微信小程序的input有默认的最小高度

input.png

所以想要重置它们的高度,仅仅设置height是不够的,还要一起设置min-height:

input {
  height: 40rpx;
  min-height: 40rpx;
  /* 或者 */
  min-height: 0;
}

另外,从图中可以看出input已经是block类型的元素了。

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
        });
    }
})