锐客网

  1. 首页 > 睿知 > >

微信小程序新手教程快速了解开发( 二 )

睿知


toggleTodo: function( e ) {
var id = this.getTodoId( e, &＃39;todo-item-chk-&＃39; );
var value = https://www.rkxy.com.cn/dnjc/e.detail.value[ 0 ];
var complete = !!value;
var todo = this.getTodo( id );
todo.complete = complete;
this.updateData( true );
this.updateStorage();
},
以上代码中，通过e.detail.value[0]拿到单个todo项里面checkbox的值，通过该值来判断todo的complete状态 。最后在updateData的内部，还会通过setData方法，刷新model的内容 。只有这样，在toggle操作之后，app底部的统计信息才会更新 。
5.事件绑定的时候，无法传递参数，只能传递一个event 。比如上面那个toggle的操作，我其实很想在回调里面把当前todo的id传到这个回调里面，但是想尽办法都做不到，最后只能通过id的方式来处理：就是在wxml中绑定事件的组件上面，加一个id，这个id全page也不能重复，所以id得加前缀，然后在id最后加上todo的id值;当事件触发的时候，通过e.currentTarget.id就能拿到该组件的id，去掉相应的id前缀，就得到todo的id值了 。这是目前用到的一个方法，我认为不是很优雅，希望后面能发现更好的办法来实现 。

微信小程序新手教程快速了解开发

文章插图
6.app中考虑到了loading的效果，要利用button组件的loading属性来实现 。但是loading仅仅是一个样式的控制，它不会控制这个按钮是否能重复点击 。所以还要利用buttong的disabled属性，防止重复点击 。
剩下的实现细节，都在下面两个文件的源码中，欢迎大家指出其中的问题 。
index.wxml的源码：
Add
{{todo.text}}
Clear
{{todosOfUncomplted.length}} left.
Clear {{todosOfComplted.length}} of done.
{{loadingText}}
{{toastText}}
index.js的源码：
var app = getApp();
Page( {
data: {
todos: [],
todosOfUncomplted: [],
todosOfComplted: [],
newTodoText: &＃39;&＃39;,
addOneLoading: false,
loadingHidden: true,
loadingText: &＃39;&＃39;,
toastHidden: true,
toastText: &＃39;&＃39;,
clearAllLoading: false
},
updateData: function( resetTodos ) {
var data = https://www.rkxy.com.cn/dnjc/{};
if( resetTodos ) {
data.todos = this.data.todos;
}
data.todosOfUncomplted = this.data.todos.filter( function( t ) {
return !t.complete;
});
data.todosOfComplted = this.data.todos.filter( function( t ) {
return t.complete;
});
this.setData( data );
},
updateStorage: function() {
var storage = [];
this.data.todos.forEach( function( t ) {
storage.push( {
id: t.id,
text: t.text,
complete: t.complete
})
});
wx.setStorageSync( &＃39;todos&＃39;, storage );
},
onLoad: function() {
this.setData( {
todos: wx.getStorageSync( &＃39;todos&＃39; ) || []
});
this.updateData( false );
},
getTodo: function( id ) {
return this.data.todos.filter( function( t ) {
return id == t.id;
})[ 0 ];
},
getTodoId: function( e, prefix ) {
return e.currentTarget.id.substring( prefix.length );
},
toggleTodo: function( e ) {
var id = this.getTodoId( e, &＃39;todo-item-chk-&＃39; );
var value = https://www.rkxy.com.cn/dnjc/e.detail.value[ 0 ];
var complete = !!value;
var todo = this.getTodo( id );
todo.complete = complete;
this.updateData( true );
this.updateStorage();
},
toggleAll: function( e ) {
var value = https://www.rkxy.com.cn/dnjc/e.detail.value[ 0 ];
var complete = !!value;
this.data.todos.forEach( function( t ) {
t.complete = complete;
});
this.updateData( true );

推荐阅读


上一篇：蒸红薯怎么做香甜软绵 流油

下一篇：怎么提高u盘传输速度 怎么提高u盘传输速度