小程序 第一个学习示例(TodoList)
1. 概述
1.1 说明
在微信开发者工具环境下开发一个简易的TodoList功能,以便能够进行学习与熟练小程序相关功能与信息.。
示例中,初步计划包含以下功能:
-
- 1.能够进行新增计划信息
- 2.计划信息可分为已完成与未完成两种状态信息
- 3.数据信息可列表显示
- 4.可以对列表中数据进行标记完成与删除操作
- 5.可进行分页操作(此处仅为一数据示例)
备注:目前数据未进行缓存处理,仅为数据操作展示。
1.2 图例
1.3 图例说明
1.3.1 列表
使用三个状态分别控制不同的列表信息,点击不同的状态加载不同的数据:
-
- 全部 -- 所有的数据信息都加载至此状态对应列表
- 已完成 -- 所有已完成状态的数据信息列表
- 未完成 -- 所有未完成状态的数据信息列表
1.3.2 新增
点击列表上的添加按钮显示出新增内容区域,新增内容有确定添加和取消两种功能:
-
- 确定添加 -- 把输入至文本框中的内容添加至列表中,状态为未完成,添加完成后关闭新增内容区域
- 取消 -- 直接关闭新增内容区域
1.3.3 滑动操作
点击到某一数据信息,向左进行滑动显示出来对应的操作按钮(删除或标记完成),使用position进行控制相关显示信息;
设计原理:内容信息与按钮在同一行显示,使用z-index控制堆叠.按钮的z-index小于内容的z-index.
-
- 未完成 -- 滑动后显示出删除按钮与标记完成按钮,此时的最大滑动宽度为删除按钮与标记按钮之和
- 已完成 -- 滑动后显示出删除按钮,此时的最大滑动宽度为删除按钮的宽度.
1.3.4 按钮操作
-
- 删除 -- 列表中删除对应的数据行
- 标记完成 -- 列表中对应行数据的状态由未完成更改为完成.
1.4 代码结构
2. 代码
码云: https://gitee.com/ajuanK/wxSimpleTodoList.git
2.1 页面设计(index.wxml)
<!--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 bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </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>
2.2 逻辑处理
2.2.1 页面逻辑处理(index.js)
//index.js //获取应用实例 const app = getApp() Page({ data: { addShow: false, //添加输入面板是否显示 inputFocus: false,//是否选中 addText: '',//新增内容 todoTabId: 'tab1',//tab选中 totalCount: 70,//总数据 pageSize: 20,//显示行数 pageNum: 1,//页码 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 }) } })
2.2.2 小程序脚本语言(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 }
2.3 样式设计(index.wxml)
/**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: green; 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: green; }