成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小程序采坑記

miya / 1964人閱讀

摘要：小程序采坑記上手小程序兩個(gè)月，多多少少遇到一些坑，在此簡單地作下總結(jié)。但一些人可能會(huì)遇過這種情況已知小程序組件默認(rèn)高度，如果子元素高度過高，不會(huì)自適應(yīng)高度。但實(shí)際上真是這樣嗎其實(shí)小程序的組件表現(xiàn)挺奇怪的。擅長微信小程序開發(fā)，系統(tǒng)管理后臺(tái)。

小程序采坑記 
上手小程序兩個(gè)月，多多少少遇到一些坑，在此簡單地作下總結(jié)。希望能對那些跟我一樣有遇到過同樣問題的人提供一點(diǎn)幫助，避免掉進(jìn)這些坑，少走一些彎路。因?yàn)樽约罕容^菜，也講不了多少有用的東西，歡迎大神指教~~
1. swiper組件高度的自適應(yīng)問題 
用過小程序swiper組件的everybody 應(yīng)該都知道，在swiper組件里只可放置swiper-item組件，否則會(huì)導(dǎo)致未定義的行為。但一些人可能會(huì)遇過這種情況：已知小程序 swiper 組件默認(rèn)高度150px，如果子元素高度過高，swiper不會(huì)自適應(yīng)高度。

這種情況挺坑的。。要?jiǎng)討B(tài)的改變swiper的高度，還得靠wx.createSelectorQuery()（在自定義組件或包含自定義組件的頁面中，應(yīng)使用 this.createSelectorQuery() 來代替）創(chuàng)建一個(gè)SelectorQuery 對象實(shí)例，通過選擇器獲取組件的高度去動(dòng)態(tài)地改變swiper的高度，麻煩。

2. scroll-view組件內(nèi)嵌原生組件 
scroll-view組件不得不說，挺坑的，尤其是在與原生組件配合著使用的時(shí)候，容易出現(xiàn)”驚喜“的效果。在scroll-view里內(nèi)嵌textarea原生組件，真機(jī)調(diào)試上textarea直接不跟著滑動(dòng)；在scroll-view里內(nèi)嵌input組件，安卓手機(jī)的測試正常，iPhone上卻出現(xiàn)了input框里輸入數(shù)字重疊的情況......流淚ing...

有個(gè)解決的方法是，用view組件替代scroll-view組件，在view組件里設(shè)置屬性scroll-y或scroll-x，可模擬scroll-view的滑動(dòng)功能，但需要給view組件設(shè)置{overflow: auto;}的樣式才行。

3. 公共屬性hidden失效的問題 
有些人可能一直使用hidden都沒出什么問題，覺得hidden是一直生效的，但實(shí)際上hidden屬性也有失效的時(shí)候。

舉個(gè)栗子，用最簡單的代碼闡述這個(gè)現(xiàn)象：

你會(huì)發(fā)現(xiàn)，前一個(gè)被成功隱藏了，但是后一個(gè)不會(huì)被隱藏。

一句話：在style屬性里設(shè)置display屬性會(huì)直接讓hidden屬性失效。

4. switch組件

先引用下官方文檔的說明：

可發(fā)現(xiàn)，這里僅有一個(gè)color樣式可設(shè)置，若要改變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;
}

這種處理方式，雖然起作用了，但實(shí)際上可以看出，尺寸的設(shè)置依舊有很大的限制（可以自己試試），并不推薦這種做法。比較好的方法是引入第三方的組件庫，例如直接用Vant Weapp里的switch組件。

5. 原生組件input無法被cover-view和cover-image之外的組件覆蓋？

對于這個(gè)問題，可能很多人都會(huì)回答說：是的。但實(shí)際上真是這樣嗎？

其實(shí)小程序的input組件表現(xiàn)挺奇怪的。首先，官方文檔說他僅在focus時(shí)表現(xiàn)為原生組件。

這句話直到現(xiàn)在，我也覺得挺有問題的。來看看這個(gè)栗子吧，看看input組件的神奇表現(xiàn)：

效果如下：

這是input框未輸入文字（不管有沒有聚焦）時(shí)的表現(xiàn)。如果此時(shí)輸入文字，就會(huì)變成醬紫：

神奇不神奇？好吧，就算你說不神奇，我也要繼續(xù)。這里特地給input組件添加了背景色，可看出，當(dāng)輸入了文字時(shí)，圖片卻并沒有能覆蓋input組件，圖片上綁定的click方法是觸發(fā)不了的。但input組件的背景色此時(shí)竟無法覆蓋圖片的樣式。

此刻你可能會(huì)問：就這樣？還有沒有別的？

嗯嗯.......問得好！當(dāng)然還有另外的現(xiàn)象。

