版权声明:非经本人同意,请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82817074
简单的todolist
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
Eg:
bindtap="handleTap1”
catchtap="handleTap2”
Tip:获取表单元素的value
getval:function(e){
e.detail.value==表单元素的value
}
sel:function(e){
e.target.dataset.index==输出列表元素的下标
}
Bindinput:input发生改变触发的事件
<input type="text" bindinput="getval" value="{{val}}"/>
事件传参数 通过data-变量名= 获取参数通过 e.target
微信todolist
<input class='ipt' placeholder='请输入内容' bindinput='iptvalue' value="{{val}}"></input>
<button bindtap='add'>添加</button>
<view wx:for="{{list}}" wx:key>
{{index}}--------{{item}}------
<button size='mini' catchtap='del' data-index="{{index}}">删除</button>
<!--传参 data-index="{{index}}" -->
</view>
data: {
tit:"哈哈哈哈",
arr:["奥巴马","奥巴驴","奥巴猪","奥巴羊","奥巴牛"],
str:"我是模板变量",
val:"",
list:[]
},
iptvalue:function(e){
console.log(e.detail.value) //监听input框里的值
this.setData({ val: e.detail.value})
},
add:function(){
var list = this.data.list;
list.push(this.data.val)
console.log(list)
this.setData({ list: list, val: ""})
},
del:function(e){ //删除
console.log(e.target.dataset.index) //获取所点击的下标
var list1 = this.data.list;
var i = e.target.dataset.index;
list1.splice(i,1)
this.setData({list:list1})
},
<view>
微信todolist
<input class='ipt' placeholder='请输入内容' bindinput='iptvalue' value="{{val}}"></input>
<button bindtap='add'>添加</button>
<view wx:for="{{list}}" wx:key>
{{index}}--------{{item}}------
<button size='mini' catchtap='del' data-index="{{index}}">删除</button>
<!--传参 data-index="{{index}}" -->
</view>
<button bindtap='gotozhifubao'>点击事件</button>
<view class="con1">{{tit}}</view>
<view class='con2'></view>
<view wx:for="{{arr}}" wx:key>{{index}}----{{item}}</view>
<template is="moban" data="{{str}}"></template>
<!-- 定义模板 -->
<template name="moban">
<view >我是模板---{{str}}</view>
<button>我是模板里的按钮</button>
</template>
<!-- 事件 -->
<!-- bindtap事件会促发冒泡事件 -->
<!-- catchtap事件会阻止冒泡 -->
<view catchtap='fu'>
父元素
<button catchtap='zi'>子元素</button>
</view>
</view>
Page({
/**
* 页面的初始数据
*/
data: {
tit:"哈哈哈哈",
arr:["奥巴马","奥巴驴","奥巴猪","奥巴羊","奥巴牛"],
str:"我是模板变量",
val:"",
list:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '微信',
})
},
gotozhifubao:function(){
wx.navigateTo({
url:"../logs/logs"
})
},
fu:function(){
console.log("父元素")
},
zi: function () {
console.log("子元素")
console.log(this.data.tit)
this.setData({str:"呵呵呵"})
},
iptvalue:function(e){
console.log(e.detail.value) //监听input框里的值
this.setData({ val: e.detail.value})
},
add:function(){
var list = this.data.list;
list.push(this.data.val)
console.log(list)
this.setData({ list: list, val: ""})
},
del:function(e){ //删除
console.log(e.target.dataset.index) //获取所点击的下标
var list1 = this.data.list;
var i = e.target.dataset.index;
list1.splice(i,1)
this.setData({list:list1})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})