农村做网站开发,快速建站完整版,门户网站都有哪些,网站空间要备案吗跟着b站up主“咸虾米_”学习微信小程序开发中#xff0c;把学习记录存到这方便后续查找。
课程连接#xff1a;https://www.bilibili.com/video/BV19G4y1K74d?p25vd_source9b149469177ab5fdc47515e14cf3cf74
一、javascript参考手册——splice
https://www.…跟着b站up主“咸虾米_”学习微信小程序开发中把学习记录存到这方便后续查找。
课程连接https://www.bilibili.com/video/BV19G4y1K74d?p25vd_source9b149469177ab5fdc47515e14cf3cf74
一、javascript参考手册——splice
https://www.runoob.com/jsref/jsref-splice.html
二、代码
1、formKT.js的Page下添加如下代码
data: {iptValue:,listArr:[{id:123,title:告诉老莫我要吃鱼}, {id:456,title:咖啡不冲迟早成功},{id:789,title:妻管严很幸福的哦}]},
//------------------------------------//点击发布按钮onSubmit(){let valuethis.data.iptValuelet arrthis.data.listArr;//先获取数组arr.push({//用push向数组中追加对象id:Date.now,//设置id为时间戳title:value})this.setData({//将数组更新成最新的arrlistArr:arr,iptValue://将输入框的内容清空 })console.log(this.data.iptValue);},//----------------------------------//点击关闭clickClose(e){let {index}e.currentTarget.dataset;let arrthis.data.listArr;arr.splice(index,1); //spliceindexn从index位置开始删除n个元素this.setData({listArr:arr})console.log(e.currentTarget.dataset);},
2、formKT.wxml
view classtitle狂飙经典语录
/view
!--列表几条评论--view classout block wx:if{{listArr.length}} !--块可以保持布局用view的话当for和if嵌套可能会出问题--view classlistview classrow wx:for{{listArr}} wx:keyid !--for循环遍历数组listArr中的每个对象--view classtext{{index1}}. {{item.title}}/view !--item就是listArr中的每一个对象.title就是获取每个对象的title值--!--点击关闭--view classclose bindtapclickClose data-index{{index}}!--索引值默认为index--icon typeclear size26//view/view/viewview classcount wx:if{{listArr.length}}共{{listArr.length}}条评论 !--数组有几条记录就有几条评论--/view/blockview styletext-align: center;font-size: 38rpx;color: #555;padding: 20rpx; wx:if{{!listArr.length}}暂无语录,请添加/view!--输入框--view classcommentinput typetext placeholder请输入评论内容...placeholder-stylecolor:#aaa;font-size:28rpx model:value{{iptValue}}/ button sizemini typeprimary disabled{{!iptValue.length}} bindtaponSubmit发布/button/view
/view
3、formKT.wxss
.title{font-size: 50rpx;text-align: center;color:#3c3c3c;padding:60rpx 0 30rpx;
}
.out{width: 690rpx;margin:30rpx;box-shadow: 0 15rpx 40rpx rgba(0,0,0,0.1);border-radius: 10rpx;padding:30rpx;box-sizing: border-box;
}
.out .list .row{padding:15rpx 0;border-bottom:1rpx solid #e8e8e8;display: flex;justify-content: space-between;align-items: center;font-size: 34rpx;color:#333;
}
.out .list .row .text{padding-right: 10rpx;box-sizing: border-box;
}
.out .count{padding:20rpx 0;font-size: 30rpx;color:#888;text-align:center;
}
.out .comment{display: flex;margin-top:20rpx;
}
.out .comment input{flex:4;background: #f4f4f4;margin-right: 10rpx;height: 100%; height: 64rpx;border-radius: 8rpx;padding:0 20rpx;color:#333;
}
.out .comment button{flex:1;
}
三、示例
在对话框内输入内容发布才会变绿。
点击发布后对话框内的内容会自动清空。
有几条评论就显示共n条评论删光语录的时候会显示暂无语录。
