微信小程序|做一个底部评论视图

8

微信小程序|做一个底部评论视图

好!我来详细描述如何在微信小程序中创建一个底部评论视图。

结构设计

首先,我们需要确定这个评论视图的基本结构。根据你的参考内容,我们可以这样描述:

* 黑色的容器(背景):这是整个评论视图的外壳,占据了页面的大部分空间。

* 三个横向并列的红色容器:这三个容器分别代表不同的评论项,每个容器包含一个具体的评论内容。

* 第一个红色容器:这个容器包含两个橘色的纵向并列的容器,分别代表评论的头像和评论内容。

代码实现

下面是使用微信小程序开发工具编写的代码:

```html

{{item.content}}

```

```css/* index.wxss */

.container {

background-color: 000;

padding:10px;

}

.comment-container {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom:10px;

}

.red-container {

background-color: ff0000;

padding:5px;

border-radius:5px;

}

.avatar {

width:30px;

height:30px;

border-radius:50%;

margin-right:5px;

}

.content {

color: fff;

}

```

```javascript// index.jsPage({

data: {

comments: [

{ avatar: ' content: '评论内容1' },

{ avatar: ' content: '评论内容2' },

{ avatar: ' content: '评论内容3' }

]

}

})

```

效果展示

在微信小程序中打开这个页面,你会看到一个黑色的背景,包含三个横向并列的红色容器,每个容器代表一个具体的评论项。每个红色容器包含两个橘色的纵向并列的容器,分别代表评论的头像和评论内容。

总结

通过以上的描述和代码实现,你可以在微信小程序中创建一个底部评论视图,与微信一样的效果。

小程序评论微信小程序小部件

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

上一篇 微信小程序商品详情 + 评论功能实现

下一篇 微信小程序的评论组件NewWxComment