小程序wxss和css3的区别

时间：2021-05-24 09:14:19
  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 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。
  • value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

    bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

参见开发文档中关于事件的表述；

tips：应该多阅读´开发文档

相关文章