微信小程序开发学习笔记——3.11完成form评论案例的实现逻辑

>>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。

课程连接:https://www.bilibili.com/video/BV19G4y1K74d?p=25&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、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 value=this.data.iptValue
    let arr=this.data.listArr;//先获取数组
    arr.push({//用push向数组中追加对象
      id:Date.now,//设置id为时间戳
      title:value
    })
    this.setData({//将数组更新成最新的arr
      listArr:arr,
      iptValue:""//将输入框的内容清空 
    })
    console.log(this.data.iptValue);
  },
  //----------------------------------
  //点击关闭
  clickClose(e){
    let {index}=e.currentTarget.dataset;
    let arr=this.data.listArr;
    arr.splice(index,1); //splice(index,n):从index位置开始删除n个元素
    this.setData({
      listArr:arr
    })
    console.log(e.currentTarget.dataset);
  },

2、formKT.wxml

<view class="title">
    狂飙经典语录
</view>
<!--列表&几条评论-->


<view class="out"> 
  <block wx:if="{{listArr.length}}"> <!--块可以保持布局,用view的话,当for和if嵌套,可能会出问题-->
    <view class="list">
      <view class="row" wx:for="{{listArr}}" wx:key="id"> <!--for循环遍历数组listArr中的每个对象-->
        <view class="text">{{index+1}}. {{item.title}}</view> <!--item就是listArr中的每一个对象,.title就是获取每个对象的title值-->
        <!--点击关闭-->
        <view class="close" bindtap="clickClose" data-index="{{index}}"><!--索引值默认为index-->
          <icon type="clear" size="26"/>
        </view>
      </view>
    </view>
    <view class="count" wx:if="{{listArr.length}}">
      共{{listArr.length}}条评论 <!--数组有几条记录就有几条评论-->
    </view>
  </block>
  <view style="text-align: center;font-size: 38rpx;color: #555;padding: 20rpx;" wx:if="{{!listArr.length}}">
    暂无语录,请添加
  </view>
  
  <!--输入框-->
  <view class="comment">
    <input type="text" 
    placeholder="请输入评论内容..."
    placeholder-style="color:#aaa;font-size:28rpx"    
    model:value="{{iptValue}}"
    />    
    <button size="mini" type="primary" disabled="{{!iptValue.length}}"    
    bindtap="onSubmit">
    发布</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条评论,删光语录的时候,会显示暂无语录。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/462557.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

9.用FFmpeg测试H.264文件的解码时间

1. Essence of Method 要测试对H.264文件的解码时间&#xff0c;可以使用FFmpeg进行操作。FFmpeg是一个开源的多媒体处理工具&#xff0c;可以用来处理视频和音频文件&#xff0c;包括解码H.264文件。以下是使用FFmpeg的命令行来测试解码时间的方法&#xff1a; ffmpeg -i in…

01_什么是深度学习

人工智能包含了机器学习&#xff0c;而深度学习是机器学习的一个分支。 人工智能 试图将通常由人类完成的智力任务自动化—这就是人工智能。 用硬编码的方式实现人工智能&#xff0c;这称作符号主义人工智能Symbolic AI。其中包含专家系统。 机器学习 机器学习是一种替代符…

一个接口白嫖四个AI平台, 五个翻译平台

牙叔教程 简单易懂 家人们, 我这标题起的咋样, 请在评论区打出你对标题的评价 今天我们介绍的仓库是 OneYiGitHub - snailuncle/oneyi: 一个翻译接口, 对接多个平台, one译. 完全免费开源, 没有任何限制, 这是一个翻译接口, 他支持以下平台 五个翻译平台 小牛翻译 小牛翻译开…

sparksession对象简介

什么是sparksession对象 spark2.0之后&#xff0c;sparksession对象是spark编码的统一入口对象&#xff0c;通常我们在rdd编程时&#xff0c;需要SparkContext对象作为RDD编程入口&#xff0c;但sparksession对象既可以作为RDD编程对象入口&#xff0c;在sparkcore编程中可以通…

ARP和DDOS攻击防御介绍

学习目标&#xff1a; 1. 如何利用ARP漏洞进行攻击&#xff1f; 2. 怎样有效地防御ARP攻击&#xff1f; 3. 如何应对DDOS攻击&#xff1f; ARP攻击如何产生&#xff1f; ARP如何进行有效防御&#xff1f; ARP基础工作原理&#xff1a; 交换机会根据mac地址表&#xff0c;进行转…

书客护眼落地灯销量火爆,售罄、补货、又断货、再补货!又成断货王!

今日&#xff0c;备受关注的书客Sun护眼大路灯在市场上掀起了一股抢购热潮&#xff0c;作为近年来照明领域中最大的黑马品牌&#xff0c;始终坚持并最求技术创新的书客品牌&#xff0c;在近日发布全新系列落地护眼台灯后&#xff0c;不仅备受消费者青睐&#xff0c;更是成为了新…

C#,T检验(T -Test)的算法与源代码

