高级教程｜小程序开发指南进阶篇（二）

最新推荐文章于 2024-10-06 12:03:48 发布

IoT砖家涂拉拉

最新推荐文章于 2024-10-06 12:03:48 发布

阅读量1.1k

点赞数 29

文章标签：服务器前端 javascript 小程序 SDK API App

本文链接：https://blog.csdn.net/ms_smart/article/details/142379724

版权

高级教程｜小程序开发指南进阶篇（一）

四. 获取界面上节点信息

在开发的过程中，如需查询某个节点的当前位置、属性、样式等信息，您可以使用 ty.createSelectorQuery。

返回值是一个 SelectorQuery 对象实例。

示例代码

const query = ty.createSelectorQuery();
          query.select("#the-id").boundingClientRect();
          query.selectViewport().scrollOffset();
          query.exec(function (res) {
          res[0].top; // #the-id 节点的上边界坐标
          res[1].scrollTop; // 显示区域的竖直滚动位置
          });

获取节点的相交状态

ty.createIntersectionObserver API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组 API 常常可以用于推断某些节点是否展示给用户以及有多大比例的区域会被展示。

这一组 API 涉及的主要概念包括：

参照节点：监听的参照节点，取节点的布局区域作为参照区域。如果有多个参照节点，则会取这些节点的布局区域的交集作为参照区域。页面显示区域也可作为参照区域之一。
目标节点：监听的目标，默认只能是一个节点（使用 selectAll 选项时，可以同时监听多个节点）。
相交区域：目标节点的布局区域与参照区域的相交区域。
相交比例：相交区域占参照区域的比例。
阈值：如果相交比例达到阈值，则会触发监听器的回调函数。

以下代码表示当 .ball 和 .scroll-view 相交时，即触发回调函数。

onLoad(){
          this._observer = ty.createIntersectionObserver()
          this._observer
          .relativeTo('.scroll-view')
          .observe('.ball', (res) => {
          this.setData({
          appear: res.intersectionRatio > 0
          })
          })
          }

          onUnload() {
          if (this._observer) this._observer.disconnect()
          }

五. 动画

在小程序中，通常可以使用 CSS 渐变和 CSS 动画来创建简易的界面动画。同时，还可以使用 ty.createAnimation 接口来动态创建简易的动画效果。

示例代码

该示例代码实现一个简单的旋转动画效果，实现更多效果。

<view class="animation-element"
          animation="{{animation}}"></view>
          <button bind:tap="rotate">旋转</button>

Page({
          data: {
          animation: [],
          },
          onReady: function () {
          this.animation = ty.createAnimation();
          },
          rotate: function () {
          this.animation.rotate(Math.random() * 720 - 360).step();
          let anim = this.animation.export();
          this.setData({ animation: anim });
          },
          });