关于如何在微信小程序map地图上 cover-view 如何流畅展示动画

在进行微信小程序开发过程中发现了坑,map地图存在时,cover-view 所展示的动画在真机上会很卡。
解决的方法也很简单,就是不写在wxss里,而是写在js中

/*  底部弹窗开始 -使屏幕变暗  */
.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 99;
  color: #fff;
}
 .hua{
    width:96%;
    min-height: 500rpx;
    margin-left: 2%;
    background:#fff;
    position:absolute;
    bottom: 0rpx;
    z-index: 100;
}
 <map id="map" bindmarkertap="markertap" ></map>
 <cover-view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></cover-view>
 <cover-view class="hua" animation='{{animationData}}'   wx:if="{{showModalStatus}}"> </cover-view>

在js中运用微信小程序所编写的Animation对象
https://developers.weixin.qq.com/miniprogram/dev/api/Animation.html

	data: {
		animationData:''
	},
  //点击merkers
  markertap(e) {
    let that= this;
    wx.request({
      url: '',
      data: {
      },
      method: "post",
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success(res) {
        // 显示遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        that.animation = animation
        animation.translateY(400).step()
        that.setData({
          animationData: animation.export(),
          showModalStatus: true,
        })
        setTimeout(function () {
          animation.translateY(0).step()
          that.setData({
            animationData: animation.export()
          })
        }.bind(this), 200)
      }
    })
  },

  //隐藏对话框
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(400).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  },

你可能感兴趣的:(前端基础学习,微信小程序,map,cover-view,animation)