1 T-Test 学生t检验(英语:Students t-test)是指虚无假设成立时的任一检定统计有学生t-分布的统计假说检定,属于母数统计。学生t检验常作为检验一群来自正态分配母体的独立样本之期望值的是否为某一实数,或是二群来自正态分配母体的独立样本之期望值的差是否为某一实数。举…

ABC345(A-C)

A - Leftrightarrow(100 points) 语法题&#xff0c;输入一个字符串&#xff0c;判断是否是&#xff1a;的样式&#xff0c;输入后只需判断是第一个和最后一个字符是否分别为">"和"<",再判断中间是否都是""即可。 #include<bits/stdc…

【C语言步行梯】C语言实现三子棋游戏(含详细分析)

&#x1f3af;每日努力一点点&#xff0c;技术进步看得见 &#x1f3e0;专栏介绍&#xff1a;【C语言步行梯】专栏用于介绍C语言相关内容&#xff0c;每篇文章将通过图片代码片段网络相关题目的方式编写&#xff0c;欢迎订阅~~ 文章目录 需求分析具体实现主函数体菜单实现游戏实…

sqllab第二十关通关笔记

知识点&#xff1a; cookie注入 可以进行url解析错误注入传参位置 get请求post请求cookie传参 输入admin admin进行登录&#xff0c;抓取当前数据包 通过放包发现是一个302跳转的响应包&#xff0c;页面只有一个 I Love Cookies&#xff1b;没什么信息 通过点击页面上方的按钮…

【Java】List, Set, Queue, Map 区别?

目录 List, Set, Queue, Map 区别&#xff1f; Collection和Collections List ArrayList 和 Array区别&#xff1f; ArrayList与LinkedList区别? ArrayList 能添加null吗&#xff1f; ArrayList 插入和删除时间复杂度&#xff1f; LinkedList 插入和删除时间复杂度&…

Vue2(4)——iHRM组织架构

组织架构-树组件应用 树形组件-用层级结构展示信息&#xff0c;可展开或折叠。 属性设置 data(绑定数据)props(设置属性)- children(设置子节点的字段名)/ label(设置显示内容的字段名)default-expand-all(默认展开所有节点) 组织架构-树组件自定义结构 显示右侧结构 节点结…

Vue2(三):绑定样式、条件渲染(v-if,v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序

一、绑定样式 1.绑定class样式 (1)字符串写法 适用于&#xff1a;样式类名不确定&#xff0c;需要动态获取。 <div id"root"><div class"basic" :class"mood" click"changeMood">test</div><!-- class是原本的…

【Python】进阶学习:基于Numpy实现按指定维度拼接两个数组

【Python】进阶学习&#xff1a;基于Numpy实现按指定维度拼接两个数组 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希…

第十三届蓝桥杯(C/C++ 大学B组)

目录 试题 A: 九进制转十进制 试题 B: 顺子日期 试题 C: 刷题统计 试题 D: 修剪灌木 试题 E: X 进制减法 试题 F: 统计子矩阵 试题 G: 积木画 试题 H: 扫雷 试题 I: 李白打酒加强版 试题 J: 砍竹子 试题 A: 九进制转十进制 九进制正整数 ( 2022 )转换成十进制等于多…

2000-2021年各省外商直接投资水平面板数据(含原始数据+计算结果)(无缺失)

2000-2021年各省外商直接投资水平面板数据&#xff08;含原始数据计算结果&#xff09;&#xff08;无缺失&#xff09; 1、时间&#xff1a;2000-2021年 2、指标&#xff1a;外商直接投资额&#xff08;万美元&#xff09;、外商直接投资额&#xff08;万元&#xff09;、国…

MySQL语法分类 DQL(4)聚合函数

为了更好的学习这里给出基本表数据用于查询操作 create table student (id int, name varchar(20), age int, sex varchar(5),address varchar(100),math int,english int );insert into student (id,name,age,sex,address,math,english) values (1,马云,55,男,杭州,66,78),…

2024年【危险化学品经营单位主要负责人】找解析及危险化学品经营单位主要负责人模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品经营单位主要负责人找解析考前必练&#xff01;安全生产模拟考试一点通每个月更新危险化学品经营单位主要负责人模拟考试题目及答案&#xff01;多做几遍&#xff0c;其实通过危险化学品经营单位主要负责人…

移动云行动:5.5G技术引领数字化转型

刚刚结束的全国两会上&#xff0c;有人大代表建议应尽快发挥5G-A&#xff08;5.5G&#xff09;优势&#xff0c;加快试点城市布局。此前&#xff0c;中国移动已宣布将在300多个城市启动5.5G商用部署。在通信技术的历史长河中&#xff0c;4G改变了我们的生活方式&#xff0c;而5…

【Poi-tl Documentation】区块对标签显示隐藏改造

前置说明&#xff1a; <dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.12.1</version> </dependency>模板&#xff1a; 删除行表格测试.docx 改造前测试效果 package run.siyuan…