Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use WeChat Mini Programs TodoList". In daily operation, I believe many people have doubts about how to use WeChat Mini Programs TodoList. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use WeChat Mini Programs TodoList". Next, please follow the editor to study!

I have simply played with JQ, Backbone and vue before, and the functions are as follows:

Add todo

Stored in the application cache

List display

Differentiated status display: all, incomplete, completed

Change the state of todo

Delete todo

1 Mini Program finger zoom picture development process

Download Mini Program development tools: developer tools download

After the installation is completed, use Wechat to scan the login, select a folder and create it. The development tool will automatically generate the following directory:

Pages/

App.js

App.json

App.wxss

2 basic configuration

As a result of the usual development habits with Less, if the direct use of Mini Program's wxss to write, then restore the original way of writing, great inconvenience, so directly used gulp to compile Less in real time, and modify the file name is wxss. Mini Program development tools do not support Less, directly with vscode to develop, Mini Program development tools are available with real-time preview and debugging, vscode also has rich plug-ins for Mini Program syntax tips.

/ / gulpfile.jsvar gulp = require ('gulp') var less = require (' gulp-less') var plumber = require ('gulp-plumber') var rename = require (' gulp-rename') gulp.task ('less') Function () {return gulp.src ('. / app.less') .pipe (plumber () / error handling. Pipe (less ()) / compile less .pipe (rename ((path) = > path.extname = '.wxss')) / / the generated file is modified with the suffix .wxss .pipe (gulp.dest ('. /')) }); gulp.watch ('. / app.less', ['less']); / / Real-time monitor app.less file changes and run tasks

The UI component also directly references the weui-wxss supported by Mini Program.

@ import ". / weui.wxss"

Define the routing and color matching of the Mini Program page in app.json:

{"pages": ["pages/index/index"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# ca2100", "navigationBarTitleText": "TodoList", "navigationBarTextStyle": "white"} 3 page development

The page files are stored in the pages/ directory, and a folder is created for each functional page. TodoList now needs only one page to complete.

Data binding uses Mustache syntax (double curly braces) to wrap variables

{{userInfo.nickName}} all

Add todo

Use the field addShow to determine if you add the input layer to show and hide.

The input output box is not bidirectional binding here, so add an event bindinput= "setInput" to assign real-time changes

Confirm to add and cancel

Real-time assignment event processing

SetInput: function (e) {this.setData ({addText: e.detail.value})}

When canceling, you need to clear the value of input, and bind value= "{{addText}}" to input.

Page ({data: {/ /.}, / /. AddTodoHide: function () {this.setData ({addShow: false, / / Control add input panel to hide focus: false, / / lose focus addText:'/ / clear value})} / /.})

Add todo

Page ({data: {/ /.}, / /. AddTodo: function () {/ / check whether if (! this.data.addText.trim ()) {return} var temp = this.data.lists / / take out lists var addT = {id: new Date () .getTime (), / / take the current time title: this.data.addText Status:'0'} temp.push (addT) / / add a new todo this.showCur (temp) / / the method to handle the current state this.addTodoHide () / / after the addition is successful Hide the add panel method wx.setStorage ({/ / Mini Program asynchronous cache key: "lists", data: temp}) wx.showToast ({/ / weui toast component title: 'added successfully', icon: 'success', duration: 1000}) } / /.})

List section

Scrolling within scroll-view

List rendering, event triggering, using data to pass parameters, bind binding events

No data {{item.title}} {{api.formatTime (item.id)}} deleted

Slide deletion

Effect: when sliding to the left, content follows the finger to move to the left, while a del button appears on the right; when the sliding distance is greater than half of the width of the button, the finger is released automatically to show the button on the left, and when it is less than half, it automatically returns to its original position and hides the button.

Implementation idea: content and del buttons are absolute positioning, respectively, using the z-index layer to control the content to cover the del. When the content slides to the left, the del button will be exposed.

WeChat Mini Programs api provides the touch object and three functions related to finger touch (touchstart,touchmove,touchend) to realize the content to move with the finger.

The content of the list has been bound to these three events: bindtouchstart= "touchS" bindtouchmove= "touchM" bindtouchend= "touchE"

Implementation method:

Note that txtStyle, in the content that binds this property, implements the

DelBtnWidth for the width of the del button, here in rpx

Page ({data: {/ /.}, / /. TouchS: function (e) {/ / console.log ('start:' + JSON.stringify (e)) / / whether there is only one touch point if (e.touches.length = 1) {this.setData ({/ / X coordinate of the start of the touch: e.touches [0] .clientX})}} TouchM: function (e) {/ / console.log ('move:' + JSON.stringify (e)) var _ this = this if (e.touches.length = 1) {/ / the X coordinate of the touch point var moveX = e.touches [0] .clientX / / calculates the difference between the X coordinate of the starting point of the finger and the X coordinate of the current touch point var disX = _ this.data.startX-moveX / / delBtnWidth is the width of the right button area var delBtnWidth = _ this.data.delBtnWidth var txtStyle =''if (disX = = 0 | disX

0) {/ / the moving distance is greater than 0 The text layer left value is equal to the finger movement distance txtStyle = 'left:-' + disX +' rpx' if (disX > = delBtnWidth) {/ / controls the maximum finger movement distance is the width of the delete button txtStyle = 'left:-' + delBtnWidth +' rpx'}} / / gets which item var index = e.currentTarget.dataset.index the finger touches Var list = _ this.data.curLists / / set the spliced style to the current item [index] .txtStyle = txtStyle / / update the status of the list this.setData ({curLists: list}) }, touchE: function (e) {/ / console.log ('stop:' + JSON.stringify (e)) var _ this = this if (e.changedTouches.length = 1) {/ / X coordinate of touchpoint position after finger movement ends var endX = e.changedTouches [0] .clientX / / start and end of touch The distance of finger movement var disX = _ this.data.startX-endX var delBtnWidth = _ this.data.delBtnWidth / / if the distance is less than the var txtStyle 2 of the delete button, the delete button var txtStyle = disX > delBtnWidth/2? 'left:-' + delBtnWidth +' rpx': 'left:0' / / get which item var index = e.currentTarget.dataset.index var list = _ this.data.curLists list [index] .txtStyle = txtStyle / / update the status of the list _ this.setData ({curLists: list}) }} / /.}) at this point, the study on "how to use WeChat Mini Programs TodoList" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.