调整页面滚动

This commit is contained in:
唐明明
2022-02-08 13:33:14 +08:00
parent 2e58fd4cb2
commit a3ddf46f88
6 changed files with 58 additions and 20 deletions

View File

@@ -1,6 +1,15 @@
<template>
<view class="sent--text">
<input class="input" type="text" @focus="focus" @blur="blur" v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
<input
class="input"
type="text"
@focus="focus"
@blur="blur"
v-model="inputTxt"
confirm-type="send"
@confirm="sent"
cursor-spacing="10"
/>
<!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
</view>
</template>
@@ -71,7 +80,7 @@
.input {
background: #F3F6FB;
height: 70rpx;
width: 460rpx;
width: 500rpx;
border-radius: 10rpx;
margin-right: 15rpx;
padding: 0 20rpx;

View File

@@ -102,7 +102,7 @@
line-height: 70rpx;
justify-content: center;
align-items: center;
width: 460rpx;
width: 500rpx;
border-radius: 10rpx;
margin-right: 15rpx;

View File

@@ -36,13 +36,12 @@
@success="getMessageList" />
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
@success="getMessageList" />
<view class="msg-type" @click="showPopups = !showPopups">
<view class="msg-type msg-popups" @click="scrollBottom('msgPopups')">
<image class="icon" src="@/static/icon/popups-icon.png"></image>
</view>
</view>
<!-- 弹出层 -->
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
@success="() => {showPopups = false, getMessageList()}"></sent-popups>
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, getMessageList()}"></sent-popups>
</view>
</template>
@@ -148,10 +147,14 @@
})
},
// 滚动到底部
scrollBottom() {
scrollBottom(type) {
if(type === 'msgPopups'){
this.showPopups = !this.showPopups
}
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
ChatList.scrollToElement(el, {
offset: 0,
animated: false
})
}, 50)
@@ -165,19 +168,14 @@
.chat {
background: $window-color;
flex: 1;
.body {
flex: 1;
.cell {
.body {
flex: 1;
.cell {
padding: 10rpx 30rpx;
.time {
justify-content: center;
align-items: center;
padding-bottom: 20rpx;
padding-bottom: 20rpx;
.text {
background: #fff;
font-size: 24rpx;
@@ -238,12 +236,10 @@
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;