一、在wxml中添加scroll-view
<view>
...
<scroll-view class="scrollarea" scroll-y="true" scroll-into-view="{{bottomViewId}}" scroll-with-animation="true"
bindscroll="messageListScrolling" enable-back-to-top="true" type='list'>
<view class="box" wx:for="{{content}}" wx:key="this" id="item{{index}}">
<view class="item" wx:if="{{index%2 == 0}}">
<view class="mineTextBox">
<text class="mineText">{{content[index].text}}</text>
</view>
</view>
<view class="item" wx:if="{{index%2 == 1}}">
<view class="himTextBox">
<text class="himText">{{content[index].text}}</text>
</view>
</view>
</view>
...
</view>
在scroll-view中，我添加了一個(gè)view用來包裹對(duì)話列表，這里主要通過設(shè)置scroll-y="true"來允許縱向滾動(dòng)、croll-into-view="{{bottomViewId}}"來滾動(dòng)至指定的view
二、js代碼
Page({
data: {
bottomViewId: 0,
content : [],
},
sendMess() {
// 這里寫你添加到messageList的代碼
content.push({
id : 0,// 對(duì)話發(fā)送，為0
text : "問題"
})
content.push({
id : 1,// 對(duì)話回復(fù)，為1
text : "回復(fù)"
})
// 定位到最后一行
setTimeout(() => {
that.setData({bottomViewId: `item${that.data.content.length-1}`,
})
}
})
三、wxss樣式代碼
/**chat.wxss**/
.scrollarea {
background: linear-gradient(to bottom, #b9deff, #FFFFFF);
width: 100%;
max-height: 79vh;
min-height: 744px;
overflow: auto;
}
.box {
width: 100%;
display: flex;
flex-direction: row;
padding-top: 10px;
margin-bottom: 2px;
}
.item {
width: 100%;
min-height: 50px;
display: flex;
flex-direction: row;
align-items: center;
}
.mineText {
font-size: 16px;
color: black;
}
.himText {
font-size: 16px;
color: black;
}
