初始化滚动条高度
var keyHeight = 0;
数据格式
const CHAT_DATA=[ { type:0,//0客服1用户 content:'欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎', headImg:'../../assets/common/images/headHortrait.jpeg',//头像 creatTime:'2019-01-01',//创建时间 contentType:'text' }, { type: 0,//0客服1用户 content: '1111111', headImg: '../../assets/common/images/headHortrait.jpeg',//头像 creatTime: '2019-01-01',//创建时间 contentType: 'text' }, { type: 1,//0客服1用户 content: '222222', headImg: '../../assets/common/images/headHortrait.jpeg',//头像 creatTime: '2019-01-01',//创建时间 contentType: 'text' }, { type: 0,//0客服1用户 content: '333333', headImg: '../../assets/common/images/headHortrait.jpeg',//头像 creatTime: '2019-01-01',//创建时间 contentType: 'text' }, { type: 1,//0客服1用户 content: '4444444', headImg: '../../assets/common/images/headHortrait.jpeg',//头像 creatTime: '2019-01-01',//创建时间 contentType: 'text', }, { type: 0,//0客服1用户 content: 'http://tmp/wxc79c66d8b0ed19a8.o6zAJs6QE8L8FKq645ts4e3LoKzI.pGakaVHKmbQ3160aa57e2bf33cb576fbabf691cd890b.durationTime=3706.aac', headImg: '../../assets/common/images/headHortrait.jpeg',//头像 creatTime: '2019-01-01',//创建时间 contentType: 'voice', duration: '3706', },{ type: 1,//0客服1用户 content: 'http://tmp/wxc79c66d8b0ed19a8.o6zAJs6QE8L8FKq645ts4e3LoKzI.pGakaVHKmbQ3160aa57e2bf33cb576fbabf691cd890b.durationTime=3706.aac', headImg: '../../assets/common/images/headHortrait.jpeg',//头像 creatTime: '2019-01-01',//创建时间 contentType: 'voice', duration:'3706' }, { type: 1,//0客服1用户 content: 'https://img.yzcdn.cn/vant/cat.jpeg', headImg: '../../assets/common/images/headHortrait.jpeg',//头像 creatTime: '2019-01-01',//创建时间 contentType: 'img' }, { type: 1,//0客服1用户 content: 'https://img.yzcdn.cn/vant/cat.jpeg', headImg: '../../assets/common/images/headHortrait.jpeg',//头像 creatTime: '2019-01-01',//创建时间 contentType: 'img' } ];
wxml对话框
<block wx:key wx:for='{{chatData}}' wx:for-index="index"> <!-- 单个消息1 客服发出（左） --> <view wx:if='{{item.type==0}}'> <view> <image src='https://www.jb51.net/{{item.headImg}}' mode='widthFix'></image> </view> <view wx:if="{{item.contentType==='text'}}">{{item.content}}</view> <view wx:if="{{item.contentType==='voice'}}" data-duration="https://www.jb51.net/{{item.content}}">{{item.duration}}s</view> <view wx:if="{{item.contentType==='img'}}"><image src="https://www.jb51.net/{{item.content}}" data-src="https://www.jb51.net/{{item.content}}" mode='widthFix' bindtap="onPreview"/></view> </view> <!-- 单个消息2 用户发出（右） --> <view wx:else> <view wx:if="{{item.contentType==='voice'}}" data-duration="{{item.duration}}" bindtap="playRecord">{{item.duration}}"<van-icon /></view> <view wx:if="{{item.contentType==='text'}}">{{item.content}}</view> <view wx:if="{{item.contentType==='img'}}"><image src="https://www.jb51.net/{{item.content}}" data-src="https://www.jb51.net/{{item.content}}" mode='widthFix' bindtap="onPreview"/></view> <view> <image src='https://www.jb51.net/{{item.headImg}}' mode='widthFix'></image> </view> </view> </block>
wxml底部输入框
<view> <van-row> <van-col span="2"wx:if="{{show}}"> <van-icon bindtap="startRecord" class-prefix='icon' size="40rpx" ></van-icon></van-col> <van-col span="2" wx:if="{{!show}}"> <van-icon bindtap="startRecord" class-prefix='icon' size="40rpx" ></van-icon></van-col> <van-col span="18" wx:if="{{show}}"> <input bindconfirm='sendClick'bind:input="inputValue" adjust-position='{{false}}' value='{{inputVal}}' confirm-type='send' bindfocus='focus' bindblur='blur'></input></van-col> <van-col span="18" wx:if="{{!show}}"> <view bind:touchstart="startTalk" bind:touchend='stopRecord'>按住请说话</view></van-col> <van-col span="2"><van-icon class-prefix='icon' size="40rpx" bindtap="getEmoji"></van-icon></van-col> <van-col span="2"><van-uploader use-slot accept='image' bind:after-read="uploadeImg"> <van-icon class-prefix='icon' size="40rpx" ></van-icon></van-uploader></van-col> </van-row> <view wx:if="{{showEmoji}}"> <emoji bind:clickEmoji="clickEmoji" data-key="inputVal" value="{{inputVal}}" /> </view> </view> </view> <view wx:if="{{showDailog}}" > <view> <image src=""></image> <text>{{toastTitle}}</text> </view>
css