小程序採坑記

小程序採坑記

上手小程序兩個月，多多少少遇到一些坑，在此簡單地做下總結。但願能對那些跟我同樣有遇到過一樣問題的人提供一點幫助，避免掉進這些坑，少走一些彎路。由於本身比較菜，也講不了多少有用的東西，歡迎大神指教~~

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瞭解更多。