微信小程序TodoList如何使用

这篇文章主要介绍“微信小程序TodoList如何使用”，在日常操作中，相信很多人在微信小程序TodoList如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序TodoList如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
之前都用JQ、Backbone、vue简单撸过，大概功能如下：添加todo
储存在应用缓存
列表展示
区分状态显示：全部、未完成、已完成
改变todo状态
删除todo

下载小程序开发工具：开发者工具下载
安装完成后，使用微信扫一扫登录，选好文件夹后创建即可，开发工具会自动生成以下目录：
pages/
app.js
app.json
app.wxss
由于平时开发习惯用Less，如果在直接使用小程序的wxss来编写的话，就恢复原生编写方式，大大的不便，所以直接使用了gulp来实时编译Less，和修改文件名为wxss。小程序开发工具是不支持Less，直接用vscode来开发，小程序开发工具是用实时预览和调试即可，vscode也有丰富的插件支待小程序语法提示。
UI组件也直接引用了小程序支持的weui-wxss
在app.json定义好小程序页面路由和配色：
页面文件都存放在pages/目录下，每个功能页面都会创建一个文件夹，TodoList现只需一个页面完成即免费云主机域名可
数据绑定使用 Mustache 语法（双大括号）将变量包起来添加todo
使用字段addShow来判断添加输入层显示隐藏即可
input输出框这里不是双向绑定，所以这里添加一个事件bindinput="setInput"来赋值实时变化
实时赋值事件处理
取消时，需要清空input的值，input里需要绑定value="{{addText}}"
添加todo列表部分
scroll-view内滚动
列表渲染，事件触发，利用data传参，bind绑定事件滑动删除
效果：当向左滑动时，content跟随手指像左移动，同时右侧出现del按钮;当滑动距离大于按钮宽度一半松开手指时自动滑动到左侧显示出按钮，小于一半时自动回到原来的位置，隐藏按钮。
实现思路：content和del按钮分别是绝对定位，利用z-index层来控制让content来盖住del，当content向左滑动时，del按钮就会露出来。
微信小程序api提供的touch对象和3个有关手指触摸的函数（touchstart，touchmove，touchend）来实现content随手指移动
列表的content已绑定这个三个事件：bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE"
实现方法：
注意txtStyle，在content在绑定这个属性的，实现跟随手指移动的delBtnWidth为了del按钮的宽度，这里以rpx为单位到此，关于“微信小程序TodoList如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: CSS怎么禁止Chrome浏览器激活输入框后自动添加橘黄色边框

这篇文章主要讲解了“CSS怎么禁止Chrome浏览器激活输入框后自动添加橘黄色边框”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么禁止Chrome浏览器激活输入框后自动添加橘黄色边框”吧！ Chrome…