小程序:常见问题集锦
1# 使用flex布局时候,不要给包含其中的元素设置有效的margin值;否则会导致像类似 justify-content: space-between 效果无效
举例:
基本代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .choose-time-item{ display :flex; justify- content : space-between; align-items: center ; margin-bottom : 20 rpx; padding : 16 rpx 24 rpx; font-size : 28 rpx; border-radius: 8 rpx; background-color : #ffffff ; box-shadow: 0 2 rpx 2 rpx rgba( 0 , 0 , 0 , 0.06 ), 0 -2 rpx 2 rpx rgba( 0 , 0 , 0 , 0.06 ); } .choose-time-item button{ display : inline- block ; width : 136 rpx; height : 62 rpx; line-height : 62 rpx; font-size : 28 rpx; background-color : #3c8ad6 ; } |
布局效果:
根本没有实现如下图所示的:两端对齐,项目之间的间隔都相等 的效果
各种排查,发现给 button 设置了 margin-left:22rpx
这导致了flex布局失效,把magrin 设为默认值或0 即可
更改后:
1 2 3 4 5 6 7 8 9 | .choose-time-item button{ display : inline- block ; width : 136 rpx; height : 62 rpx; margin : 0 ; line-height : 62 rpx; font-size : 28 rpx; background-color : #3c8ad6 ; } |
2# 可使用 \r\n 让wx.showModal 中 content 内容换行
举例:
1 2 3 4 5 6 | wx.showModal({ content: '该时间段已满\r\n请选择其他时间段吧' , showCancel: false , confirmText: '好的' , confirmColor: '#5d9af2' }) |
效果说明:
目前在真机环境下是有效的,开发者工具暂时无效。
真机环境:
开发者工具:
持续更新中.....
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步