用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

15

主题

35

帖子

704

积分

特邀嘉宾

积分
704
2018-7-31 16:40:04 黄秀杰 特邀嘉宾 楼主 15417
本帖最后由 黄秀杰 于 2018-7-31 16:42 编辑

2599324-228d5ddd201c08fb.gif
场景
用于在线客服的聊天对话等

一、布局圈点
1、三角箭头
绘制一个26rpx*26rpx矩形,使它旋转45度,然后隐去对半,形成气泡上的直角三角形。
  • [AppleScript] 纯文本查看 复制代码
    <!-- 画三角箭头 -->
        <view class="triangle" style="{{item.myself == 1 ? 'right: 140rpx; background: #7ECB4B' : 'left: 140rpx;'}}"></view>
    
    /* 三角箭头 */
    .body .triangle {
        background: white;
        width: 20rpx;
        height: 20rpx;
        margin-top: 26rpx;
        transform: rotate(45deg);
        position: absolute;
    }


2、flex-flow改变流动方向
分别取值['row' | 'row-reverse'],实现对方发来的消息头像居左,自己发的消息头像居右。

  • [AppleScript] 纯文本查看 复制代码
    <view class="body" style="flex-flow: {{item.myself == 0 ? 'row' : 'row-reverse'}}">


3、按住说话悬浮层水平与垂直居中

方案1,js手工计算
  • [AppleScript] 纯文本查看 复制代码
    data: {
        hud_top: (wx.getSystemInfoSync().windowHeight - 150) / 2,
        hud_left: (wx.getSystemInfoSync().windowWidth - 150) / 2,
    }
    <view class="hud-container" wx:if="{{status != state.normal}}" style="top: {{hud_top}}px; left: {{hud_left}}px;">


方案2,纯css

  • [AppleScript] 纯文本查看 复制代码
    /*悬浮提示框*/
    .hud-container {
        position: fixed;
        width: 150px;
        height: 150px;
        left: 50%;
        top: 50%;
        margin-left: -75px;
        margin-top: -75px;
    }
    


经过对比,方案2要优于方案1

JS圈点
一、touch事件实现上滑取消语音输入
按下出现悬浮,上滑到超过一定位移出现取消提示,松手取消;上滑未超过,松手发送


  • [AppleScript] 纯文本查看 复制代码
    touchStart: function (e) {
        // 触摸开始
        var startY = e.touches[0].clientY;
        // 记录初始Y值
        this.setData({
          startY: startY,
          status: this.data.state.pressed
        });
      },
      touchMove: function (e) {
        // 触摸移动
        var movedY = e.touches[0].clientY;
        var distance = this.data.startY - movedY;
        // console.log(distance);
        // 距离超过50,取消发送
        this.setData({
          status: distance > 50 ? this.data.state.cancel : this.data.state.pressed
        });
      },
      touchEnd: function (e) {
        // 触摸结束
        var endY = e.changedTouches[0].clientY;
        var distance = this.data.startY - endY;
        // console.log(distance);
        // 距离超过50,取消发送
        this.setData({
          cancel: distance > 50 ? true : false,
          status: this.data.state.normal
        });
        // 不论如何,都结束录音
        this.stop();
      },


二、发送消息完毕滚到页尾

  • [AppleScript] 纯文本查看 复制代码
    data: {
      toView: ''
    }
    reply: {
    // ...
    this.scrollToBottom()
    },
    scrollToBottom: function () {
        this.setData({
          toView: 'row_' + (this.data.message_list.length - 1)
        });
      },



  • [AppleScript] 纯文本查看 复制代码
    <!--每一行消息条-->
    <view class="row" wx:for="{{message_list}}" wx:key="" id="row_{{index}}">


在线体验
2599324-0f35fc4563eae29c.jpg
Mina组件库
源码下载
关注订阅号【黄秀杰】或扫一扫下方二维码,回复关键字115
2599324-60b6db0a9b0ed867.png


发新帖
    您需要登录后才可以回帖 登录 | 立即注册