autojs布局分析不了

JavaScript019

autojs布局分析不了,第1张

关于autojs布局分析不了相关资料如下

在上一个教程: autojs自己写布局分析中, 我们绘制了绿框

autojs自己写布局分析

今天我们要实现的是点击绿框, 弹出点击的节点信息, 就像这样子

思路

手指点击屏幕, 有了一个触摸坐标, 拿触摸坐标和节点的矩形区域作对比, 如果包含该点,

那么就弹出对应节点的信息

设置画板的点击事件

我们在抬起事件中, 获取触摸坐标x,y 传给函数 showDialog

//记录按键被按下时的触摸坐标var x = 0,y = 0window.canvas.setOnTouchListener(function (view, event) {switch (event.getAction()) {case event.ACTION_DOWN:log("ACTION_DOWN") break case event.ACTION_MOVE:log("ACTION_MOVE") break case event.ACTION_UP:log("ACTION_UP") x = event.getRawX() y = event.getRawY() showDialog(x, y) break }return true})

判断点是否在矩形区域内

显示对话框之前, 我们要先遍历所有节点, 看点位是否在某个绿框之内

function isPointInRect(point, rect) {let x = point.x let y = point.y let x1 = rect.left let y1 = rect.top let x2 = rect.right let y2 = rect.bottom if (x >= x1 &&x <= x2 &&y >= y1 &&y <= y2) {return true }return false}

遍历判断点是否在某个绿框内部

遍历所有的绿框节点

