微信小程序--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)

  • 效果图:

相关推荐
thinkQuadratic1 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方2 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
幽络源小助理4 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot
10年前端老司机5 小时前
微信小程序模板语法和事件
前端·javascript·微信小程序
上趣工作室6 小时前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习8 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
韩仔搭建8 小时前
美乐迪电玩大厅加载机制与 RoomList 配置结构分析
游戏·小程序·开源·lua
WKK_11 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码1 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 天前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序