微信小程序自定義組件,我們來寫一個與今日頭條類型的評論組件
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:'請輸入評論內(nèi)容'
? ? },
? ? isCollect:{//是否已收藏
? ? ? type:Number,
? ? ? value:false
? ? },
? ? showCollect:{//是否顯示收藏
? ? ? type:Boolean,
? ? ? value:true
? ? }
? },
? //
? data:{
? ? sendComment: true,
? ? content:'',//評論內(nèi)容
? ? 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
? ? ? })
? ? },
? ? //發(fā)送評論
? ? sendPull:function(e){
? ? ? this.triggerEvent("sendPull",{content:this.data.content,obj:this});
? ? },
? ? //清空內(nèi)容
? ? 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完成，接下來我們在頁面引入這兩個自定義組件
實現(xiàn)效果如下圖，源碼目前還在完善中
