小程序 第一个学习示例(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:;
- left:;
- right:;
- background-color: #fff;
- z-index:;
- }
- .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:;
- }
- .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:;
- }
- .inner.txt {
- width: 100%;
- z-index:;
- 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:;
- right:;
- background-color: red;
- }
- .inner.finish {
- width: 80px;
- text-align: center;
- z-index:;
- right: 60px;
- background-color: green;
- }
小程序 第一个学习示例(TodoList)的更多相关文章
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- 微信小程序开发:学习笔记[5]——JavaScript脚本
微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...
- 微信小程序开发:学习笔记[2]——WXML模板
微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...
- 微信小程序开发:学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]——本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- 微信小程序开发入门学习(1):石头剪刀布小游戏
从今天起开始捣鼓小程序了2018-12-17 10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局 程序达到的效果 猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...
- 微信小程序开发:学习笔记[7]——理解小程序的宿主环境
微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器
- 微信小程序开发:学习笔记[3]——WXSS样式
微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...
- 微信小程序开发:学习笔记[1]——Hello World
微信小程序开发:学习笔记[1]——Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/ ...
随机推荐
- 几种c++字符串split 函数实现的比较
文中的字符串split函数功能是 从字符串中按照特定的分隔符进行分割,分割的结果保存到std::vector中. 1. strtok实现 std::vector<std::string> ...
- OpenStack-Neutron(5)
一. Neutron 概述 SDN(software-defined networking)软件定义网络,其所具有的灵活性和自动化优势使其成为云时代网络管理的主流. Neutron的设计目标是实现“网 ...
- deepin配置Oracle JDK
这里记录一下入手deepin后,安装JDK的过程,和之前的CentOS有些不同 本篇参考了两篇博客 1 2 第一篇有些问题,在第二篇中找到了解决方案 接下来是操作过程: 检查本机自带的OpenJDK, ...
- Djangon的坑
<a href="/del_student/?pk={{ students.pk }}"></a> 在django中当你写入这样的语句是,pk={{ stu ...
- Java执行jar总结
1.命令集 1)nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg … ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 ...
- Swift 之Carthage
1. 安装 $ brew update //更新brew $ brew install carthage //下载carthage $ carthage version ...
- Django------多表操作
一. 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的 ...
- centos2.6.18升级到2.6.39
本来想升级到最新版本4.6的,但是不成功,即使3.4也不成功,暂且先升级到2.x最新版本. 步骤如下: 一 下载源码 https://www.kernel.org/pub/linux/kernel/ ...
- Matlab 中movie函数的使用
MATLAB中,创建电影动画的过程分为以下四步: step1:调用moviein函数对内存进行初始化(该步骤在Matlab5.3以上均可省略),创建一个足够大的矩阵,使之能够容纳基于当前坐标轴大小的一 ...
- 扩展CRT +扩展LUCAS
再次感谢zyf2000超强的讲解. 扩展CRT其实就是爆推式子,然后一路合并,只是最后一个式子上我有点小疑惑,但整体还算好理解. #include<iostream> #include&l ...