关于微信小程序 todolist 实现

时间:2024-04-13 12:40:03

wxml 部分:

<input type='text' placeholder='请输入内容' bindinput='getval' value='{{val}}'></input>

<button bindtap='add'>添加</button>

<view wx:for="{{list}}" wx:key="{{index}}">

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

    <button size='mini' bindtap='del' data-index="{{index}}">删除</button>

</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() 一下 输出出来 然后找需要的值