image 微信小程序flex_微信小程序踩坑指南

微信小程序踩坑指南

来源：https://juejin.im/post/5d06f10f6fb9a07eea327202

开发就是一个西行取经的过程，期间不是一帆风顺，不定会遇到什么鬼。

最近开发一个简单的每日答题签到小程序，期间遇到一些始料未及的坑记录一下，避免日后重复踩坑。本文针对初入小程序的小白。:)

可能会有更好的解决方案，欢迎指正。

多张gif图预警，大概20M

第一难: scroll-view标签对dispay:flex无效

想要实现一个横向滚动的日历，很自然的想到scroll-view组件，于是洋洋洒洒的写下几行代码:

demo.wxml

 {
   {item}} 复制代码

demo.scss(为了写着方便，请自行转换成wxss语法，下同)

page { width: 100%; height: 100%; background: #17448E;}.scroll-view-demo { display: flex; flex-direction: row; .item { width: 80rpx; height: 80rpx; border: solid 1px #fff; display: flex; color: #fff; font-size: 36rpx; justify-content: center; align-items: center; border-radius: 40rpx; margin-left: 50rpx; }}复制代码

搓搓手，看看效果

尴尬,说好的横向滚动呢，明明flex-direction: row;写的清清楚楚明明白白。。

既然scroll-view对flex不友好，那我在子元素上再包裹一层view组件应该万事大吉了吧，于是:

demo.wxml

 {
   {item}} 复制代码

demo.scss

.scroll-view-demo { .item-container { display: flex; flex-direction: row; .item { width: 80rpx; height: 80rpx; border: solid 1px #fff; display: flex; color: #fff; font-size: 36rpx; justify-content: center; align-items: center; border-radius: 40rpx; margin-left: 50rpx; } }}复制代码

看看效果:

然鹅。。好像不是那么回事，子元素怎么就被挤成胶囊了。。 仔细研究一番，需要给.item-container加上固定的width才行，甚是麻烦。

简单点，开发的方式简单点，既然scroll-view对flex如此高冷，那就换一种方式:

demo.wxml

 {
   {item}} 复制代码

demo.scss

.scroll-view-demo { width: 100%; white-space: nowrap; .item { width: 80rpx; height: 80rpx; line-height: 80rpx; text-align: center; border: solid 1px #fff; display: inline-block; color: #fff; font-size: 36rpx; border-radius: 40rpx; margin-left: 50rpx; }复制代码

效果: