微信小程序todolist传参

版权声明：非经本人同意，请勿转载。 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 () {
    
  }
})