- 經過設置發現,微信小程序中wxss並不能完全支持css3的全部功能。
- 總結記錄在此文中,以免忘記。
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 以
bind
或catch
開頭,然后跟上事件的類型,如bindtap
、catchtouchstart
。自基礎庫版本 1.5.0 起,bind
和catch
后可以緊跟一個冒號,其含義不變,如bind:tap
、、catch:touchstart
。- value 是一個字符串,需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。
bind
事件綁定不會阻止冒泡事件向上冒泡,catch
事件綁定可以阻止冒泡事件向上冒泡。
參見開發文檔中關於事件的表述;
tips:應該多閱讀´開發文檔