1、Some selectors are not allowed in component wxss 2、微信小程序点赞效果(点亮小心心)源码

15

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

{{ count }}

```

在上述代码中,我们定义了一个名为`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`组件。

以上就是微信小程序点赞效果(点亮小心心)源码的详细描述。

小程序点赞微信小程序

版权声明:除非特别标注,否则均为网络文章,侵权请联系站长删除。

上一篇 微信小程序直播点赞组件及原理浅析

下一篇 使用fiddler自动化抓取微信公众号文章的点赞与阅读数