1、Some selectors are not allowed in component wxss 2、微信小程序点赞效果(点亮小心心)源码
1.关于wxss中不允许使用的选择器:
在微信小程序中,WXSS(WeChat eXtensible Stylesheet Language)是用于样式化小程序组件的语言。虽然它与CSS类似,但有一些关键区别和限制。
在WXSS中,不允许使用一些CSS选择器,这可能会导致编译错误或行为异常。以下是一些不允许使用的选择器:
* `:first-child`:微信小程序不支持`:first-child`伪类。
* `:last-child`:同样,微信小程序也不支持`:last-child`伪类。
* `:nth-child()`:虽然微信小程序支持`:nth-child(n)`形式,但不支持`:nth-last-child(n)`形式。
* `:not()`:微信小程序不支持`:not()`伪类。
这些限制可能会导致一些样式无法正常应用或行为异常。因此,开发者需要谨慎使用WXSS选择器,以避免出现问题。
2.关于微信小程序点赞效果(点亮小心心)源码:
以下是部分参考内容的详细描述:
首先,在components里定义了点赞组件,实现效果如下:
```wxml
```
在上述代码中,我们定义了一个名为`like`的组件,包含两个元素:一个按钮和一个文本。按钮绑定了一个事件处理函数`handleTap`,用于响应用户点击行为。
接下来,让我们看看组件的样式:
```wxss/* components/like/index.wxss */
.container {
display: flex;
align-items: center;
padding:20rpx;
}
.btn {
background-color: f7f7f7;
color: 333;
border-radius:10rpx;
padding:10rpx20rpx;
}
.count {
margin-left:10rpx;
}
```
在上述代码中,我们定义了三个类:`.container`、`.btn`和`.count`。这些类用于样式化组件的元素。
现在,让我们看看事件处理函数:
```javascript// components/like/index.jsPage({
data: {
count:0,
},
handleTap() {
this.setData({ count: this.data.count +1 });
},
});
```
在上述代码中,我们定义了一个名为`handleTap`的事件处理函数。这个函数用于响应用户点击行为,更新组件的数据。
最后,让我们看看组件的使用:
```wxml
```
在上述代码中,我们定义了一个名为`index`的页面,包含一个`like`组件。
以上就是微信小程序点赞效果(点亮小心心)源码的详细描述。