<!--pages/socks/socks.wxml--> <view bindtap='outbtn'> <view wx:if="{{userInfo}}">系统消息: 欢迎 {{ userInfo.nickName }} 加入聊天室</view> <view> <scroll-view scroll-y="true" scroll-top="{{scrollTop}}"> <block wx:for="{{newslist}}" wx:key> <!-- 历史消息 --> <!-- <view> <view> <image src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image> <text>{{ item.nickName }}{{item.date}}</text> </view> <view> <block wx:if="{{item.type=='text'}}"> <view>{{item.content}}</view> </block> <block wx:if="{{item.type=='image'}}"> <image src="https://www.jb51.net/{{item.images}}"></image> </block> </view> </view> --> <view>{{item.date}}</view> <!--自己的消息 --> <view wx:if="{{item.nickName == userInfo.nickName}}"> <view> <text>{{ item.nickName }}</text> <image src="https://www.jb51.net/{{userInfo.avatarUrl}}"></image> </view> <view> <block wx:if="{{item.type=='text'}}"> <view>{{item.content}}</view> </block> <block wx:if="{{item.type=='image'}}"> <image src="https://www.jb51.net/{{item.images}}" data-src="https://www.jb51.net/{{item.images}}" lazy-load="true" bindtap="previewImg"></image> </block> </view> </view> <!-- 别人的消息 --> <view wx:else> <view> <image src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image> <text>{{ item.nickName }}</text> </view> <view> <block wx:if="{{item.type=='text'}}"> <view>{{item.content}}</view> </block> <block wx:if="{{item.type=='image'}}"> <image src="https://www.jb51.net/{{item.images}}" data-src="https://www.jb51.net/{{item.images}}" lazy-load="true" bindtap="previewImg"></image> </block> </view> </view> </block> </scroll-view> </view> </view> <view></view> <!-- 聊天输入 --> <view> <form bindreset="cleanInput"> <input type="text" placeholder="请输入聊天内容.." value="{{massage}}" bindinput='bindChange'></input> <view bindtap='increase'>+</view> <button type="primary" bindtap='send' formType="reset" size="small" button-hover="blue">发送</button> </form> <view wx:if="{{increase}}"> <view bindtap='chooseImage'>相册 </view> </view> </view>
WXSS:
/* pages/socks/socks.wxss */ page { background-color: #f7f7f7; height: 100%; } /* 聊天内容 */ .news { padding-top: 30rpx; text-align: center; /* height:100%; */ box-sizing:border-box; } #flag{ margin-bottom: 100rpx; height: 30rpx; } .chat-notice{ text-align: center; font-size: 30rpx; padding: 10rpx 0; color: #666; } .historycon { height: 100%; width: 100%; /* flex-direction: column; */ display: flex; border-top: 0px; } /* 聊天 */ .chat-news{ width: 100%; overflow: hidden; } .chat-news .my_right { float: right; /* right: 40rpx; */ padding: 10rpx 10rpx; } .chat-news .name{ margin-right: 10rpx; } .chat-news .you_left { float: left; /* left: 5rpx; */ padding: 10rpx 10rpx; } .selectImg{ display: inline-block; width: 150rpx; height: 150rpx; margin-left: 50rpx; } .my_right .selectImg{ margin-right: 80rpx; } .new_img { width: 60rpx; height: 60rpx; border-radius: 50%; vertical-align: middle; margin-right: 10rpx; } .new_txt { max-width: 300rpx; display: inline-block; border-radius: 6rpx; line-height: 60rpx; background-color: #95d4ff; padding: 5rpx 20rpx; margin: 0 10rpx; margin-left: 50rpx; } .my_right .new_txt{ margin-right:60rpx; } .you{ background-color: lightgreen; } .my { border-color: transparent transparent transparent #95d4ff; } .you { border-color: transparent #95d4ff transparent transparent; } .hei{ margin-top: 50px; height: 20rpx; } .history { height: 100%; margin-top: 15px; padding: 10rpx; font-size: 14px; line-height: 40px; word-break: break-all; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; z-index: -1; } /* 信息输入区域 */ .message{ position: fixed; bottom:0; width: 100%; } .sendMessage{ display: block; height: 80rpx; padding: 10rpx 10rpx; background-color: #fff; border-top: 2rpx solid #eee; border-bottom: 2rpx solid #eee; z-index:3; } .sendMessage input{ float:left; width: 66%; height: 100%; line-height: 80rpx; border-bottom: 1rpx solid #ccc; padding:0 10rpx; font-size: 35rpx; color: #666; } .sendMessage view{ display: inline-block; width: 80rpx; height: 80rpx; line-height: 80rpx; font-size: 60rpx; text-align: center; color: #999; border: 1rpx solid #ccc; border-radius: 50%; margin-left: 10rpx; } .sendMessage button { float: right; font-size: 35rpx; } .increased{ width:100%; /* height: 150rpx; */ padding: 40rpx 30rpx; background-color: #fff; } .increased .image{ width: 100rpx; height: 100rpx; border: 3rpx solid #ccc; line-height: 100rpx; text-align: center; border-radius: 8rpx; font-size:35rpx; } @keyframes slidedown { from { transform: translateY(0); } to { transform: translateY(100%); } } .slidedown { animation: slidedown 0.5s linear ; } .slideup { animation: slideup 0.5s linear ; } @keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }
总结