? 上節(jié)詳細描述了小程序環(huán)境搭建，承諾了這節(jié)講todolist，我猜大家都是學習過 vue 或者 react 之后才學習小程序的，對于todolist 的邏輯問題我暫不做詳細描述，如果遇到些許問題，請及時留言或評論在下方，本人常在。

---

? 上面是todolist 的效果圖，功能介紹：
? 單擊添加按鈕新建任務清單，添加任務附帶當前時間，左滑可以對任務清單進行操作，已完成任務不可以轉換未完成 ，每次操作后自動刷新頁面，更新任務清單。
? 在index.wxml 中可以把我的公眾號注釋，祝大家學業(yè)有成，日進斗金。

? 大家按照我昨天的教程把微信開發(fā)者工具安裝好以后，雙擊打開，點擊新建項目，如圖所示：

---

?這里的 AppID 在你創(chuàng)建小程序賬號時就自動注冊了，如果你沒有注冊小程序賬號

“ 請點擊這里 ”

? 之后我們在這里獲取 AppID

---

? 填入之后，進入到開發(fā)頁面，我們操作的文檔主要是 index 文件，我們還要在 pages 目錄下新建文件夾 wxs ，在 wxs 中新建文件 subString.wxs ，這里存放我們的腳本語言，負責任務清單的寫入和溢出省略，我們在 index.wxml 中引入它。整理好的文件目錄如圖所示：

---

subString.wxs中寫入以下腳本： var sub =function(val) {if (val == undefined || val.length == 0) {return;}if (val.length > 10) {return val.substring(0, 10) + "..."} else {return val;} }module.exports={sub:sub }

index.wxml 負責渲染 dom 節(jié)點，存放小程序標簽：

<!--index.wxml--> <wxs src="./../wxs/subString.wxs" module="tools"/> <view class="container"><view class="userinfo"><view class="addDiv {{addShow?'':'hide'}}"><view class="addDivContent"><input bindinput='bindAddText' placeholder="請輸入內容" focus="{{inputFocus}}" value="{{addText}}" class="addDivInput" /><view class="addDivButton"><button class="addDivButtonMargin" bindtap="addTodo" type="primary" size="mini">確定添加</button><button bindtap="cancelTodo" type="default" size="mini">取消</button></view></view></view><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button><block wx:else><image style="width:240rpx;height:240rpx" src="https://img-blog.csdnimg.cn/20200926230056268.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgyMDQ0NA==,size_16,color_FFFFFF,t_70#pic_center"></image></block><view class="listDivTop"><view class="listDivType"><view class="{{(todoTabId=='tab1'?'listDivTypeSelected':'')}}" data-id="tab1" bindtap="onChangeSelect">全部</view><view class="{{(todoTabId=='tab2'?'listDivTypeSelected':'')}}" data-id="tab2" bindtap="onChangeSelect">已完成</view><view class="{{(todoTabId=='tab3'?'listDivTypeSelected':'')}}" data-id="tab3" bindtap="onChangeSelect">未完成</view></view><view><button type="primary" size="mini" bindtap="addDivShow">添加</button></view></view><view class="listDivContent"><view class="items"><view wx:for="{{todoDtBind}}" wx:key="{{index}}" class="listDivItem"><view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" data-state="{{item.state}}" data-index="{{index}}" style="{{item.txtStyle}}" class="inner txt"><view class="listDivRow"><view>{{index+1}}.{{tools.sub(item.content)}}</view><view class="itemTime">{{item.addTime}}</view></view></view><view wx:if="{{item.state==2}}" data-index="{{index}}" bindtap="finishItem" class="inner finish">標記完成</view><view data-index="{{index}}" bindtap="delItem" class="inner del">刪除</view></view></view></view></view> </view>

index.js 負責處理頁面邏輯：

