@Author：Runsen

本次案例來(lái)源于：《uni-app 5小時(shí)快速入門》，出品人：meHaoTian

通過(guò)Huilder X.創(chuàng)建Todo項(xiàng)目。

這里manifest.json需要設(shè)置設(shè)置APPID，不然跑微信小程序會(huì)報(bào)Cannot read property 'forceUpdate' of undefined。

下面的index.vue代碼來(lái)源：《uni-app 5小時(shí)快速入門》，出品人：meHaoTian

我覺(jué)得這里的CSS比較難懂。

<template><view class="content"><!-- 狀態(tài)欄 --><view v-if="list.length !== 0" class="todo-header"><!-- 狀態(tài)欄的左側(cè) --><view class="todo-header__left"><text class="active-text">{{text}}</text><text>{{listData.length}}條</text></view><!-- 狀態(tài)欄的右側(cè) --><view class="todo-header__right"><view class="todo-header__right-item" :class="{'active-tab':activeIndex === 0}" @click="tab(0)">全部</view><view class="todo-header__right-item" :class="{'active-tab':activeIndex === 1}" @click="tab(1)">待辦</view><view class="todo-header__right-item" :class="{'active-tab':activeIndex === 2}" @click="tab(2)">已完成</view></view></view><!-- 沒(méi)有數(shù)據(jù)的狀態(tài) --><view v-if="list.length === 0" class="default"><view class="image-default"><image src="../../static/default.png" mode="aspectFit"></image></view><view class="default-info"><view class="default-info__text">您還沒(méi)有創(chuàng)建任何待辦事項(xiàng)</view><view class="default-info__text">點(diǎn)擊下方+號(hào)創(chuàng)建一個(gè)吧</view></view></view><!-- 內(nèi)容 --><view v-else class="todo-content"><!-- todo--finish --><view class="todo-list" :class="{'todo--finish':item.checked}" v-for="(item,index) in listData" :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><!-- 創(chuàng)建按鈕 --><view class="create-todo" @click="create"><text class="iconfont icon-jia" :class="{'create-todo-active':textShow}"></text></view><!-- 輸入框 --><view v-if="active" class="create-content" :class="{'create--show':textShow}"><view class="create-content-box"><!-- input 輸入 --><view class="create-input"><input type="text" v-model="value" placeholder="請(qǐng)輸入您要?jiǎng)?chuàng)建的todo" /></view><!-- 發(fā)布按鈕 --><view class="create-button" @click="add">創(chuàng)建</view></view></view></view> </template><script>export default {data() {return {value: '',list: [],active: false,activeIndex: 0,text: '全部',textShow: false}},onLoad() {},computed: {listData() {let list = JSON.parse(JSON.stringify(this.list))let newList = []// 點(diǎn)擊 全部if (this.activeIndex === 0) {this.text = '全部'return list}// 點(diǎn)擊 待辦事項(xiàng)if (this.activeIndex === 1) {// checked = falselist.forEach((item) => {if (!item.checked) {newList.push(item)}})this.text = '待辦'return newList}// 點(diǎn)擊 已完成if (this.activeIndex === 2) {// checked = turelist.forEach((item) => {if (item.checked) {newList.push(item)}})this.text = '已完成'return newList}return []},},methods: {// 打開(kāi)輸入框create() {if (this.active) {this.close()} else {this.open()}},// 打開(kāi) 動(dòng)畫open() {this.active = truethis.$nextTick(() => {setTimeout(() => {this.textShow = true}, 50)})},// 關(guān)閉動(dòng)畫close() {this.textShow = falsethis.$nextTick(()=>{setTimeout(() => {this.active = false}, 350)})},// 發(fā)布add() {console.log(this.value);if (this.value === '') {uni.showToast({title: "請(qǐng)輸入內(nèi)容",icon: 'none'})return}this.list.unshift({id: 'id' + new Date().getTime(),content: this.value,checked: false})this.value = ''this.close()},// 點(diǎn)擊列表觸發(fā)finish(id) {let index = this.list.findIndex((item) => item.id === id)console.log('我被點(diǎn)擊了', this.list[index]);this.list[index].checked = !this.list[index].checked},tab(index) {this.activeIndex = index}}} </script><style>@import '../../common/icon.css';.todo-header {position: fixed;top: 0;left: 0;display: flex;align-items: center;padding: 0 15px;font-size: 12px;color: #333333;width: 100%;height: 45px;box-sizing: border-box;box-shadow: -1px 1px 5px 0 rgba(0, 0, 0, 0.1);background: #FFFFFF;z-index: 10;}.todo-header__left {width: 100%;}.active-text {font-size: 14px;color: #279abf;padding-right: 10px;}.todo-header__right {flex-shrink: 0;display: flex;}.todo-header__right-item {padding: 0 5px;}.active-tab {color: #279abf;}.todo-content {position: relative;padding-top: 50px;padding-bottom: 100px;}.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 1px 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;bottom: 0;left: 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: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;transition: all 0.3s;opacity: 0;transform: scale(0) translateY(200%)}.create--show {opacity: 1;transform: scale(1) translateY(0);}.create-content-box {display: flex;align-items: center;padding: 0 15px;padding-right: 0;border-radius: 50px;background: #DEEFF5;box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;z-index: 2;}.create-input {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);}.default {padding-top: 100px;}.image-default {display: flex;justify-content: center;}.image-default image {width: 100%;}.default-info {text-align: center;font-size: 14px;color: #CCCCCC;}.icon-jia {transition: transform 0.3s;}.create-todo-active {transform: rotate(135deg);} </style>

icon.css具體代碼來(lái)源阿里巴巴圖標(biāo)

@font-face {font-family: "iconfont";src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKgAAsAAAAABlQAAAJWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApgcAE2AiQDCAsGAAQgBYRtBy0bkwUR1Ys9sp8F7t4Vgmka4b8eN5udEqE7RERCJOj7Ih6+9ns9d3eDqBDVTzyzjFCZqNjoFFQryYgKA2RbYdCWZfU7OvexSryBPOhKo3AgFSI/3VDzaG5I+0VCuUScRSpetU7v3ye3wxqtwxhwgdGuC028T9w7/SugQOYDynEvWmPQAOrigALaG6PIiiTyhrELXMJjAs2GLIiNQ92gRoW1KhDXZm5RY86rKCzRKNTXHCzisTqN6WH6iEfh9+OPWigkdZlVcpJkQCvvs1Myr34ufYKPgI7XIWMBhbiojR7JgrGz5mgxxr4Kgx99VeVbxF6Ngv11Vn4rGICiexK7kltNJLgtUZ/e4VEbiIFbgzx5eb5eNryJx6e35edvrgeSCe7jt3/aF53i1lylO4NawC7LkeyXFlkB1fKfI4HgXdv+Lzri/41RAZ8nPzR0Vyuon53GfdmCfyLu2VV0qWVORRXXDiYD52po1owKdnb7PrblBpKhUd8Ie4PBFFmjCbKwFlCnxRLqNVpGs3nbx1v0uJFFacKcO4DQ6QWSdm+QdfpEFtY31On3D/U6g8IUHrG6MLIOI7aEFWML9RdM03fSsbKICi+onr6irDTkPJAmE4AsTouJI3ZIc2yZXipnliCpD3AAz6H3PQzUW2w41szDJklk3Zvipg8zYYugCkMtUPsCRqPXkf5wJkqfv0DKk1ehlo6a8AMiEzM+yMTSHuRR1fXquJdXJi9KjjEJSKQXgAOYhzyvB4b6eRZqsJgeER5sJHY/2VcVr68JX3cEmln6FHZFtrwy1WwG') format('woff2'); /* iOS 4.1- */ }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-jia:before {content: "\e715"; }

具體的實(shí)現(xiàn)效果如下

對(duì)于uniapp，我還是初學(xué)的狀態(tài)。

總結(jié)

以上是生活随笔為你收集整理的五十五、uniapp简单实现Todo项目（慕课网）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。