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()
}
})
网友评论