上节详细描述了小程序环境搭建，承诺了这节讲todolist，我猜大家都是学习过 vue 或者 react 之后才学习小程序的，对于todolist 的逻辑问题我暂不做详细描述，如果遇到些许问题，请及时留言或评论在下方，本人常在。
上面是todolist 的效果图，功能介绍：
单击添加按钮新建任务清单，添加任务附带当前时间，左滑可以对任务清单进行操作，已完成任务不可以转换未完成 ，每次操作后自动刷新页面，更新任务清单。
在index.wxml 中可以把我的公众号注释，祝大家学业有成，日进斗金。
大家按照我昨天的教程把微信开发者工具安装好以后，双击打开，点击新建项目，如图所示：
这里的 AppID 在你创建小程序账号时就自动注册了，如果你没有注册小程序账号
之后我们在这里获取 AppID
填入之后，进入到开发页面，我们操作的文档主要是 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 节点，存放小程序标签：
<!--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 = [];//创造数据
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.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.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 我们没有用到，这里不做细讲。如果你的任务清单遇到了一些难题，不妨评论在下方或私信我解决，前端的学习从不缺乏乐趣，但需要持之以恒才能有所收获，“不积跬步无以至千里”，加油！
推荐阅读：小程序怎么学？
来源：oschina
链接：https://my.oschina.net/u/4284510/blog/4680710