微信小程序常用评论区样式代码
时间: 2023-09-20 07:10:20 浏览: 39
以下是一些常用的微信小程序评论区样式代码:
1. 评论列表样式代码
```
<view class="comment-list">
<view class="comment-item" wx:for="{{comments}}">
<view class="comment-avatar">
<image src="{{item.avatarUrl}}" mode="aspectFill"></image>
</view>
<view class="comment-content">
<view class="comment-user">{{item.nickName}}</view>
<view class="comment-text">{{item.content}}</view>
</view>
</view>
</view>
```
2. 评论框样式代码
```
<view class="comment-box">
<textarea placeholder="输入评论内容" bindinput="onInput"></textarea>
<button class="comment-submit" bindtap="onSubmit">发布</button>
</view>
```
3. 评论样式代码
```
.comment-list {
padding: 10rpx;
}
.comment-item {
display: flex;
margin-bottom: 10rpx;
}
.comment-avatar {
width: 50rpx;
height: 50rpx;
margin-right: 10rpx;
}
.comment-avatar image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.comment-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.comment-user {
font-size: 16rpx;
font-weight: bold;
margin-bottom: 5rpx;
}
.comment-text {
font-size: 14rpx;
color: #666;
}
.comment-box {
display: flex;
flex-direction: row;
align-items: center;
padding: 10rpx;
border-top: 1rpx solid #eee;
}
.comment-box textarea {
flex: 1;
height: 60rpx;
border: none;
outline: none;
resize: none;
font-size: 14rpx;
padding: 5rpx;
}
.comment-box button {
width: 80rpx;
height: 40rpx;
background-color: #3cc51f;
color: #fff;
border-radius: 20rpx;
margin-left: 10rpx;
}
```