微信小程序--31(todolist案例)

一.功能

  • 输入待办事件
  • 添加代办事件
  • 删除代办事件

二、步骤

1.添加输入框

  • .wxml代码:

    复制代码
    <!-- 1.输入框 -->
    <input type="text" bindinput="handleInput" value="{{text}}" />
  • .wxss代码:

    /* 1.输入框样式 */
    input {
    border: 1rpx solid blue;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    }

  • 效果图:

2.添加按钮

  • .wxlm代码:

    复制代码
    <button size="mini" bind:tap="handleAdd">add</button>
  • .wxss代码:

    /* #将输入框和按钮放置到一行样式 */
    .box{
    display: flex;
    flex-direction: row;
    }

  • 效果图:

3.将内容按序排列输出

  • .wxml代码:

    <view wx:if="{{datalist.length>0 }}"> <view wx:for="{{datalist}}" wx:key="index" class="list"> <text>{{item}}</text> </view >
  • .js代码:

    // 3.提取出输入内容
    handleInput(evt){
    console.log("input",evt.detail.value)
    this.setData({
    text:evt.detail.value
    })
    },

    复制代码
    handleAdd(){
      console.log(this.data.text)
    
      this.setData({
        datalist:[...this.data.datalist,this.data.text],
        text:""
      })
    },
  • .wxss代码:

    /* 3.list排列 */
    .list{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    }
    .list text{
    width: 200px;
    }

  • 效果图:

4.增加删减功能

  • .wxml代码:

    <button size="mini" bind:tap="handleDelete" data-myid="{{index}}">delete</button>

    <view wx:else="">暂无代办事件</view>

  • .js代码:

    // 4.内容删除
    handleDelete(evt){
    console.log("delte",evt.target.dataset.myid)

  • 效果图:

相关推荐
hunzi_11 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙3 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_797882093 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
暮雨哀尘5 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理6 小时前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
zoahxmy092919 小时前
微信小程序 request 流式数据处理
微信小程序
人人题20 小时前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
曲江涛1 天前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_440470501 天前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云
27669582921 天前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