微信小程序:組件樣式


一、  組件內的樣式 對 外部樣式的影響:

    答:1.組件內的class樣式,只對組件wxml內的節點生效,對於引用組件的Page頁面不生效。

      2.組件內部能使用id選擇器、屬性選擇器、標簽選擇器

二、 外部樣式 對 組件內樣式的影響:

    答:1.外部使用class樣式,只對外部的wxml的節點生效,對組件內是不生效的

      2.外部使用id選擇器、屬性選擇器、不會對組件內容產生影響

      3.外部使用了標簽選擇器,會對組件內產生影響

總結:組件內的class樣式和組件外的class樣式,默認有隔離效果,只對"自身"有效

      為了防止樣式的錯亂,官方不推薦使用id、屬性、標簽選擇器;

 

三、 如何使樣式可以相互影響?

    答:在自定義組件的 .js 文件中的Component({})對象里面可以傳入一個options屬性,

      options屬性中有一個 styleIsolation屬性(隔離屬性)

      styleIsolation屬性有3個值:

        默認值:isoIated:表示啟用樣式隔離,在自定義組件內外,使用class指定的樣式將不會相互影響

     頁面影響組件:apply-shared:表示頁面wxss樣式將影響到組自定義組件,但自定義組件wxss中指定的樣式不會影響頁面

       相互影響:shared:表示頁面wxss樣式將影響到自定義組件,自定義組件wxss中指定的樣式也會影響頁面

 

 

 

 

       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM