前端学习(1732):前端系列javascript之状态切换

index.vue

<template><view class="content"><view v-if="list.length!==0" class="todo-header"><view class="todo-header_left"><text class="active-text">全部</text><text>10条</text></view><view class="todo-header_right"><view class="todo-header_right_item active_tab">全部</view><view class="todo-header_right_item">待办</view><view class="todo-header_right_item">已完成</view></view></view><view v-if="list.length===0"><view class="image-default"><image src="../../static/default.png" mode="aspectFit"></image></view><view class="default-info"><view>你还没有创建任何代办事项</view><view>点击下列+号创建一个吧</view></view></view><view v-else class="todo-content"><view class="todo-list " :class="{todo_finish:item.checked}" v-for="(item,index) in list" :key="index" @click="finish(item.id)"><view class="todo-list_checkbox"><view class="checkbox"></view></view><view class="todo-list_content">{{item.content}}</view></view></view><!-- 创建按钮 --><view class="create_todo" @click="create"><text class="iconfont icon-jia"></text></view><!-- 输入按钮 --><view v-if="active" class="create-content"><view class="create-content-box"><view class="create-input"><input type="text" v-model="value" placeholder="请输入您要创建的todo"/></view><view class="create_button" @click="add">创建</view></view></view></view>
</template><script>export default {data() {return {value:'',list:[],active:false}},onLoad() {},methods: {//打开输入框create(){this.active=true;},add(){console.log(this.value);if(this.value===''){uni.showToast({title:"请输入内容",icon:'none'})}this.list.unshift({id:'id'+new Date().getTime(),content:this.value,checked:false})this.value='',this.active=false},finish(id){let index=this.list.findIndex((item)=>item.id===id)console.log('我被点击了',this.list[index]);this.list[index].checked=!this.list[index].checked;}}}
</script><style>@import '../../common/icon.css';
.todo-header{display: flex;align-items: center;padding: 0 15px;font-size: 12px;height: 45px;box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.1) ;background: #FFFFFF;
}
.todo-header_left{width: 100%;
}
.active-text{font-size: 14px;color: #279def;padding-right: 10px;
}
.todo-header_right{flex-shrink: 0;display: flex;
}
.todo-header_right_item{padding: 0 5px;
}
.active_tab{color: #279def;
}
.todo-content{position: relative;
}
.todo-list{position: relative;display: flex;align-items: center;padding: 15px;margin: 15px;color: #0c3854;font-size: 14px;border-radius: 10px;background: #cfebfd;box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.1) ,-1px 2px 1px 0 rgba(255,255,255) inset;overflow: hidden;
}
.todo-list:after{position: absolute;content: '';top:0;left: 0;bottom:0;width: 5px;background: #91d1e8;
}
.todo-list_checkbox{padding-right: 15px;
}
.checkbox{width: 20px;height: 20px;border-radius: 50%;background: #FFFFFF;box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);}
.todo_finish .checkbox{position: relative;background: #eee;
}
.todo_finish .checkbox:after{content: '';position: absolute;width: 10px;height: 10px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;border-radius: 50%;background: #CFEBFD;box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;
}
.todo_finish .todo-list_content {color: #999999;
}.todo_finish.todo-list:before{content: '';position: absolute;top: 0;bottom: 0;left: 40px;right: 10px;height: 2px;margin: auto 0;background: #bdcdd8;}.todo_finish .todo-list_content:after{background: #cccccc;}.create_todo{display: flex;justify-content: center;align-items: center;position: fixed;bottom: 20px;left: 0;right: 0;margin: 0 auto;width: 50px;height: 50px;border-radius: 50%;background-color: #deeff5;box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;}.icon-jia {font-size: 30px;color: #add8e6;}.create-content{position: fixed;bottom: 95px;left: 20px;right: 20px;}.create-content-box{display: flex;align-items: center; padding:0 15px;padding-right: 0;border-radius: 50px;background: #DEEFF5;ox-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1);}.create-input{/* width: 100%;padding-right: 15px; */width: 100%;padding-right: 15px;color: #add8e6;}.create_button{display: flex;justify-content: center;align-items: center;flex-shrink: 0;width: 80px;height: 50px;border-radius: 50px;font-size: 16px;color: #88d4ec;box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.1);}.create-content:after{content: '';position: absolute;right: 0;left: 0;bottom: -8px;margin: 0 auto;width: 20px;height: 20px;background: #DEEFF5;transform: rotate(45deg);box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);z-index: -1;}.create-content-box::after{content: '';position: absolute;right: 0;left: 0;bottom: -8px;margin: 0 auto;width: 20px;height: 20px;background: #DEEFF5;transform: rotate(45deg);}.image-default {display: flex;justify-content: center;}.image-default image {width: 100%;}.default-info {text-align: center;font-size: 14px;color: #CCCCCC;}</style>

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/419091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记一次若依ruoyi-ui(Vue2) 关闭tab页并打开新页面

网上教程很多&#xff0c;但是都是给前端代码段&#xff0c;都不知道怎么使用&#xff08;本人菜鸟一个&#xff09;&#xff0c;今天记一次完整的&#xff1a; 在你需要关闭的tab页面&#xff0c;加入以下代码&#xff1a; handleCommit()是我需要关闭页面的方法&#xff0c…

log4j自定义配置文件(SpringMVC项目)

问题来源 本周在实际项目中发现无法自定义的log4j-dev配置的error日志级别文件无法生效&#xff0c;项目启动后仍然采用默认的info级别日志进行打印。之所以自定义名称&#xff0c;是为了减少隔离不同环境的日志级别&#xff0c;比如开发dev环境使用debug、info级别&#xff0…

23 | 二叉树基础(上):什么样的二叉树适合用数组来存储?

思考题 二叉树有哪几种存储方式&#xff1f;什么样的二叉树适合用数组来存储&#xff1f; 树&#xff08;Tree&#xff09; 根节点&#xff1a;没有父节点的节点叶子节点或者叶节点&#xff1a;没有子节点的节点叫做 树的高度、深度、层&#xff1a; 举例说明&#xff1a; 生…

HBase 手动 flush 机制梳理

对应 HBase 版本0.94.1&#xff0c;对照了开源的版本和工作使用的某发行版 问题&#xff1a;在 HBase shell 里面输入 flush table_or_region_name之后&#xff0c;发生了什么&#xff1f;具体的实现是怎么样的&#xff1f;对于现有的某个表&#xff0c;我如何在做操作之前估算…

从0到1搞一波dubbo

1、为什么需要dubbo&#xff1f;&#xff08;为了解决什么问题&#xff1f;&#xff09; 架构演变 1 单一应用架构 2 应用和数据库单独部署 3 应用和数据库集群部署 4 数据库压力变大&#xff0c;读写分离 5 使用缓存技术加快速度 6 数据库分库分表 7 应用分为不同的类型拆分 …

前端学习(1734):前端系列javascript之添加动画

<template><view class"content"><!-- 状态栏 --><view v-if"list.length ! 0" class"todo-header"><!-- 状态栏的左侧 --><view class"todo-header__left"><text class"active-text&quo…

android146 360 病毒查杀

<?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:orientatio…

24 | 二叉树基础(下):有了如此高效的散列表,为什么还需要二叉树?

这节学习一种特殊的二叉树—二叉查找树。它最大的特点是支持动态数据集合的快速插入、删除、查找操作。但是散列表也是支持这些操作的&#xff0c;并且散列表的这些操作比二叉查找树更高效&#xff0c;时间复杂度是 O(1)。 问题引入 既然有高效的散列表&#xff0c;二叉树的地…

25 | 红黑树(上):为什么工程中都用红黑树这种二叉树?

问题引入 二叉查找树在频繁的动态更新过程中&#xff0c;可能会出现树的高度远大于 log2n 的情况&#xff0c;从而导致各个操作的效率下降。极端情况下&#xff0c;二叉树会退化为链表&#xff0c;时间复杂度会退化到 O(n)。要解决这个复杂度退化的问题&#xff0c;需要设计一…

Rabbitmq如何设置优先级队列?如何限流?如何重试?如何处理幂等性?

优先级队列 方式一&#xff1a;可以通过RabbitMQ管理界面配置队列的优先级属性&#xff0c;如下图的x-max-priority 方式二&#xff1a;代码设置 Map<String,Object> args new HashMap<String,Object>(); args.put("x-max-priority", 10); channel.que…

【Qt】Qt之进程间通信(Windows消息)【转】

简述 通过上一节的了解&#xff0c;我们可以看出进程通信的方式很多&#xff0c;今天分享下如何利用Windows消息机制来进行不同进程间的通信。 简述效果发送消息 自定义类型与接收窗体发送数据接收消息 设置标题重写nativeEvent效果 发送消息 自定义类型与接收窗体 包含所需库&…

启动nginx服务报错Job for nginx.service failed because the control process exited with error code.

nginx使用service nginx restart报错 启动nginx服务时如果遇到这个错误 Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xe" for details. 可能原因: 1、配…