native component

原生组件是指在小程序页面中通过客户端实现的组件,包括:

  • textarea
  • video
  • live-player
  • map
  • input (获得焦点时)
  • ad

原生组件同层渲染

从基础库 1.59 开始支持

同层渲染是为了可以在原生组件上面覆盖其它 web 组件而做的方案,原生组件层级最高而导致无法覆盖其它组件的问题将得到解决。

通过 z-index 在原生组件上覆盖其它组件

对于 position 非 static 的组件,可以通过设置 z-index 来控制它们的层叠关系

代码示例

<view class="outer">
  <textarea value="文本框在下面" />
  <image
    mode="widthFix"
    src="https://s3.pstatp.com/toutiao/resource/developer/static/img/main-logo.8e3a839.png"
  />
</view>
.outer {
  position: relative;
  border: 1px solid;
}

.outer image {
  position: absolute;
  z-index: 1;
  bottom: 5px;
  right: 5px;
  width: 100px;
}

video、live-player

video 和 live-player 比较特殊,它们进入全屏后,无法通过 z-index 让兄弟元素覆盖到其上面,这时需要把覆盖物作为子元素添加到 video/live-player 内部。

代码示例

<video
  class="myVideo"
  root-class-name="myVideo"
  id="my-video"
  src="http://sf1-ttcdn-tos.pstatp.com/obj/ttfe/test/test-upload.mp4"
  bindfullscreenchange="fullscreenchange"
  showFullscreenBtn="{{false}}"
>
  <view class="danmu-group" hidden="{{!openDanmu}}">
    <view
      tt:for="{{danmu}}"
      tt:item="i"
      style="top: {{i.t}}%; left: {{i.l}}%; font-size: {{i.s}}px; color: {{i.c}};"
    >
      这是一条弹幕
    </view>
  </view>
  <switch bindchange="toggleDanmu" checked="{{openDanmu}}" />
  <button hidden="{{fs}}" bindtap="requestFs" size="mini">进入全屏</button>
  <button hidden="{{!fs}}" bindtap="exitFs" style="top: 100rpx;" size="mini">退出全屏</button>
  <image
    hidden="{{!fs}}"
    src="https://s3.pstatp.com/toutiao/resource/developer/static/img/main-logo.8e3a839.png"
    bindtap="touchimage"
  />
</video>
Page({
  data: {
    fs: false,
  },
  onLoad: function () {
    this.ctx = tt.createVideoContext("my-video");
  },
  fullscreenchange: function (e) {
    this.setData({
      fs: e.detail.fullScreen,
    });
  },
  exitFs: function () {
    this.ctx.exitFullScreen();
  },
  requestFs: function () {
    this.ctx.requestFullScreen();
  },
  toggleDanmu: function () {
    if (!this.data.openDanmu) {
      let danmu = [];
      for (var i = 0; i < 100; i++) {
        danmu.push({
          t: ~~(Math.random() * 100),
          l: ~~(Math.random() * 200) - 20,
          s: ~~(Math.random() * 24) + 12,
          c: `rgb(${~~(Math.random() * 150) + 120},${~~(Math.random() * 150) + 120}, ${
            ~~(Math.random() * 150) + 120
          })`,
        });
      }
      this.setData({ danmu: danmu });
    }
    this.setData({
      openDanmu: !this.data.openDanmu,
    });
  },
  touchimage: function () {
    tt.showToast({
      title: "点击图片了", // 内容
      success: (res) => {
        console.log("点击图片");
      },
    });
  },
});
.myVideo image {
  position: absolute;
  right: 75rpx;
  top: 30%;
  width: 150rpx;
  height: 150rpx;
  transform: translate(-50%, -50%);
}

.myVideo button {
  position: absolute;
  left: 20rpx;
  top: 10rpx;
  z-index: 9999;
}
.myVideo .danmu-group {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.myVideo .danmu-group view {
  position: absolute;
  animation: 6s linear infinite loop;
}

.myVideo switch {
  position: absolute;
  top: 50rpx;
  right: 20rpx;
  z-index: 1000;
}

已知问题

在安卓上同层渲染依赖一个动态下发的插件,所以在刚安装好 APP(比如今日)的短时间内,是不具有同层渲染能力的,或者在一些极端情况下,插件失效也可能导致同层渲染不可用。解决方案是通过tt.caniputstuffovercomponent 接口进行检测。

点击纠错
评价此篇文档