WeChat 애플릿을 활용한 팝업 페이지 개발 방법 소개

미니 프로그램 개발 과정에서 팝업 페이지를 개발하는 상황이 발생하게 됩니다. 먼저 미니 프로그램 팝업 페이지에 대한 공식적인 설명을 살펴보겠습니다. API의 인터페이스는 다음과 같습니다

공식 코드 예시를 보면 asert처럼 단순하다고 생각하면 실제 내용을 볼 수 없습니다. 팝업창이 필요합니다. 그래서 오늘 HTML51.COM은 여러분의 참고를 위해 팝업 애플릿 튜토리얼을 작성했습니다.
먼저 홈페이지의 동적 렌더링을 살펴보겠습니다.

가장 먼저 보이는 것은 홈페이지 코드입니다.

<view class="copyright">
    <view class="copyright_item">CopyRight：All Right Reserved</view>
    <view class="copyright_item">原创作者：51小程序</view>
    <view class="copyright_item">微信小程序开发者社区</view>
    <view class="copyright_item">HTML51.COM</view>
    <view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view>
    <view class="goto_counter"><button type="default" bindtap="goto_counter">点击进入弹窗演示页面</button></view>
</view>

물론이죠. , 요점은 이것이 아닙니다.
index.wxml의 코드는 다음과 같습니다.

<!--使用animation属性指定需要执行的动画-->  
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> 
   
  <!--drawer content-->  
  <view class="drawer_title">弹窗标题</view> 
  <view class="drawer_content"> 
    <view class="top grid"> 
      <label class="title col-0">标题</label> 
      <input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input> 
    </view> 
    <view class="top grid"> 
      <label class="title col-0">标题</label> 
      <input class="input_base input_h30 col-1" name="mobile" value="110"></input> 
    </view> 
    <view class="top grid"> 
      <label class="title col-0">标题</label> 
      <input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input> 
    </view> 
    <view class="top grid"> 
      <label class="title col-0">标题</label> 
      <input class="input_base input_h30 col-1" name="Email" value="仅供学习使用"></input> 
    </view> 
    <view class="top bottom grid"> 
      <label class="title col-0">备注</label> 
      <input class="input_base input_h30 col-1" name="bz"></input> 
    </view> 
  </view> 
  <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view> 
</view>

index.wxss의 코드는 다음과 같습니다.

.btn { 
  width: 80%;  
  padding: 20rpx 0;  
  border-radius: 10rpx;  
  text-align: center;  
  margin: 40rpx 10%;  
  background: #000;  
  color: #fff;  
} 
   
/*mask*/ 
.drawer_screen { 
  width: 100%;  
  height: 100%;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 1000;  
  background: #000;  
  opacity: 0.5;  
  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:15px;  
  font: 20px "microsoft yahei";  
  text-align: center;  
} 
.drawer_content { 
  height: 210px;  
  overflow-y: scroll; /*超出父盒子高度可滚动*/ 
} 
   
.btn_ok{ 
  padding: 10px;  
  font: 20px "microsoft yahei";  
  text-align: center;  
  border-top: 1px solid #E8E8EA;  
  color: #3CC51F;  
} 
   
.top{ 
    padding-top:8px;  
} 
.bottom { 
    padding-bottom:8px;  
} 
.title { 
    height: 30px;  
    line-height: 30px;  
    width: 160rpx;  
    text-align: center;  
    display: inline-block;  
    font: 300 28rpx/30px "microsoft yahei";  
} 
   
.input_base { 
    border: 2rpx solid #ccc;  
    padding-left: 10rpx;  
    margin-right: 50rpx;  
} 
.input_h30{ 
    height: 30px;  
    line-height: 30px;  
} 
.input_h60{ 
    height: 60px;  
} 
.input_view{ 
    font: 12px "microsoft yahei";  
    background: #fff;  
    color:#000;  
    line-height: 30px;  
} 
   
input { 
    font: 12px "microsoft yahei";  
    background: #fff;  
    color:#000 ;  
} 
radio{ 
    margin-right: 20px;  
} 
.grid { display: -webkit-box; display: box; } 
.col-0 {-webkit-box-flex:0;box-flex:0;} 
.col-1 {-webkit-box-flex:1;box-flex:1;} 
.fl { float: left;} 
.fr { float: right;}

index.js의 코드는 다음과 같습니다.

으르르

위 내용은 WeChat 애플릿을 활용한 팝업 페이지 개발 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!