小程序獲取節點綁定數據data-index的方法

1.微信小程序dataset   undefined ??

2.如何獲取數組index索引?

3.獲取節點的屬性,width ,height,left,right等等

 

方法一(一般用這個獲取數據,記得要bindtap點擊執行這個函數才能獲取到currentTarget.dataset):

wxml:

<view  data-id="{{1}}"  data-haha="{{index}}" bindtap="a"  id="aabb">點擊獲取data-id綁定的id值</view>

 

js:

a:function(e){

     console.log(event)    //打印出view中所有屬性的值,包括“點擊獲取data-id綁定的id值”

     console.log(event.currentTarget.dataset.id)    //打印出data-id綁定的id值

     console.log(event.currentTarget.dataset.haha)   //打印出index的值

     console.log(event.currentTarget.id)    //打印出aabb     

}

方法二:

wxml:

<view  data-id="{{1}}"  data-haha="{{index}}" bindtap="a"  id="aabb">點擊獲取data-id綁定的id值</view>

js:

a:function(){

     wx.createSelectorQuery().select('#eee').boundingClientRect(function (rect) {
              console.log(rect.dataset.id)     // 打印節點的dataset中的id值,即data-id綁定的值

              rect.id // 節點的ID
              rect.dataset // 節點的dataset
              rect.left // 節點的左邊界座標
              rect.right // 節點的右邊界座標
              rect.top // 節點的上邊界座標
              rect.bottom // 節點的下邊界座標
              rect.width // 節點的寬度
              rect.height // 節點的高度
    }).exec()

}

 

官方微信開發文檔新方法說明地址:https://developers.weixin.qq.com/miniprogram/dev/api/NodesRef.boundingClientRect.html

或者:

https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html?search-key=wxml%E8%8A%82%E7%82%B9

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章