1.静态设计

1.1标题

1.1.1 wxml文件

  <!-- 标题 -->
  <view class="title">励志语句</view>

1.1.2 wcss文件 

.title{
  font-size: 50rpx;
  text-align: center;
  /* 上左右下 */
  padding: 60rpx 0 30rpx;
}

1.1.3显示 

 

1.2方块卡片

1.2.1 wxml文件

 <view class="card">
    <!-- 数据列表 -->
    <view class="list">
      <view class="list-row">
        <view class="text">1. 每天都是一个新的起点</view>
        <view class="close">
          <icon class="icon-small" type="clear" size="28"></icon>
        </view>
      </view>
      <view class="list-row">
        <view class="text">2. 我们扬帆起航</view>
        <view class="close">
          <icon type="clear" size="28"></icon>
        </view>
      </view>
    </view>
    <view class="count">共2语句</view>
    <view class="comment">
      <input type="text" placeholder="请输入内容" />
      <button type="primary">发送</button>
    </view>
  </view>

1.2.2 wcss文件  

.card{
  width: 690rpx;
  margin: 30rpx;
  /* 设置阴影 */
  box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, .1);
  /* 圆角 */
  border-radius: 10rpx;
  padding: 30rpx;
  /* 怪异盒子 */
  box-sizing: border-box;
}
/* 每一行的样式 */
.card .list .list-row{
  padding: 15rpx 0;
  /* 下边框 */
  border-bottom: 1rpx solid #e8e8e8;
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  /* 水平居中 */
  align-items: center;
  /* 怪异盒 */
  box-sizing: border-box;
  }
.card .count{
  padding: 20rpx 0;
  font-size: 30rpx;
  color: #888;
  text-align: center;
}
.card .comment{
  /* 弹性布局 */
  display: flex;
  margin-top: 20rpx;
}
.card .comment input{
  flex: 4;
  background-color: #f4f4f4;
  margin-right: 20rpx;
  height: 64rpx;
  border-radius: 8rpx;
  /* 让placeholder与border留有一定距离 */
  padding: 0 20rpx;
}
.card .comment button{
  flex: 1;
}

1.2.3显示  

 

 

2. js

2.1表单数据双向绑定

  <input type="text" placeholder="请输入内容" model:value="{{inputValue}}"   />

  data: {
    inputValue:"",
}

2.2声明数组，遍历

  data: {
    // 双向绑定的表单
    inputValue:"",
    // 数组
    list:[
      {id:"123154",message:"姬霓太美"},
      {id:"65465465",message:"鸡哥早上好"},
      {id:"123154",message:"捕获野生的鸡群"},
    ],
  },

      <view class="list-row" wx:for="{{list}}" wx:key="id">
        <view class="text">{{index+1}}.{{item.message}}</view>
        <view class="close">
          <icon class="icon-small" type="clear" size="28"></icon>
        </view>
     </view>
     

2.3发送按钮绑定send事件，表单输入发送

send(){
  // 获取数据
  let value=this.data.inputValue
  // 获取数组
  let arr=this.data.list
  // 向数组添加数据
  arr.push({
    id:Date.now(),
    message:value
  })

  // 修改数据
  this.setData({
    list:arr,
    inputValue:""
  })
}

2.4删除图标绑定删除事件

deleteIndex(e){
  // 获取索引
let index=e.currentTarget.dataset.index
// 拿到数组
let arr=this.data.list
arr.splice(index,1)
// 修改data数据
this.setData({
  list:arr
})

}

2.5所有删除完后隐藏评论

    <view class="count" wx:if="{{list.length}}">共{{list.length}}语句</view>
    <view class="empty" wx:else>你没有励志语句</view>

2.6显示

 3.效果图

 

 

 

 

 

4.源码

4.1wxml文件

<view>
  <!-- 标题 -->
  <view class="title">励志语句</view>
  <!-- 方块容器 -->
  <view class="card">
    <!-- 数据列表 -->
    <view class="list">
      <view class="list-row" wx:for="{{list}}" wx:key="id">
        <view class="text">{{index+1}}.{{item.message}}</view>
        <view class="close" bindtap="deleteIndex" data-index="{{index}}">
          <icon class="icon-small" type="clear" size="28"></icon>
        </view>
      </view>
    </view>
    <view class="count" wx:if="{{list.length}}">共{{list.length}}语句</view>
    <view class="empty" wx:else>你没有励志语句</view>
    <view class="comment">
      <input type="text" placeholder="请输入内容" model:value="{{inputValue}}" 
      bindconfirm="send"
        />
      <button type="primary" disabled="{{!inputValue.length}}" bindtap="send">发送</button>
    </view>
  </view>
</view>

4.2js文件

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 双向绑定的表单
    inputValue:"",
    // 数组
    list:[
      {id:"123154",message:"姬霓太美"},
      {id:"65465465",message:"鸡哥早上好"},
      {id:"123154",message:"捕获野生的鸡群"},
    ],
  },
  // 点击发送按钮
send(){
  // 获取数据
  let value=this.data.inputValue
  // 获取数组
  let arr=this.data.list
  // 向数组添加数据
  arr.push({
    id:Date.now(),
    message:value
  })
  // 修改数据
  this.setData({
    list:arr,
    inputValue:""
  })
},
deleteIndex(e){
  // 获取索引
let index=e.currentTarget.dataset.index
// 拿到数组
let arr=this.data.list
arr.splice(index,1)
// 修改data数据
this.setData({
  list:arr
})

}
   ,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})