div

简介

<div> 是通用容器。

子组件

<div> 支持各种类型的子元素，包括 <div> 自己。

组件演示

axml

<div class="warpper">
  <x-nav-bar showArrow="{{true}}" title="Div"></x-nav-bar>
  <div class="container">
    <view class="box">
      <view class="view" onTap="tapView">普通的view</view>
      <view class="theme-box theme-{{countView % 2 == 0 ? 'dark' : 'light'}}">
        <view class="theme">点击了：{{countView}}次</view>
        <view class="theme">主题切换</view>
      </view>
    </view>
    <div class="box">
      <div class="view" onTap="tapDiv">普通的div</div>
      <div class="theme-box theme-{{countDiv % 2 == 0 ? 'dark' : 'light'}}">
        <div class="theme">点击了：{{countDiv}}次</div>
        <div class="theme">主题切换</div>
      </div>
    </div>
  </div>
</div>

css

.warpper {
  background-color:white;
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container{
  flex: 1;
  color: black;
}

.box{
  width: 80vw;
  padding: 30rpx;
  margin: 20rpx auto;
  border: 1rpx solid #666;
  border-radius: 8rpx;

  display: flex;
  flex-direction: row;
  align-items: center;
}

.view{
  /* width: 50%; */
  padding: 30rpx;
  background: #ccc;
  border-radius: 8rpx;
  line-height: 33rpx;
  color: #333;
  margin-right: 20rpx;
}

.theme-box{
  flex: 1;
  margin-left: 30rpx;
}

.theme-light{
  background-color: #fff;
}

.theme-light .theme{
  color: #333;
  background-image: linear-gradient(to right, green 0%, red 100%);
}

.theme-dark{
  background-color: #333;
}

.theme-dark .theme{
  color: #fff;
  background-image: linear-gradient(to right, red 0%, green 100%);
}

ts

import { JSON, JSONObject } from "waft-json";
import { console, getDataSource, Page, Props, Event, MessageEvent, setTimeout,window } from "waft";

let _this: Index;
export class Index extends Page {
  constructor(props: Props){
    super(props);
    _this = this;
    // 设置默认的state
    this.setState(getDataSource());
     //click View
    this.addEventListener('tapView', () => {
      const newState = new JSONObject;
      const countView = _this.state.getInteger('countView');
      newState.set('countView', countView + 1);
      _this.setState(newState);
    })

    this.addEventListener('tapDiv', () => {
      const newState = new JSONObject;
      const countDiv = _this.state.getInteger('countDiv');
      newState.set('countDiv', countDiv + 1);
      _this.setState(newState);
    })
  }
}

API

boundingClientRect

获取元素节点位置信息

const element = document.querySelector("#myDiv");
element.boundingClientRect((data)=>{
    console.log("boundingClientRect:" + data.toString());
  });

返回值

{
  "bottom":165,
  "height":124,
  "left":41,
  "right":287,
  "top":41,
  "width":246
}

备注

1.div也支持写成view。
2.所有不支持的组件都会被解析成div。