//index.js //獲取應用實例 const app = getApp()Page({data: {addShow: false, //添加輸入面板是否顯示inputFocus: false,//是否選中addText: '',//新增內容todoTabId: 'tab1',//tab選中totalCount: 9,//總數據pageSize: 15,//顯示行數pageNum: 2,//頁碼todoDtBind: [],//綁定的數據集合todoList: [],//數據集合(所有的)delBtnWidth: 60, //刪除按鈕寬度finishBtnWidth: 80, //刪除按鈕寬度startX: "", //觸摸開始滑動的位置userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo')},//事件處理函數bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onShow: function() {this.setData({pageNum: 1})this.getBindDtInfo("正在加載中");this.setBindDtInfo(this.data.todoTabId);},/*** 獲取綁定數據* @param msg:加載信息*/getBindDtInfo: function(msg) {wx.showLoading({title: msg,})setTimeout(function() {wx.hideLoading()}, 2000)var vNum = this.data.pageNum;var count = vNum * this.data.pageSize;//頁碼乘以行數得到的理論條數var showCount = 0;//顯示條數if (count <= this.data.totalCount) {showCount = count;} else {showCount = this.data.totalCount;vNum = vNum - 1;}let objItem = {};let dtInfo = [];//創(chuàng)造數據for (var i = 0; i < showCount; i++) {objItem = {id: i + 1,content: '課程目錄' + (i + 1).toString(),addTime: this.getStrDate(Date.parse(new Date()) / 1000),state: (i < 6) ? 2 : 1,//前6行顯示為未完成txtStyle: ''}dtInfo.push(objItem)}this.setData({todoList: dtInfo,pageNum: vNum});},/*** 頁面上拉觸底事件*/onReachBottom: function() {if (this.data.todoList.length <= this.data.totalCount) {let vNum = this.data.pageNum + 1;this.setData({pageNum: vNum})// this.getBindDtInfo("正在加載中");this.setBindDtInfo(this.data.todoTabId);} else {wx.showToast({title: '沒有更多數據',icon: 'none',duration: 2000})}},/*** 通過時間戳獲取時間表達式*/getStrDate: function(vTime) {var res = /^\d+$/;if (!res.test(vTime)) {return vTime;}var date = new Date(vTime * 1000);var Y = date.getFullYear(); //年var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); //月var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); //日var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(); //時var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); //分var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); //秒var strDate = Y + "/" + M + "/" + D + " " + h + ":" + m + ":" + s;return strDate;},/*** 添加按鈕事件*/addDivShow: function() {this.setData({addShow: true,inputFocus: true});},//輸入內容綁定至數據bindAddText: function(e) {this.setData({addText: e.detail.value})},//確定新增按鈕事件addTodo: function() {var content = this.data.addText;if (content.trim() == "") {wx.showToast({title: '添加的內容信息不能為空!',icon: 'none',duration: 2000})return;}var dtInfo = this.data.todoList;var objAdd = {id: dtInfo.length + 1,content: content,addTime: this.getStrDate(Date.parse(new Date()) / 1000),state: 2,txtStyle: ''}dtInfo.unshift(objAdd);var count = this.data.totalCount + 1;this.setData({todoList: dtInfo,totalCount: count,addShow: false,inputFocus: false,addText: ''});this.setBindDtInfo(this.data.todoTabId)},//取消按鈕事件cancelTodo: function() {this.setData({addShow: false,inputFocus: false,addText: ''});},//設置綁定數據集合setBindDtInfo: function(vTabId) {var dtInfo = [];if (vTabId == "tab1") {dtInfo = this.data.todoList;} else if (vTabId == "tab2") {for (var i = 0; i < this.data.todoList.length; i++) {if (this.data.todoList[i].state == 1) {dtInfo.push(this.data.todoList[i]);}}} else {for (var i = 0; i < this.data.todoList.length; i++) {if (this.data.todoList[i].state == 2) {dtInfo.push(this.data.todoList[i]);}}}this.setData({todoDtBind: dtInfo,todoTabId: vTabId});},/*** 類型選中事件(全部,已完成,未完成)*/onChangeSelect: function(e) {var dtInfo = this.data.todoList;dtInfo.forEach(function(item) {item.txtStyle = "";})var self = this;var id = e.currentTarget.dataset.id;this.setBindDtInfo(id);},// 滑動開始touchStart: function(e) {var dtInfo = this.data.todoDtBind;dtInfo.forEach(function(item) {item.txtStyle = "";})if (e.touches.length == 1) {this.setData({//設置觸摸起始點水平方向位置startX: e.touches[0].clientX,todoDtBind: dtInfo});}},//滑動touchMove: function(e) {if (e.touches.length == 1) {//移動時水平方向位置var moveX = e.touches[0].clientX;var dValueX = this.data.startX - moveX; //差值:手指點擊開始的X坐標位置減去移動的水平位置坐標var operBtnWidth = this.data.delBtnWidth;var state = e.currentTarget.dataset.state;if (state == 2) {operBtnWidth = this.data.delBtnWidth + this.data.finishBtnWidth;}var txtStyle = "";//沒有移動或者向右滑動不進行處理if (dValueX == 0 || dValueX < 0) {txtStyle = "left:0px";} else {txtStyle = "left:-" + dValueX + "px";}if (dValueX >= operBtnWidth) {//文本移動的最大距離txtStyle = "left:-" + operBtnWidth + "px";}var index = e.currentTarget.dataset.index;var dtInfo = this.data.todoDtBind;dtInfo[index].txtStyle = txtStyle;this.setData({todoDtBind: dtInfo})}},//滑動結束touchEnd: function(e) {if (e.changedTouches.length == 1) {var endX = e.changedTouches[0].clientX;var dValueX = this.data.startX - endX;var operBtnWidth = this.data.delBtnWidth;var state = e.currentTarget.dataset.state;if (state == 2) {operBtnWidth = this.data.delBtnWidth + this.data.finishBtnWidth;}var txtStyle = ""if (dValueX > operBtnWidth / 2) {txtStyle = "left:-" + operBtnWidth + "px";} else {txtStyle = "left:0px"}var index = e.currentTarget.dataset.index;var dtInfo = this.data.todoDtBind;dtInfo[index].txtStyle = txtStyle;this.setData({todoDtBind: dtInfo})}},//標記完成finishItem: function(e) {var index = e.currentTarget.dataset.index;var dtInfo = this.data.todoDtBind;dtInfo[index].state = 1;dtInfo[index].txtStyle = "left:0px";this.setData({todoDtBind: dtInfo})this.setBindDtInfo(this.data.todoTabId);wx.showToast({title: '已完成成功',icon: 'success',duration: 2000})},//刪除按鈕事件delItem: function(e) {var index = e.currentTarget.dataset.index;var dtInfo = this.data.todoDtBind;var dtInfoList = this.data.todoList;var removeIndex = -1;for (var i = 0; i < dtInfoList.length; i++) {if (dtInfoList[i].id == dtInfo[index].id) {removeIndex = i;}}dtInfoList.splice(removeIndex, 1);var count = this.data.totalCount - 1;this.setData({todoList: dtInfoList,totalCount: count})this.setBindDtInfo(this.data.todoTabId);wx.showToast({title: '刪除成功',icon: 'success',duration: 2000})},onLoad: function() {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse) {// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在沒有 open-type=getUserInfo 版本的兼容處理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})} })

