小程序编写页面级todo-list

页面布局和事件绑定

创建输入框和按钮并且设置样式

// pages/todolist/todolist.wxml
<view class="box">
  <input type="text"/>
  <button  type="primary" >add</button>
</view>

/* pages/todolist/todolist.wxss */
.box{
  display: flex;
  flex-direction: row;
}
input{
  border:1px solid #000;
  height: 40px;
  width: 70%;
  line-height: 40px;
  border-radius: 10px;
}
button{
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  text-align: center;

  color: #FFF;
  background-color: #2e79fc !important;
  border-radius: 10px;
  height: 40px;
  line-height: 40px;
  width: 20% !important;
}

双向绑定input，使用bindinput属性进行监听输入框

// pages/todolist/todolist.js
<input type="text" bindinput="onInput"/>

data中设置一个变量，并创建一个事件函数

// pages/todolist/todolist.js
  data: {
    myText:""
  },
  onInput(event){
    let inputVal=event.detail.value
    this.setData({
      myText:inputVal
    })
  },

双向绑定成功，接下来模拟列表数据

// pages/todolist/todolist.js
	data: {
    myText:"",
    dataList:["测试1","测试2","测试3"]
  },

使用for循环遍历

// pages/todolist/todolist.wxml
<view>
  <view wx:for="{{dataList}}" wx:key="index">
    <text>{{item}}</text>
  </view>
</view>

数据遍历成功到页面后开始新增待办逻辑。首先将按钮绑定事件，然后通过双向绑定逻辑将输入框数据渲染到页面中

// pages/todolist/todolist.wxml
<button  type="primary" bind:tap="onAdd">add</button>
// pages/todolist/todolist.js
  onAdd(){
    this.setData({
      dataList:[...this.data.dataList,this.data.myText]
    })
  },

数据成功渲染👏

优化

待办创建之后输入框中值还在，这个时候可以在input标签上绑定一个value属性，当点击新增时重新赋值并将值绑定到value属性上

// pages/todolist/todolist.wxml
<input type="text" bindinput="onInput" value="{{myText}}"/>
// pages/todolist/todolist.js
onAdd(){
    this.setData({
      dataList:[...this.data.dataList,this.data.myText],
      myText:""
    })
  },

删除操作

有新增就有删除操作，首先新增一个删除按钮并将列表样式调整一下

// pages/todolist/todolist.wxml
<view>
  <view wx:for="{{dataList}}" wx:key="index" class="content">
    <text class="text_list">{{item}}</text>
    <button class="delete_btn">删除</button>
  </view>
</view>
/* pages/todolist/todolist.wxss */
.content{
  display: flex;
  flex-direction: row;
  align-items: center;
  widows: 100px;
  height: auto;
}
.text_list{
  border-bottom:1px solid #000;
  height: 40px;
  width: 70%;
  line-height: 40px;
}
.delete_btn{
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  text-align: center;
  color: #FFF;
  background-color: #2e79fc !important;
  border-radius: 10px;
  height: 30px;
  line-height: 30px;
  width: 25% !important;
}

在删除按钮上创建一个事件，并且使用dataset进行自定义数据将索引值传递过去

// pages/todolist/todolist.wxml
<button class="delete_btn" bind:tap="onDelete" data-myid="{{index}}">删除</button>

处理获取到的索引值并重新处理数据

// pages/todolist/todolist.js
onDelete(event){
    let id=event.target.dataset.myid
    this.data.dataList.splice(id,1)
    this.setData({
      dataList:this.data.dataList
    })
  },

优化

数据删除完毕后给出一个提示信息，在列表最外层新增判断条件

// pages/todolist/todolist.wxml
<view wx:if="{{dataList.length>0}}">
  <view wx:for="{{dataList}}" wx:key="index" class="content">
    <text class="text_list">{{item}}</text>
    <button class="delete_btn" bind:tap="onDelete" data-myid="{{index}}">删除</button>
  </view>
</view>

同时新增一个容器用于存放内容

// pages/todolist/todolist.wxml
<view wx:else>暂无待办事项</view>

待办全部删除后会自动显示提示信息

小结

主要是为了巩固小程序语法基础知识，编写了一个简单的页面待办功能，对基础语法也有了一个更深的理解。

个人博客已上线，欢迎来访~
传送门：夜雨炊烟