您现在的位置:小学生自学网>> 资料库>> 转载

微信小程序开发——弹窗制作

作者: 来源: 发布时间:2023年01月24日 点击数:
 

 

<!--index.wxml-->
<button class="clickbindtap="click">点击出现弹窗
</button>
<!-- 弹窗 -->
<view class="windowwx:if="{{tab==1}}">
  自定义内容。。。
</view>

 

/**index.wxss**/
.click{
  width: 500rpx;
  height: 70rpx;
  font-size: 15px;
}
.window{
  position: fixed;
  height: 400rpx;
  width: 400rpx;
  transform: translate( 50%, 50%);/*距x,y轴*/
  background: rgb(114, 245, 250);
}

 

 

 

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    tab: 0
  },
  //点击出现弹窗
  click: function() {
    let that = this;
      if(that.data.tab==0){
      that.setData({
       tab: 1
      })
    //双击弹窗消失
    }else if(that.data.tab==1){
      that.setData({
        tab: 0
      })
    }
  }
})