function showDialog(childViewNodes, x, y) {var len = childViewNodes.length // 倒序遍历for (var i = len - 1i >= 0i--) {let childViewNode = childViewNodes[i] let bounds = childViewNode.bounds() let left = bounds.left let top = bounds.top let right = bounds.right let bottom = bounds.bottom if (x >left &&x <right &&y >top &&y <bottom) {log("点击了第" + i + "个元素") log(childViewNodes[i]) break }}}

点击一下, 看看效果

点击了第4个元素 UiObject(id=, sourceNodeId=3826815860980, packageName=org.autojs.autojspro, className=android.view.View, text=null, desc=UI界面.js28.46 KB修改于 2022-09-29 17:22:54, indexInParent=0, boundsInParent=[0,0][1440,233], boundsInScreen=[0,669][1440,902], checkable=false, checked=false, focusable=true, focused=false, selected=false, clickable=true, longClickable=true, enabled=true, password=false, scrollable=false)

获取要显示的节点信息

autojs的节点有以下条目, 我们封装成模块, 方便调用

// 属性名字let propertyNames = ["accessibilityFocused","bounds","checked","className","clickable","column","columnCount","columnSpan","columnSpan","depth","desc","dismissable","drawingOrder","editable","enabled","focusable","fullId","id","idHex","indexInParent","longClickable","packageName","row","rowCount","rowSpan","scrollable","selected","text","visibleToUser",]module.exports = propertyNames

节点中的这些属性对应的值, 有的是方法, 有的是布尔值,

因此我们还要判断一下值的类型, 如果是函数, 那么就执行函数, 否则直接赋值即可

项目中常用的吸顶效果，如果页面没有固定定位的元素是比较容易实现的，但是如果页面结构比较复杂会有兼容性问题

常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动

解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为 顶部固定+内容+底部固定

注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到flex=1元素的外层，吸顶的元素需要用两个div，一个是正常显示的，一个是滚动到一定高度固定到顶部的

html:

<div class="wrap" id="wrapId">

    <div class="isFixed" v-if="is_fixed">

        <div class="topBar" id="fixedTopFixed" ref="topBar">

            <div class="item" v-for="(item,index) in barList" >吸顶内容</div>

        </div>

    </div>

    <div class="flexWrap" :class="is_fixed? 'wrapTop' : 'flex'">

            <div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="50">

            <div class="flexContent">

                <div class="top" ref="top">

                    <div class="banner"><img src="../../../assets/images/文件名/banner.jpg" alt="" srcset=""></div>

                    <div class="topBar" id="fixedTop" ref="topBar" v-show="!is_fixed">

                        <div class="item" v-for="(item,index) in barList" @click="tab(index,item)">

                        不吸顶时展示的内容

                        </div>

                    </div>

                </div>

                <div class="scrollContent" id="wrap-content" ref="contentH">

                    <div class="memberList" v-show="infoList.length>0" id="content">

                        <div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="10">

                            <div class="memberItem" v-for="(item,index) in infoList">

                                加载内容

                            </div>

                            <div class="loading" v-if="loading">

                                <span id="load-text">{{loadText}}</span>

                            </div>

                        </div>

                    </div>

                    <div class="empty" v-show="noData">最新达成情况正在更新中...请稍后再来～</div>

                </div>

            </div>

        </div>

    </div>

    <div class="footer">底部固定</div>

</div>

js:

data: {

    return {

        busy: false,

        pageNum: 1,

        pageSize: 10,

        loading: false，

        noData: false,

        infoList: []

    }

}

mounted() {

<!--监听滚动-->

    that.$nextTick(() =>{

        let scrollDOM = document.querySelector('.flexContent')

        scrollDOM.addEventListener('scroll',that.handleScroll)

    })

},

methods: {

    handleScroll () {

        let scrollDOM = document.querySelector('.flexContent')

        let scrollTop = scrollDOM.scrollTop

        <!--计算滚动高度-->

        let clientHeight = document.documentElement.clientHeight

        if (scrollTop >document.querySelector('.banner').offsetHeight) {

            this.is_fixed = true

        } else {

            this.is_fixed = false

        }

    },

    <!--//触发加载-->

    loadMore() {

        if(this.pageNum<this.pages) {

            this.loading = true

            this.pageNum+=1

            this.busy = true

            this.loadData(接口参数,this.pageNum)

        }

    },

    //加载时触发的接口调用

    loadData() {

        api.XXX({},function(success,data,err){

            if(success) {

                if(data.status==200) {

                //加载逻辑判断

                    if(data.body.list.length>0 &&pageNum>0){

                        that.infoList = that.infoList.concat(data.body.list)

                        that.loading = false

                    }

                    if(pageNum==data.body.pages || data.body.list<20) {

                        that.loading = true

                        that.loadText = '没有更多数据了'

                    }

                    if(pageNum==1 &&data.body.list.length==0) {

                        that.noData = true

                        that.infoList = []

                    }

                }

            }

        })

    }

}

css:

.isFixed {

    width: 100%

    height: 1rem

    position: absolute

    top: 0

    left: 0

    z-index: 100

}

.myScroll {

    height: 100%

}

.wrap {

    width: 7.5rem

    margin: auto

    height: 100%

    overflow: hidden

    display: flex

    flex-direction: column

}

.flex {

    flex: 1

}

.wrapTop {

            padding-top:0.45rem

 }

.flexWrap {

    width: 100%

    height: 100%

}

.flexContent {

    width: 100%

    height: 100%

    display: flex

    flex-direction: column

    overflow: scroll

    -webkit-overflow-scrolling: touch

}

.top {

    .banner {

        position: relative

        img {

            width: 100%

            display: block

        }

        .month {

            position: absolute

            bottom: 0.33rem

            left: 0.45rem

            color: #fff

            font-size: 0.45rem

        }

    }

}

.scrollContent {

    width: 100%

    background: #fff

    flex: 1

    -webkit-overflow-scrolling: touch

    .memberList {

        height: 100%

        padding-top: 0.2rem

    }

}

.footer {

    position: fixed

    bottom: 0

    width:7.5rem

    margin: auto

    height:auto

    background:rgba(0,0,0,.7)

}

Bootstrap

提供了一个清晰的创建表格的布局。下表列出了

Bootstrap

支持的一些表格元素：

表格类

下表样式可用于表格中：

<tr>,

<th>

和

<td>

类

下表的类可用于表格的行或者单元格：

基本的表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加

class

.table，如下面实例所示：

<div

class="row">

<table

class="table">

<caption

class="text-center">基本表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No.1</td>

<td>北京</td>

</tr>

<tr>

<td>No.2</td>

<td>上海</td>

</tr>

</tbody>

</table>

</div>

显示效果：

可选的表格类

除了基本的表格标记和

.table

class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格

通过添加

.table-striped

class，您将在

<tbody>

内的行上看到条纹，如下面的实例所示：

<div

class="row">

<table

class="table

table-striped">

<caption

class="text-center">条纹表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No.1</td>

<td>北京</td>

</tr>

<tr>

<td>No.2</td>

<td>上海</td>

</tr>

<tr>

<td>No.3</td>

<td>苏州</td>

</tr>

<tr>

<td>No.4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

边框表格

通过添加

.table-bordered

class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：

<div

class="row">

<table

class="table

table-bordered">

<caption

class="text-center">边框表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No.1</td>

<td>北京</td>

</tr>

<tr>

<td>No.2</td>

<td>上海</td>

</tr>

<tr>

<td>No.3</td>

<td>苏州</td>

</tr>

<tr>

<td>No.4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

悬停表格

通过添加

.table-hover

class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：

<div

class="row">

<table

class="table

table-hover">

<caption

class="text-center">悬停表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No.1</td>

<td>北京</td>

</tr>

<tr>

<td>No.2</td>

<td>上海</td>

</tr>

<tr>

<td>No.3</td>

<td>苏州</td>

</tr>

<tr>

<td>No.4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

精简表格

通过添加

.table-condensed

class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<div

class="row">

<table

class="table

table-condensed">

<caption

class="text-center">精简表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No.1</td>

<td>北京</td>

</tr>

<tr>

<td>No.2</td>

<td>上海</td>

</tr>

<tr>

<td>No.3</td>

<td>苏州</td>

</tr>

<tr>

<td>No.4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

这些类可以用到<tr>、<td>、<th>中，如下面实例所示：

<div

class="row">

<table

class="table">

<caption

class="text-center">上下文表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr

class="active">

<td>No.1</td>

<td>北京</td>

</tr>

<tr

class="success">

<td>No.2</td>

<td>上海</td>

</tr>

<tr

class="warning">

<td>No.3</td>

<td>苏州</td>

</tr>

<tr

class="danger">

<td>No.4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

响应式表格

通过把任意的

.table

包在

.table-responsive

class

内，您可以让表格水平滚动以适应小型设备（小于

768px）。当在大于

768px

宽的大型设备上查看时，您将看不到任何的差别。

<div

class="table-responsive">

<table

class="table">

<caption

class="text-center">响应式表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No.1</td>

<td>北京</td>

</tr>

<tr>

<td>No.2</td>

<td>上海</td>

</tr>

<tr>

<td>No.3</td>

<td>苏州</td>

</tr>

<tr>

<td>No.4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

如果还想继续学习的话大家可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

以上就是本文的全部内容，希望能够帮助大家更好的学习JS表格组件神器bootstrap

table。