index.wxss 負責存放 CSS 樣式：

/**index.wxss**/.userinfo {width: 100%;display: flex;flex-direction: column;align-items: center;position: relative; }.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%; }.userinfo-nickname {color: #aaa; }.addDiv {position: absolute;top: 0;left: 0;right: 0;background-color: #fff;z-index: 999; }.addDivContent {padding: 10px; }.addDivInput {border: solid 1px gainsboro;border-radius: 6px;height: 60px;margin-bottom: 10px; }.addDivButtonMargin {margin-right: 20px; }.hide {display: none; }.listDivTop {display: flex;flex-direction: row;justify-content: space-between;padding-top: 10px;padding-bottom: 10px;width: 96%;border-bottom: 1px solid gainsboro; }.listDivType {display: flex;flex-direction: row;justify-content: space-around;width: 60%;color: #999; }.listDivTypeSelected {color: #333;font-weight: 600; }.listDivContent {width: 100%;color: #666;margin: 0 auto;padding: 40rpx 0;position: absolute;top: 150px; }.items {width: 100%; }.listDivRow {width: 98%;display: flex;flex-direction: row;justify-content: space-between; }.listDivItem {position: relative;height: 80rpx;line-height: 80rpx;overflow: hidden; }.inner {position: absolute;top: 0; }.inner.txt {width: 100%;z-index: 5;transition: left 0.2s ease-in-out;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background-color: lightcyan; }.itemTime {font-size: 12px; }.inner.del {width: 60px;text-align: center;z-index: 4;right: 0;background-color: red; }.inner.finish {width: 80px;text-align: center;z-index: 4;right: 60px;background-color: skyblue; }

? 至于 index.json 我們沒有用到，這里不做細講。如果你的任務清單遇到了一些難題，不妨評論在下方或私信我解決，前端的學習從不缺乏樂趣，但需要持之以恒才能有所收獲，“不積跬步無以至千里”，加油！

推薦閱讀：小程序怎么學？

總結

以上是生活随笔為你收集整理的小程序todolist的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。