lottie生成的canvas与普通元素层级显示问题
view标签元素设置绝对定位覆盖在lottie生成的canvas上,开发者工具看不到view标签,移动端看得到
wxml:
<view class="item flex">
<view class="intro" wx:if="{{introShow}}">
<text>视频速配</text>
<text>遇见心动</text>
</view>
<canvas id="video" class="video" type="2d">
</canvas>
</view>
wxss:
.date-choice .item {
border-radius: 16rpx;
position: relative;
}
.date-choice .item .intro {
position: absolute;
padding-left: 30rpx;
z-index: 100;
}
js:
wx.createSelectorQuery().select(domId).node(res => {
const canvas = res.node
const context = canvas.getContext('2d')
canvas.width = 336
canvas.height = 136
lottie.setup(canvas)
lottie.loadAnimation({
loop: true,
autoplay: true,
animationData: require(path),
rendererSettings: {
context
}
})
}).exec()