关于微信小程序 todolist 实现

wxml 部分：

<text>{{index+1}}---{{item}}</text>

</view>

js 部分：

data: {

info:'hello word!',

id:1,

arr:[1,2,3,4,5,6,'hello'],

val:'',

list:[]

getval(e){

// console.log(e.detail.value)

this.setData({ val: e.detail.value})

add(){

var data1 = this.data.list;

data1.push(this.data.val)

this.setData({list:data1,val:''})

del(e){

// console.log(e.target.dataset.index)

var i = e.target.dataset.index;

var data2 = this.data.list;

data2.splice(i,1)

this.setData({list:data2})

结果如下：

关于微信小程序 todolist 实现

总结：

1、小程序里面是不支持所有dom的操作的，因为他的全局对象不是window ，就意味着我们在整个小程序里面不能使用jQuery 。没有window 就不能操作dom 就不能得到其他基于js封装的插件及类库。因为jQuery 包裹 swiper什么的他的全局对象基于js 都是基于window对象的小程序里面是没有的，所以这里面是不能引入一些插件来使用的。

2、为了方便开发者减少配置项，规定描述页面的这四个文件必须具有相同的路径和文件名

3、数据绑定：

也是双括号插值法 {{ }}

简单绑定：<view> {{ message }} </view>

组件属性(需要在双引号之内)：<view id=“item-{{id}}”> </view>

控制属性(需要在双引号之内)：<view wx:if="{{false}}"> </view>

关键字(需要在双引号之内):<checkbox checked="{{false}}"> </checkbox>

数组遍历:<view wx:for=“{{list}}”> {{item}} </view>

{{index}}==下标 {{item}}遍历到的数据值

wx:for-index=“i”可以指定数组当前下标的变量名： {{i}} =={{index}}

wx:for-item=“a” 可以指定数组当前元素的变量名 : {{a}}=={{item}}

wx:for用在<block/>标签上，以渲染一个包含多节点的结构块

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态,需要使用 wx:key 来指定列表中项目的唯一的标识符。

4、事件绑定：

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

代码如上：先绑定时间然后在js里面先把时间写出来然后先测试一下看输出什么？然后找到需要的值

关于微信小程序 todolist 实现

一步步来别急，需要什么先console.log（）一下输出出来然后找需要的值

关于微信小程序 todolist 实现

相关推荐