NodesRef.fields

解释： 获取节点的相关信息，需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery 。可指定获取的字段包括：

方法参数

Object object, Function callback

fields参数说明

参数名类型必填默认值说明
idboolean否是否返回节点 id
datasetboolean否是否返回节点 dataset
rectboolean否是否返回节点布局位置（left right top bottom）
sizeboolean否是否返回节点尺寸（width height）
scrollOffsetboolean否是否返回节点的 scrollLeft scrollTop ，节点必须是 scroll-view 或者 viewport
propertiesArray.<string>[]指定属性名列表，返回节点对应属性名的当前属性值（只能获得组件文档中标注的常规属性值， id class style 和事件绑定的属性值不可获取）
computedStyleArray.<string>[]指定样式名列表，返回节点对应样式名的当前值

示例

在开发者工具中预览效果

扫码体验

NodesRef.fields - 图1请使用百度APP扫码

图片示例

NodesRef.fields - 图2

NodesRef.fields - 图3

NodesRef.fields - 图4

代码示例

  • 在 swan 文件中
  1. <view class="container">
  2.     <view class="card-area">
  3.         <movable-area>
  4.             <movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">
  5.                 Drag
  6.             </movable-view>
  7.         </movable-area>
  8.         <view>
  9.             得到的信息：<text class="list-item-key-4">{{data}}</text>
  10.         </view>
  11.     </view>
  12. </view>
  • 在 js 文件中
Page({
    data: {
        data: ''
    },
    queryNodeInfo: function(){
        let that = this;
        swan.createSelectorQuery().select('.target').fields({
            dataset: true,
            size: true,
            scrollOffset: true,
            properties: ['scrollX', 'scrollY'],
            computedStyle: ['margin', 'backgroundColor']
        }, function(res){
            console.log(res)
            that.setData('data', JSON.stringify(res));
            res.dataset    // 节点的dataset
            res.width      // 节点的宽度
            res.height     // 节点的高度
            res.scrollLeft // 节点的水平滚动位置
            res.scrollTop  // 节点的竖直滚动位置
            res.scrollX    // 节点 scroll-x 属性的当前值
            res.scrollY    // 节点 scroll-y 属性的当前值
            // 此处返回指定要返回的样式名
            res.margin
            res.backgroundColor
        }).exec()
    }
});
  • 在 css 文件中
movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    width: 100rpx;
    background: #38f;
    color: #fff;  
}

movable-area {
    height: 400rpx;
    width: 400rpx;
    background-color: #ccc;
    overflow: hidden;
}