微信小程序-单页面完成增、删、全选、计数、清除功能

 业务逻辑:

  • 1、添加:输入框中有数据,点击手机“完成”按钮或者“+”均可添加一条新数据
  • 2、选择:点击列表的某一项,checkbox勾选或空;
  • 3、删除:点击某一项后面的“x”,删除该项
  • 4、全选:点击“Toggle all”文字全选,再次点击,全部选
  • 5、未完成量:剩余几项未完成,取决于列表中没有打勾的项数,受影响的操作包括1、2、3、4
  • 6、清除完成:清除已完成的项,即删除打勾的项

todos.wxml

<view class="container">

    <!-- 1、search -->
    <view class="search">
        <image src="../../assets/plus.png" bindtap="addTodos"></image>
        <input type="text" 
            placeholder="Anything here..."
            bindinput="inputChangeHandle"
            bindconfirm="addTodos"
            value="{{input}}"
        ></input>
    </view>

    <!-- 2、todos -->
    <block wx:if="{{todos.length}}">
        <view class="todos">
            <view class="item {{item.completed?'active':''}}" 
                wx:for="{{todos}}" 
                wx:key="{{index}}" 
                bindtap="toggle"
                data-index="{{index}}"
            >
                <icon type="{{item.completed?'success':'circle'}}"></icon>
                <text>{{item.name}}</text>
                <icon type="clear" size="15" catchtap="remove" data-index="{{index}}"></icon>
            </view>
        </view>

        <!-- 3、options -->
        <view class="footer">
            <text bindtap="toggleAll">Toggle all</text>
            <text wx:if="{{leftCount}}">{{leftCount}} {{leftCount>1?'items':'item'}} left</text>
            <text bindtap="clear">Clear completed</text>
        </view>
    </block>

    <view wx:else>nothing</view>
</view>

todos.wxss

.container {
  border-top: 1rpx solid #e0e0e0;
  background: #fff;
}
.search{
    border: 1rpx solid #e0e0e0;
    border-radius: 5rpx;
    box-shadow: 0 0 5rpx #e0e0e0;
    margin: 20rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
}
.search image{
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
}
.todos{
    border: 1rpx solid #e0e0e0;
    border-radius: 5rpx;
    box-shadow: 0 0 5rpx #e0e0e0;
    margin: 20rpx;
}
.todos .item{
    padding: 20rpx;
    border-bottom:  1rpx solid #e0e0e0;
    display: flex;
    align-items: center;
}
.todos .item:last-child{
    border-bottom:0;
}
.todos .item text{
    flex:1;
    margin-left: 20rpx;
}
.todos .item.active text{
   text-decoration: line-through;
   color: #ccc;
}
.footer{
    margin: 20rpx;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
}

todos.js

Page({
  data: {
    input: '',    // 文本框的数据模型
    todos: [{
        name: 'Learning VUE',
        completed: false
      },
      {
        name: 'Learning JS',
        completed: true
      },
      {
        name: 'Learning HTML',
        completed: true
      }
    ],
    leftCount: 0,//未完成数
    allCompleted: false //全选标志
  },
  // 0 加载时判断一下allCompleted的值,并重置leftCount
  onLoad() {
    let items=this.data.todos.filter((item)=>{
      return !item.completed
    })
    let allCompleted = items.length > 0 ? false : true
    let leftCount = items.length
    this.setData({
      allCompleted: allCompleted,
      leftCount: leftCount
    })
  },
  // 1 input值绑定
  inputChangeHandle: function(e) {
    this.setData({
      input: e.detail.value
    })
  },
  // 2. 按钮点击时执行一段代码
  addTodoHandle: function() {
    if (!this.data.input) return
    let item = {
      name: this.data.input,
      completed: false
    }
    let leftCount = this.data.leftCount + 1
    this.data.todos.push(item)
    this.setData({
      todos: this.data.todos,
      input: '',
      leftCount: leftCount
    })
  },
  // 3 删除
  removeTodoHandle(e) {
    let index = e.currentTarget.dataset.index
    let delitem = this.data.todos.splice(index, 1)[0]
    let leftCount = this.data.leftCount + (delitem.completed ? 0 : -1)
    this.setData({
      todos: this.data.todos,
      leftCount: leftCount
    })
  },
  // 4 点击勾选与否
  toggleTodoHandle(e) {
    let index = e.currentTarget.dataset.index
    let item = this.data.todos[index]
    item.completed = !item.completed
    let leftCount = this.data.leftCount + (item.completed ? -1 : 1)
    this.setData({
      todos: this.data.todos,
      leftCount: leftCount
    })
  },
  // 5 toggle all 切换操作
  toggleAllHandle() {
    let allCompleted = !this.data.allCompleted
    let todos = this.data.todos
    todos.forEach(function(item) {
      item.completed = allCompleted
    })
    let leftCount = allCompleted ? 0 : todos.length
    this.setData({
      todos: todos,
      allCompleted: allCompleted,
      leftCount: leftCount
    })

  },
  // 6 Clear completed
  clearHandle() {
    let items = this.data.todos.filter(function(item) {
      return item.completed != true
    })
    this.setData({
      todos: items,
    })

  }
})

 

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序中实现全选功能,可以按照以下步骤进行操作: 1. 在页面的数据源中,定义一个变量来表示全选状态,例如 `selectAll`,初始值设为 `false`。 2. 在页面的渲染部分,使用一个复选框来表示全选功能,并绑定一个事件处理函数。例如: ```html <checkbox bindchange="selectAllChange" checked="{{selectAll}}">全选</checkbox> ``` 3. 在事件处理函数中,根据全选状态的变化,更新所有商品的选中状态。例如: ```javascript Page({ data: { // ... selectAll: false, // 全选状态 // ... }, selectAllChange: function (e) { const selectAll = e.detail.value; const goodsList = this.data.goodsList; // 更新所有商品的选中状态 goodsList.forEach((item) => { item.checked = selectAll; }); this.setData({ selectAll: selectAll, goodsList: goodsList, }); }, // ... }) ``` 4. 在商品列表中的每一项中,使用一个复选框来表示该商品的选中状态,并绑定一个事件处理函数。例如: ```html <view wx:for="{{goodsList}}"> <!-- ... --> <checkbox bindchange="itemChange" checked="{{item.checked}}"></checkbox> <!-- ... --> </view> ``` 5. 在商品项的事件处理函数中,更新该商品的选中状态,并检查是否需要更新全选状态。例如: ```javascript Page({ data: { // ... goodsList: [ // ... { // ... checked: false, // 商品选中状态 }, // ... ], // ... }, itemChange: function (e) { const index = e.currentTarget.dataset.index; const checked = e.detail.value; const goodsList = this.data.goodsList; // 更新该商品的选中状态 goodsList[index].checked = checked; // 检查是否需要更新全选状态 const selectAll = goodsList.every((item) => item.checked); this.setData({ selectAll: selectAll, goodsList: goodsList, }); }, // ... }) ``` 通过以上步骤,你可以在微信小程序中实现商品全选功能。当用户点击全选复选框时,所有商品的选中状态都会更新;当用户点击某个商品的复选框时,该商品的选中状态会更新,并检查是否需要更新全选状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值