細(xì)心的你可能注意到了，上面的代碼中，image組件的層級設(shè)為了1。這個(gè)如果設(shè)置得大一點(diǎn)，有沒有影響呢？

你可能會(huì)說：input那可是原生組件啊，image的層級再大，一樣的，沒區(qū)別。

真是這樣嗎？現(xiàn)在直接把image的z-index的值設(shè)為2，為了避免擋住視線，決定把image組件移至右邊，故設(shè)置了樣式{right: 20rpx}。結(jié)果如下：

......好了，意外又出現(xiàn)了，你可以去買彩票了......

設(shè)置image組件層級為1時(shí)，若input框未輸入文字（不管有沒有聚焦），此時(shí)是會(huì)覆蓋image組件的樣式的，但是image層級為2時(shí)已經(jīng)覆蓋不了了。但是在輸入了文字時(shí)的表現(xiàn)上，和嘗試著點(diǎn)擊image組件上的click方法時(shí)的表現(xiàn)上，還是一樣的。

當(dāng)image組件的層級設(shè)置為3呢？奇跡開始了。因?yàn)榇藭r(shí)點(diǎn)擊image組件成功地觸發(fā)click方法。換句話說就是：原生組件input已經(jīng)被cover-view和cover-image之外的組件覆蓋了。

原文鏈接     歡迎來撩鴨?。?！

]

【作者簡介】 TRIS，蘆葦科技web前端開發(fā)工程師，喜歡唱歌、看動(dòng)漫、看小說。擅長微信小程序開發(fā)，系統(tǒng)管理后臺(tái)。訪問www.talkmnoney.cn了解更多。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105400.html

相關(guān)文章

  • Service worker (@nuxtjs/workbox) 采坑記

    摘要：實(shí)際上是指的為簡化開發(fā)而開源的第三方庫。首先安裝依賴然后再配置文件中啟用就完成了使用采坑官網(wǎng)上線后發(fā)現(xiàn)，啟用后不能播放視頻了。把當(dāng)成了失敗請求，導(dǎo)致請求視頻文件失敗。 PWA（Progressive Web App）是前端的大趨勢，它能極大的加快前端頁面的加載速度，得到近乎原生 app 的展示效果（其實(shí)難說）。PWA 其實(shí)是多種前端技術(shù)的組合，其中最重要的一個(gè)技術(shù)就是 service ...

    ISherry 評論0 收藏0

  • vue cli 3.x 生產(chǎn)環(huán)境去除console采坑記

    摘要：移除總結(jié)使用插件配置如下移除沒成功報(bào)錯(cuò)如下配置參考優(yōu)化實(shí)踐刪除和配置最終還是沒有成功，報(bào)錯(cuò)如下使用插件安裝依賴庫配置如下生產(chǎn)環(huán)境移除總結(jié)該方案成功了 vue-cli 3.x 移除console總結(jié) 使用 uglifyjs-webpack-plugin 插件 配置如下: // vue.config.js const UglifyJsPlugin = require(uglifyjs-we...

    kgbook 評論0 收藏0

  • 2017-09-09 前端日報(bào)

    摘要：前端日報(bào)精選從零學(xué)習(xí)技術(shù)棧新版本及簡介石墨表格之應(yīng)用實(shí)戰(zhàn)一道面試題目引發(fā)的思考新為帶來的性能變化中文第期前端部署采坑記個(gè)最基本的面試問題及答案上插件開發(fā)簡介一開發(fā)入門掘金插件開發(fā)簡介二如何添加瀏覽器擴(kuò)展白名單掘金層疊相關(guān)知識(shí)指北掘 2017-09-09 前端日報(bào) 精選 從零學(xué)習(xí)React技術(shù)棧：React 新版本及 ES6 簡介石墨表格之 Web Worker 應(yīng)用實(shí)戰(zhàn)一道面試題目引發(fā)...

    lykops 評論0 收藏0

  • 支付寶小程序爬坑記、支付寶與微信小程序的區(qū)別。

    摘要：上線時(shí)間問題發(fā)布審核時(shí)間，微信小時(shí)內(nèi)會(huì)審核完成，但是支付寶官方公示是上線審核需要三到五個(gè)工作日，據(jù)親測，實(shí)際支付寶審核印版不會(huì)超過小時(shí)，但是支付寶的審核相比較微信真的很嚴(yán)格。 前言： 最近一個(gè)月接收一個(gè)支付寶小程序項(xiàng)目，并進(jìn)行原生開發(fā)，現(xiàn)將遇到的問題，爬過的坑給大家進(jìn)行分享，希望讀者可以少走彎路，以下介紹的內(nèi)容將從大方面到細(xì)節(jié)進(jìn)行展開。 廢話少言，直接開始步入正題 ①：上傳、發(fā)布問...

    WilsonLiu95 評論0 收藏0

發(fā)表評論

0條評論

miya

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<