小程序采坑记

小程序采坑记

上手小程序两个月，多多少少遇到一些坑，在此简单地做下总结。但愿能对那些跟我同样有遇到过一样问题的人提供一点帮助，避免掉进这些坑，少走一些弯路。由于本身比较菜，也讲不了多少有用的东西，欢迎大神指教~~

1. swiper组件高度的自适应问题

用太小程序 swiper组件的everybody 应该都知道，在 swiper组件里只可放置 swiper-item组件，不然会致使未定义的行为。但一些人可能会遇过这种状况：已知小程序 swiper 组件默认高度150px，若是子元素高度太高， swiper不会自适应高度。

这种状况挺坑的。。要动态的改变swiper的高度，还得靠wx.createSelectorQuery()（在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替）建立一个SelectorQuery 对象实例，经过选择器获取组件的高度去动态地改变swiper的高度，麻烦。

2. scroll-view组件内嵌原生组件

scroll-view组件不得不说，挺坑的，尤为是在与原生组件配合着使用的时候，容易出现”惊喜“的效果。在 scroll-view里内嵌 textarea原生组件，真机调试上 textarea直接不跟着滑动；在 scroll-view里内嵌 input组件，安卓手机的测试正常， iPhone上却出现了 input框里输入数字重叠的状况......流泪ing...

有个解决的方法是，用view组件替代scroll-view组件，在view组件里设置属性scroll-y或scroll-x，可模拟scroll-view的滑动功能，但须要给view组件设置{overflow: auto;}的样式才行。

3. 公共属性hidden失效的问题

有些人可能一直使用 hidden都没出什么问题，以为 hidden是一直生效的，但实际上 hidden属性也有失效的时候。

举个栗子，用最简单的代码阐述这个现象：

<view hidden>啦啦啦</view>

<view style="display: block" hidden>啦啦啦</view>

你会发现，前一个被成功隐藏了，可是后一个不会被隐藏。

一句话：在style属性里设置display属性会直接让hidden属性失效。

4. switch组件

先引用下官方文档的说明：

可发现，这里仅有一个color样式可设置，若要改变switch组件的尺寸，还得这样写：

.wx-switch-input{
    width: 82rpx!important;
    height: 40rpx!important;
}
.wx-switch-input::before{
    width: 80rpx!important;
    height: 36rpx!important;
}
.wx-switch-input::after{
    width: 38rpx!important;
    height: 36rpx!important;
}

这种处理方式，虽然起做用了，但实际上能够看出，尺寸的设置依旧有很大的限制（能够本身试试），并不推荐这种作法。比较好的方法是引入第三方的组件库，例如直接用Vant Weapp里的switch组件。

5. 原生组件input没法被cover-view和cover-image以外的组件覆盖？

对于这个问题，可能不少人都会回答说：是的。但实际上真是这样吗？

其实小程序的input组件表现挺奇怪的。首先，官方文档说他仅在focus时表现为原生组件。

这句话直到如今，我也以为挺有问题的。来看看这个栗子吧，看看input组件的神奇表现：

<view style="position: relative">
      <image 
         src='/pages/image/location.png'
         style="position: absolute; top: 10rpx; z-index: 1; width: 100rpx; height: 100rpx; background: gray"
         bindtap="click" >
      </image>
      <input
         style="background: yellow; border: 1px solid #000; height: 120rpx; width: 100vw;"
         bindinput="inputHandler"
         placeholder="请输入你的文字~~~"
         placeholder-style="color:#999" />
</view>

效果以下：

这是input框未输入文字（无论有没有聚焦）时的表现。若是此时输入文字，就会变成酱紫：

神奇不神奇？好吧，就算你说不神奇，我也要继续。这里特意给input组件添加了背景色，可看出，当输入了文字时，图片却并无能覆盖input组件，图片上绑定的click方法是触发不了的。但input组件的背景色此时竟没法覆盖图片的样式。

此刻你可能会问：就这样？还有没有别的？

嗯嗯.......问得好！固然还有另外的现象。

细心的你可能注意到了，上面的代码中，image组件的层级设为了1。这个若是设置得大一点，有没有影响呢？

你可能会说：input那但是原生组件啊，image的层级再大，同样的，没区别。

真是这样吗？如今直接把image的z-index的值设为2，为了不挡住视线，决定把image组件移至右边，故设置了样式{right: 20rpx}。结果以下：

......好了，意外又出现了，你能够去买彩票了......

设置image组件层级为1时，若input框未输入文字（无论有没有聚焦），此时是会覆盖image组件的样式的，可是image层级为2时已经覆盖不了了。可是在输入了文字时的表现上，和尝试着点击image组件上的click方法时的表现上，仍是同样的。

当image组件的层级设置为3呢？奇迹开始了。由于此时点击image组件成功地触发click方法。换句话说就是：原生组件input已经被cover-view和cover-image以外的组件覆盖了。

原文连接 欢迎来撩鸭！！！

]

【做者简介】 黄彦森，芦苇科技web前端开发工程师，喜欢唱歌、看动漫、看小说。擅长微信小程序开发，系统管理后台。访问www.talkmnoney.cn了解更多。