小程式-canvas在IOS手機層級最高無法展示問題

要求的效果：

正面：

背面：

在開發者工具 利用css 和定位實作了一個版本

　

.topBox.on {
transform:rotateY(180deg);

}
.topBox {
position:relative;
height:300rpx;
transform-style:preserve-3d;
transition:1s;

}
.codeBg {
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
position:absolute;
width:600rpx;
height:300rpx;
background:#fff;

}      

此時 在真機上測試 會發現出現問題

canvas在最上面  之後看官網api，原生元件的使用注意點，層級最高,其他元件的z-index無論為多少，都無法蓋在原生元件上。

為了解決覆寫問題，在翻轉在背面的時候 我進行了 對畫布的清空，這樣畫布雖然在最上層 但是不會遮擋住後面的會員卡資訊

但是會出現一個問題  翻轉事件的觸發問題，我的翻轉事件是綁定在 最大的容器上 （包裹會員卡和二維碼的大盒子容器）

<view class="topBox {{isTrans?'on':''}}" bindtap='toTrans'>      

　　在安卓上，效果是可以實作的，在ios上，canvas所占領的位置 會無法觸發翻轉事件，為了解決這個問題 我在canvas上進行了方法綁定

<canvas class="canvas " canvas-id='canvas'  bindtouchstart="moveStart" bindtouchmove="move" bindtouchend="moveEnd"></canvas>      

　　監聽了canvas的觸摸事件，在确定為ios的裝置上 進行事件觸發

//畫布的觸摸事件
  moveStart:function(){
    var that=this;
      
    if (!that.isIOS()) { return }
    console.log(1)
      var a=setInterval(function(){
        that.setData({
          moveTime:that.data.moveTime++
        })
        console.log(that.data.moveTime)
      },10)
    
      that.setData({
        timeBar:a
      })
  },
  move:function(){
    if (!this.isIOS()) { return }
    console.log('移動了')
  },
  
  moveEnd:function(){
    var that=this;
   
    if (!that.isIOS()){return null}
    console.log(this.data.moveTime)
    if (this.data.moveTime<500){
       
     
        clearInterval(that.data.timeBar)
        that.setData({
          moveTime: 0
        })
  
       this.toTrans();
      }else{
        clearInterval(that.data.timeBar)
        that.setData({
          moveTime: 0
        })
      }
  },      

　　設定一個定時器，擷取觸摸開始到結束的時間超過500ms為 長按不進行翻轉事件的觸發，小于500ms的确定為觸發事件

isIOS: function () {
    var flag = false;
    wx.getSystemInfo({
      success: function (res) {
        if (res.platform == "ios") {
          flag = true
        }
      }
    })
    return flag;
  },
 // 卡片旋轉
  toTrans:function(){
  var that=this;
  that.setData({
    isTrans: !that.data.isTrans
  })
   
  if(that.data.isTrans){
    that.getCode();
  }else{
    const ctx = wx.createCanvasContext('canvas')
    ctx.clearRect(0, 0, 125, 125)
    ctx.draw()
  }
  },
data裡聲明moveTime:0,
    timeBar:null      

　　這樣就完成了 正反兩面的翻轉問題，但是還是有一點小問題 就是 清空canvas以後 會出現一瞬間的空白 暫時還沒有好的辦法解決 如果大家有好的方法 請一定留言告訴我