原生组件
收藏
我的收藏

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

•

textarea

•

video

•

live-player

•

map

•

input

•

canvas（V2 版本）

原生组件同层渲染

从基础库 1.59 开始支持

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

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

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

代码示例

js复制
<view class="outer">
  <textarea value="文本框在下面" />
  <image
    mode="widthFix"
    src="https://s3.pstatp.com/toutiao/resource/developer/static/img/main-logo.8e3a839.png"
  />
</view>

js复制
.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 内部。

代码示例

js复制
<video
  class="myVideo"
  root-class-name="myVideo"
  id="my-video"
  src="https//sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/misc/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>

js复制
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("点击图片");
      },
    });
  },
});

js复制
.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;
}