uni-app chat room page scrolling in the end of the section

The uni-app chat room rolled bottommost

  Please note! : Knowledge is combined with uni-app vue

  The written chat rooms, emmmmm encountered a problem more serious things, chat Well, we would like to achieve it is nothing more than micro letter, QQ chat kind of effect Well, we studied ,,,, emmmm (n long long) , finally, to write out this function, what time code, etc. sorted out for everyone to see, today will mainly talk about a problem encountered is that when I send a message, you want to pop up a message, send a bomb a code attached on

  

<view class="content" id="content" :style="{height: style.contentViewHeight + 'px'}">
            <scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}" :scroll-with-animation="true" :scroll-top="scrollTop">
                <!-- <view class="chat-window"> -->
                    <view class="small-talk_time">12:18</view>
                    <!-- 聊天内容 -->
                    <view class="content-all">
                        <!-- 聊天窗口 -->
                        <view :class="item.type" v-for="(item, index) in chatRecord" :key="index" class="m-item">
                            <!-- 收信人 -->
                            <view class="talk-text talk-left" v-if="item.type == 'talk-left'">
                                <!-- 收信人头像 -->
                                <view class="talk-photo">
                                    <image src="../../static/images/myself.jpg" class="talk-img"></image>
                                </view>
                                <!-- 收信人消息 -->
                                <view class="talk-content">
                                    <view class="talk-huge"></view>
                                    <view class="talk-title">{{item.message}}</view>
                                </view>
                            </view>
                            <view class="talk-text talk-right" v-if="item.type == 'talk-right'">
                                <!-- 发信人消息 -->
                                <view class="talk-content">
                                    <view class="talk-title">{{item.message}}</view>
                                    <view class="talk-huge"></view>
                                </view>
                                <!-- 发信人头像 -->
                                <view class="talk-photo">
                                    <image src="../../static/images/myself.jpg" class="talk-img"></image>
                                </view>
                            </view>
                        </view>
                    </view>
                <!-- </view> -->
            </scroll-view>
        </view>

 

Guess you like

Origin www.cnblogs.com/gongliying/p/11258189.html