仿朋友圈微信小程序效果极佳仿朋友圈评论

22208817-d64b7f2461fcd82b.gif

功能介绍

1、仿朋友圈评论框，自动增加高度，最大高度不超过4行；

2、评论框点击评论时弹出，离开则隐藏；

3、评论框根据键盘高度停留在键盘上方；

4、评论点击时，锁定事件焦点，移动到键盘是，评论框上方；

具体源码

var t = getApp(), util = t.requirejs("/core"), jquery = t.requirejs("jquery");
Page({

  /**
   * 页面的初始数据
   */
  data: {
    placeholderText:"评论",
    scrollTop:0,
    clickCommentETop:0,
    keyboardHeight:0,
    sendBtnStatus:"true",
    snsList:[],
    snsComments:{},
    page: 1,
    isfocus:false,
    loading: false,
    loaded: false,
    iscomment_text:false,
    currentPlayVideo:null,
    commentText:"",//评论内容
    current_pid:0,
    current_rpid:0,
    isAndroid:false,
    isiOS:false,
    comment_bottom:"0rpx"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _self = this;
    wx.getSystemInfo({
      success: (res)=> {
        if (res.platform == "android"){
          console.log(res.platform)
          _self.setData({
            isAndroid:true, 
          })
        }
        else if (res.platform == "ios") {   
          _self.setData({
            isiOS: true,
          })
        }
        else if (res.platform == "pc") {   
          console.log('pc设备')
        }
        _self.getList();
      }
    })
    this.setData({
      height: wx.getSystemInfoSync().windowHeight,
      width: wx.getSystemInfoSync().windowWidth
    })
    
  },
  getList:function(){
    var _self = this;
    util.loading()
    util.get("anbisns/get_list", {page:_self.data.page}, function(o) {
      if(o.error!=0){
        return void util.toast(_self, o.message)
      }
      var i = {
        loading: false,
        total: o.total,
        pagesize: o.pagesize
      };
      o.list.parent.length > 0 && (
        i.page = _self.data.page + 1, 
        i.snsList = _self.data.snsList.concat(o.list.parent),
        i.snsComments = jquery.extend(_self.data.snsComments,o.list.children),
        o.list.parent.length < o.pagesize && (i.loaded = true), _self.setSpeed(o.list.parent)),
        _self.setData(i),
        util.hideLoading()
    })
  },
  onplay:function(e){

    if(this.preIndex != e.target.id && this.preIndex){
      //如果已经有视频在播放，暂停上一个播放视频
      var currentPlayVideo = wx.createVideoContext(this.preIndex)
      currentPlayVideo.pause()
    }
    //当播放摸一个视频时。暂停其他已经再播放视频
    this.preIndex = e.target.id;
  },
  imgpreview:function(e){
    var _self = this;
    var index = e.currentTarget.dataset.index;//获取data-index
    var src = e.currentTarget.dataset.src;//获取data-src
    var imgList = _self.data.snsList[index].images;//获取data-list
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },
  onlike:function(event){
    var _self = this;

    if(_self.isliking === 1){
      return ;
    }
    _self.isliking = 1;
    util.loading()
    //点击喜欢
    var index = event.currentTarget.dataset.index;
    var ismelike = event.currentTarget.dataset.ismelike;
    var id = event.currentTarget.dataset.id;
    var type = event.currentTarget.dataset.type;
    var like_name = "";
    var islike_name= "";
    var liketype = "";
    if(id&&index>=0){

      var like_name_val;
      var islike_name_val;
      if(type == "comment"){
        //评论点赞
        var pid = event.currentTarget.dataset.pid;
        like_name = "snsComments["+pid+"]["+index+"]";
        liketype="like";

        if(ismelike>0){
          liketype="unlike";
          this.data.snsComments[pid][index].likes--;
          this.data.snsComments[pid][index].islike=0;
        }else{
          liketype="like";
          this.data.snsComments[pid][index].likes++;
          this.data.snsComments[pid][index].islike=1;
        }
        this.setData({
          snsComments: this.data.snsComments
        });

      }else{
        like_name = "snsList["+index+"].likes";
        islike_name = "snsList["+index+"].islike";
        if(ismelike>0){
          liketype="unlike";
          like_name_val = parseInt(this.data.snsList[index].likes)-1;
          islike_name_val = 0;
        }else{
          liketype="like";
          like_name_val = parseInt(this.data.snsList[index].likes)+1;
          islike_name_val = 1;
        }

        this.setData({
          [like_name]: like_name_val,
          [islike_name]:islike_name_val
        });
      }
      
      util.get("anbisns/like", {id:id,liketype:liketype}, function(o) {
        util.hideLoading()
        _self.isliking = 0;
      })
      
    }
  },
  handletouchmove:function(){
    this.setData({
      commentText:"",
      iscomment_text:!1,
    })
  },
  oncomment_focus:function(e){
    var that = this
    console.log("键盘聚焦"+e.detail.height )
    if(e.detail.height == 0){
        return//在开发者工具上便于调试，不会造成input框上推
    }
    var keyboardHeight =  e.detail.height;
    var newScrollTop = that.data.clickCommentETop - (that.data.height - keyboardHeight - 46 - 15 )//屏幕高-键盘高-输入框高 - 偏移量
    that.setData({
      comment_bottom:keyboardHeight+"px",
      //placeholderText:"移动窗口"+newScrollTop //测试
    },()=>{
      wx.pageScrollTo({
        scrollTop: that.data.scrollTop+newScrollTop,
        duration: 300
      })
    })
    
    
  },
  oncomment_blur:function(event){
    this.setData({
      comment_bottom:"0px",
    });
  },
  oncomment_input:function(event){
    this.setData({
      sendBtnStatus:false,
      commentText:event.detail.value
    })
  },
  onComment:function(event){
    //点击评论按钮
    this.setData({
      clickCommentETop:event.changedTouches[0].clientY,
      isfocus:true,
      iscomment_text:true,
      current_index: event.currentTarget.dataset.index,
      current_pid:event.currentTarget.dataset.pid,
      current_rpid:event.currentTarget.dataset.rpid
    })
  },
  sendComment:function(event){
    //发送评论
    var _self = this;
    util.loading()
    var param = {
      content:_self.data.commentText,
      pid:_self.data.current_pid,
      rpid:_self.data.current_rpid
    }
    util.get("anbisns/commentText", param, function(o) {
      if(o.error==0){
        if(_self.data.current_pid == _self.data.current_rpid){
          //主动态评论
          var cc_data = "snsList["+_self.data.current_index+"].comment_total";
          _self.data.snsComments[_self.data.current_pid] = o.newComments.concat(_self.data.snsComments[_self.data.current_pid])
          
          _self.setData({
            [cc_data]:_self.data.snsList[_self.data.current_index].comment_total+1,
            snsComments:_self.data.snsComments
          })
        }else{
          //评论回复
          _self.data.snsComments[_self.data.current_pid][_self.data.current_index].comment_total ++;//回复数量加1

          if(_self.data.snsComments.hasOwnProperty(_self.data.current_rpid)){
            _self.data.snsComments[_self.data.current_rpid] = o.newComments.concat(_self.data.snsComments[_self.data.current_rpid])
          }else{
            _self.data.snsComments[_self.data.current_rpid] = o.newComments
          }
          _self.setData({
            snsComments:_self.data.snsComments
          })
        }
        //评论结束，隐藏 评论框
        _self.setData({
          iscomment_text:!1,
          commentText:""
        })
      }
      util.hideLoading();
    });
    
  },
  onPageScroll:function(e){ // 获取滚动条当前位置
    this.setData({
      scrollTop:e.scrollTop
    })
},
  setSpeed: function (t) {
    if (t && !(t.length < 1))
      for (var a in t) {
        var e = t[a];
        if (!isNaN(e.lastratio)) {
          var i = e.lastratio / 100 * 2.5,
            s = wx.createContext();
          s.beginPath(),
            s.arc(34, 35, 30, .5 * Math.PI, 2.5 * Math.PI),
            s.setFillStyle("rgba(0,0,0,0)"),
            s.setStrokeStyle("rgba(0,0,0,0.2)"),
            s.setLineWidth(4),
            s.stroke(),
            s.beginPath(),
            s.arc(34, 35, 30, .5 * Math.PI, i * Math.PI),
            s.setFillStyle("rgba(0,0,0,0)"),
            s.setStrokeStyle("#ffffff"),
            s.setLineWidth(4),
            s.setLineCap("round"),
            s.stroke();
          var o = "coupon-" + e.id;
          wx.drawCanvas({
            canvasId: o,
            actions: s.getActions()
          })
        }
      }
  },
  onReachBottom: function () {
    this.data.loaded || this.data.snsList.length == this.data.total || this.getList()
  }
})