微信小程序自定义组件,我们来写一个与今日头条类型的评论组件
1.我们先定义一个插件,Comment
申明为组件在comment.json中
{
"component": true,
"usingComponents": {}
}
2.编写页面模板
3.编写js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
maxlength:{
type:Number,
value:150,
},
placeholder:{
type:String,
value:'请输入评论内容'
},
isCollect:{//是否已收藏
type:Number,
value:false
},
showCollect:{//是否显示收藏
type:Boolean,
value:true
}
},
//
data:{
sendComment: true,
content:'',//评论内容
activty:false,
},
methods:{
commentClick:function(e){
this.setData({
sendComment:false,
});
},
bindTextAreaBlur:function(e){
this.setData({
sendComment: true,
});
},
bindinput:function(e){
this.setData({
content: e.detail.value,
activty: e.detail.cursor>0?true:false
})
},
//发送评论
sendPull:function(e){
this.triggerEvent("sendPull",{content:this.data.content,obj:this});
},
//清空内容
clearContent:function(e){
this.setData({
content: '',
})
},
//评论按钮
commentNuber:function(e){
this.triggerEvent("commentNumber");
},
//分享
shareClick:function(e){
this.triggerEvent("shareClick");
},
//收藏
collect:function(e){
this.triggerEvent("collectClick");
},
//是否收藏，亮灯
isCollect:function(e){
this.setData({
isCollect: !this.data.isCollect,
})
}
}
});
4.css代码
.comment{
position: fixed;
left:0;
bottom:0;
width:100%;
background:#fff;
z-index: 9999;
}
.pen{
width:41rpx;
margin-left:20rpx;
height:41rpx;
margin-top: 10rpx;
}
.pen-div{
display: inline-block;
vertical-align: top;
}
.pen-text{
display: inline-block;
vertical-align: top;
}
.pen-input{
margin-left:6rpx;
line-height:60rpx;
font-size:24rpx;
font-weight:100rpx;
letter-spacing:2rpx;
}
.showBottom{
width:100%;
height:86rpx;
border-top:1rpx solid #e1e1e1;
}
.showText{
display:inline-block;
vertical-align:top;
width:50%;
height:60rpx;
background:#e1e1e1;
margin:15rpx;
margin-left:38rpx;
border-radius:50rpx;
}
.showButtom{
display:inline-block;
vertical-align:top;
width:40%;
height:80rpx;
}
.comment-number-ioc{
width:51rpx;
margin-left:48rpx;
height:51rpx;
margin-top:23rpx;
}
.cnNuberm{
position:absolute;
width:45rpx;
height:20rpx;
border-radius:30rpx;
background:red;
color:#fff;
font-size:18rpx;
line-height:20rpx;
text-indent:4rpx;
top:14rpx;
left:500rpx;
}
.collect-ioc{
width:51rpx;
margin-left:51rpx;
height:46rpx;
margin-top:20rpx;
}
.comment-number{
display:inline-block;
vertical-align: top;
}
.collect{
display:inline-block;
vertical-align: top;
}
.share{
display:inline-block;
vertical-align: top;
}
.share-ioc{
width:53rpx;
margin-left:51rpx;
height:46rpx;
margin-top:20rpx;
}
.send-comment{
width:100%;
height:86rpx;
margin: 5rpx;
border-top:1rpx solid #e1e1e1;
}
.send-input{
width:530rpx;
min-height: 65rpx;
max-height:86rpx;
height: 65rpx;
background:#e1e1e1;
border-radius:30rpx;
outline:none;
overflow:hidden;
padding-left:20rpx;
margin-bottom:24rpx;
}
.send-view{
display:inline-block;
vertical-align:top;
margin:15rpx 15rpx 15rpx 55rpx;
}
.send-buttom{
display:inline-block;
vertical-align:top;
margin:18rpx 22rpx 18rpx 18rpx;
}
.send-text{
font-size:34rpx;
font-weight:320;
color:#e1e1e1;
}
.activty{
color:#009a61
}
到这一部自定义评论组件就完成了，接下来，我们把弹出回复层也做成一个组件
1.reply.json
{
"component": true,
"usingComponents": {
"comment": "/component/Comment/comment"
}
}
2.页面
3.css
.toats{
position:fixed;
padding-top:5%;
width:100%;
height:0;
background:#fff;
overflow: hidden;
bottom:0.1%;
transition:height 0.5s;
-moz-transition: height 0.5s; /* Firefox 4 */
-webkit-transition: height 0.5s; /* Safari 和 Chrome */
-o-transition: height 0.5s; /* Opera */
}
.top{
width:100%;
height:65rpx;
border-radius:6rpx;
border:1px solid #e1e1e1;
border-bottom:none;
}
.clear{
display:inline-block;
margin:11rpx 21rpx 21rpx 21rpx;
font-size:38rpx;
}
.top-title{
display:inline-block;
vertical-align:top;
line-height:65rpx;
margin-left:38%;
}
.container {
height:1100rpx;
margin-top:13rpx;
}
.comment-count{
font-size: 12px;
color: #CCCCCC;
line-height: 35px;
height: 35px;
padding: 0 36rpx;
}
.comment-list{
background-color: white;
}
.title{
border-top: 1px solid #f2f2f2;
}
.comment-item{
width: 100%;
height: auto;
overflow: hidden;
padding: 16px 18px;
border-bottom: 1px solid #f2f2f2;
}
.all-comment{
margin-left:15rpx;
margin-top: 15rpx;
}
.comment-person{
display: flex;
align-items: center;
}
.comment-person-avatar{
width: 42px;
height: 42px;
border-radius: 21px;
margin: 0 10px 0 0;
flex: 0 0 42px;
}
.comment-person-info{
flex: 1;
}
.comment-person-name{
font-size: 14px;
color: #232323;
}
.comment-time{
font-size: 12px;
color: #848484;
}
.comment-text{
font-size: 14px;
color: #232323;
padding-top: 24rpx;
}
4.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
showReply:{
type:Boolean,
value:false,
}
},
//
data: {
scrollTop:1,
lastX: 0,
lastY: 0,
},
methods: {
loadMoreEvent:function(){
},
clear:function(e){
console.info(">>>>clear");
this.setData({
showReply:false,
});
},
handletouchmove: function(event){
console.info(">>>>",event);
let currentX = event.touches[0].pageX
let currentY = event.touches[0].pageY
let tx = currentX - this.data.lastX
let ty = currentY - this.data.lastY
if (Math.abs(tx) < Math.abs(ty)) {
if (ty < 0){
this.setData({
showReply:false,
});
console.info("向上滑动" + ty);
}
else if (ty > 0){
console.info("向下滑动");
}
}
//将当前坐标进行保存以进行下一次计算
this.data.lastX = currentX
this.data.lastY = currentY
}
}
});
OK完成，接下来我们在页面引入这两个自定义组件
实现效果如下图，源码目前还在完善中
