类似一个聊天页面,需要使用scroll-view,也没有用什么很奇葩的样式,只是高度是动态算出来的,外层还包了一层flex,不知是否是支持不够?请大佬帮忙解答下。
代码如下:
// wxml
<scroll-view
class="chat"
scroll-y="true"
enable-flex="true"
refresher-enabled="{{hasMore}}"
refresher-triggered="{{gettingMsgs}}"
refresher-default-style="white"
bindrefresherrefresh="getHistoryMessages"
scroll-into-view="{{currentMsgId}}"
style="height: {{scrollHeight}}px"
>
<view wx:for="{{msgs}}" wx:for-item="msg" wx:for-index="i" wx:key="ID" id="{{msg.ID}}" class="dialog-wrapper{{msg.isMe ? ' me' : ''}}">
<view wx:if="{{msg.isNotification}}" class="notification">
<text>{{msg.payload.data}}</text>
</view>
<view class="time">
<text>{{msg.format_time}}</text>
</view>
<view class="text dialog">
<text>{{msg.payload.text}}</text>
</view>
<image class="avatar" src="{{msg.isMe ? myInfo.avatar : hisInfo.avatar}}"/>
</view>
</scroll-view>
//wxss
.chat-wrapper {
flex: 1 1 0%;
width: 100%;
.chat {
display: flex;
flex-direction: column;
height: 100%;
padding: 24rpx;
padding-bottom: 0;
box-sizing: border-box;
.avatar {
width: 72rpx;
height: 72rpx;
border-radius: 100%;
order: 1;
}
.notification {
width: 445rpx;
height: 88rpx;
background: #0C062A;
border-radius: 52rpx;
display: flex;
justify-content: center;
font-size: 26rpx;
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
align-items: center;
transform: translateX(-50%);
position: relative;
left: 50%;
}
.dialog-wrapper {
margin: 22rpx 0;
display: flex;
width: 100%;
flex-wrap: wrap;
&.me {
justify-content: flex-end;
}
.time {
font-size: 26rpx;
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
line-height: 37rpx;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 44rpx;
}
}
.dialog {
padding: 30rpx 33rpx;
font-size: 32rpx;
font-weight: 400;
line-height: 45rpx;
margin-left: 16rpx;
max-width: 524rpx;
background: #FFFFFF;
border-radius: 0rpx 24rpx 24rpx 24rpx;
color: rgba(0, 0, 0, 0.8);
order: 2;
}
.me {
.dialog {
color: #FFFFFF;
background: #6E52FE;
border-radius: 24rpx 0rpx 24rpx 24rpx;
margin-right: 16rpx;
}
.avatar {
order: 3;
}
}
}
}
我们没用scroll-view做的,你这个看问题的话 最好写个代码片段。
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html