小程序wxss和css3的區別

  1. 經過設置發現,微信小程序中wxss并不能完全支持css3的全部功能。
  2. 總結記錄在此文中,以免忘記。
0 . wxss不能直接通過css3中的background-image屬性來設置顯示的背景圖片。

例如我在wxss中書寫如下

background-image: url(imageB.png);

控制臺打印:


pages/index/index.wxss 中的本地資源圖片無法通過 WXSS 獲取,可以使用網絡圖片,或者 base64,或者使用<image/>標簽。

1 .小程序中的文檔流中不存在window、document對象,即不能使用jquery與zepto等js庫區操作dom。這也從另一方面致使css3屬性:position 在使用時需要一些注意事項。
使用時應注意,為基礎節點container設置fixed屬性,否則position=absolute不會生效
/**app.wxss**/

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
  position: fixed;
}

2. 小程序中wxml中設置wxss變量時,應返回string類型值(注意 " " 和 ' ' 之間的嵌套關系’’)。如下:

        <view id='imageBtn' style='display:{{imageBtn_display?"inherit":"none"}}' catchtouchmove='touchRotateAction'></view>

3. 小程序中事件冒泡處理。bind和catch方法:

事件綁定的寫法同組件的屬性,以 key、value 的形式。

  • key 以bindcatch開頭,然后跟上事件的類型,如bindtapcatchtouchstart。自基礎庫版本 1.5.0 起,bindcatch后可以緊跟一個冒號,其含義不變,如bind:tap、、catch:touchstart
  • value 是一個字符串,需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。
    bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡。

參見開發文檔中關于事件的表述;

tips:應該多閱讀開發文檔

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,569評論 25 708
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,340評論 0 11
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,806評論 0 2
  • 二十歲出頭,既不是重點大學的學生,也沒有一個身價億萬的老爹。 仔細回想,從出生到現在,真的是平凡之路。讀書讀到現在...
    周氏晴天閱讀 280評論 0 0
  • 微信小程序的導航跳轉分為navigateTo(保留當前頁,跳轉到應用內的其他頁面,跳轉非tabBar頁面,可帶參...
    回憶丶闌珊閱讀 16,762評論 0 4