微信小程序 自定义d窗

 <button bindtap="powerDrawer" type="primary" size="mini" style="width: 55%;" data-statu="open">中奖记录</button>  

<!-- 中间名单d窗 -->

<view class="drawer_div">

  <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>

    <view animation="{{animationPrize}}" class="drawer_box" wx:if="{{showModalStatus}}">

      <view class="drawer_title">

        中奖记录

        <image src="/img/x@2xpng" bindtap="powerDrawer" data-statu="close"></image>

      </view>

      <view class="drawer_content">

        <view class="top grid">

          <text>

            名称：啦啦啦啦啦啦啦啦

          </text>

          <text>

            时间：2020-02-20

          </text>

        </view>

        <view class="top grid">

          <text>

            名称：啦啦啦啦啦啦啦啦

          </text>

          <text>

            时间：2020-02-20

          </text>

        </view>

    </view>

  </view>

</view>

drawer_screen {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 1000;

  background: #000;

  opacity: 05;

  overflow: hidden;

}

/content/

drawer_box {

  width: 650rpx;

  overflow: hidden;

  position: fixed;

  top: 50%;

  left: 0;

  z-index: 1001;

  background: #FAFAFA;

  margin: -150px 50rpx 0 50rpx;

  border-radius: 3px;

}

drawer_title{

  padding:30rpx 20rpx;

  font-size: 36rpx;

  text-align: center;

  position: relative;

}

drawer_title image{

  display: inline-block;

  width: 30rpx;

  height: 30rpx;

  position: absolute;

  right: 9px;

  top: 10px;

}

drawer_content {

  height: 210px;

  overflow-y: scroll; /超出父盒子高度可滚动/

  padding: 0 20rpx;

}

top{

  display: flex;

  justify-content: space-between;

  border-bottom: 1px dashed #ccc;

}

top text{

  display: inline-block;

  height: 60rpx;

  line-height: 20rpx;

}

data: {

animationPrize: {},

}

powerDrawer: function (e) {

    // consolelog(e);

    let currentStatu = ecurrentTargetdatasetstatu;

    thisutil(currentStatu);

  },

  util: function (currentStatu) {

    / 动画部分 /

    // 第1步：创建动画实例

    var animation = wxcreateAnimation({

      duration: 200,  //动画时长

      timingFunction: "linear", //线性

      delay: 0  //0则不延迟

    });

    // 第2步：这个动画实例赋给当前的动画实例

    thisanimation = animation;

    // 第3步：执行第一组动画

    animationopacity(0)rotateX(-100)step();

    // 第4步：导出动画对象赋给数据对象储存

    thissetData({

      animationPrize: animationexport()

    })

    // 第5步：设置定时器到指定时候后，执行第二组动画

    setTimeout(function () {

      // 执行第二组动画

      animationopacity(1)rotateX(0)step();

      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象

      thissetData({

        animationPrize: animation

      })

      //关闭

      if (currentStatu == "close") {

        thissetData({

          showModalStatus: false

        });

      }

    }bind(this), 200)

    // 显示

    if (currentStatu == "open") {

      thissetData({

        showModalStatus: true

      });

    }

  },

首先看看官方提供的模态d窗

api如下：

示例：

这样的模态d窗，充其量只能做个alert，提示一下信息。

但是并不能使用它来处理复杂性的d窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法

wxml：

wxss：

js:

相关连接： >

网上看新闻,会有小程序跳转到微信里面的原因是：

1、微信程序出错，可以退出微信之后再打开或者，关机重启之后再打开微信。

2、微信运行程序与其他软件有冲突，可以关闭其他软件之后再登录微信。

3、微信版本较低或运行程序已经损坏，可以卸载这个微信再重新下载新的微信安装包进行安装。

这个方式是禁止的，即如果一打开小程序，就d出获取用户信息d窗，是无法通过审核的。具体的规则你可以查看微信小程序文档。

之所以现在的很多小程序都是这样的形式却还是能上线，是因为他们是在open-type开放getUserinfo之前开发的小程序，所以允许。但现在不能这样了。

解决方案：page-container页面容器组件

功能说明：

小程序如果在页面内进行复杂的界面设计（如在页面内d出半屏的d窗、在页面内加载一个全屏的子页面等），用户进行返回 *** 作会直接离开当前页面，不符合用户预期，预期应为关闭当前d出的组件。 为此提供“假页”容器组件，效果类似于 popup d出层，页面内存在该容器时，当用户进行返回 *** 作，关闭该容器不关闭页面。返回 *** 作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

使用限制：

微信小程序官方提供的d窗真的是太不友好了！！提示的内容还最好不能超过三行，于是，参考着样式，自己动手撸一个！

微信小程序官方API

(干货)微信小程序组件封装

以上就是关于微信小程序 自定义d窗全部的内容，包括:微信小程序 自定义d窗、微信小程序之自定义模态d窗（带动画）实例、我用浏览器打开小程序,为什么会d窗微信等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！