小程序：常见问题集锦

 

1# 使用flex布局时候，不要给包含其中的元素设置有效的margin值；否则会导致像类似 justify-content: space-between 效果无效

举例：

基本代码如下：

.choose-time-item{
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  border-radius: 8rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.06), 0 -2rpx 2rpx rgba(0, 0, 0, 0.06);
}
.choose-time-item button{
  display: inline-block;
  width: 136rpx;
  height: 62rpx;
  line-height: 62rpx;
  font-size: 28rpx;
  background-color: #3c8ad6;
}

 

布局效果：

 

根本没有实现如下图所示的：两端对齐，项目之间的间隔都相等 的效果

 

 

 

 各种排查，发现给 button 设置了   margin-left：22rpx

 

 

 

这导致了flex布局失效，把magrin 设为默认值或0 即可

 

更改后：

.choose-time-item button{
  display: inline-block;
  width: 136rpx;
  height: 62rpx;
  margin: 0;
  line-height: 62rpx;
  font-size: 28rpx;
  background-color: #3c8ad6;
}

 

 

 

2#  可使用 \r\n 让wx.showModal 中  content 内容换行

举例：

        wx.showModal({
            content: '该时间段已满\r\n请选择其他时间段吧',
            showCancel: false,
            confirmText: '好的',
            confirmColor: '#5d9af2'
        })

 

效果说明:　　

目前在真机环境下是有效的，开发者工具暂时无效。

真机环境：

 

开发者工具：

 

 

持续更新中.....