WeChat 애플릿에서 팝업 상자 기능을 만드는 방법

이번에는 WeChat 애플릿에서 팝업 상자 기능을 만드는 방법을 보여 드리겠습니다. WeChat 애플릿에서 팝업 상자 기능을 만드는 방법에 대한 주의 사항은 무엇입니까? .

전자상거래 프로젝트의 상품 상세 페이지에서 장바구니에 담거나 주문할 때 상품 속성 팝업 상자를 선택할 수 있습니다. 뷰의 패닝 애니메이션, 팝업 스타일을 설정하세요.

1.js 코드(일반적으로 대화 상자를 표시하려면 Function을 호출하면 됩니다. 대화 상자 외부를 클릭하면 대화 상자가 사라질 수 있습니다.)

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

2.wxss code

/*使屏幕变暗 */
.commodity_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.2;
 overflow: hidden;
 z-index: 1000;
 color: #fff;
}
/*对话框 */
.commodity_attr_box {
 height: 300rpx;
 width: 100%;
 overflow: hidden;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 2000;
 background: #fff;
 padding-top: 20rpx;
}

3.wxml 코드 (showModalStatus 변수는 js 코드의 데이터 객체에서 초기화되어야 하며 초기화는 false입니다. 대화 상자가 처음에 표시되지 않았기 때문입니다.)

 <!--屏幕背景变暗的背景 -->
 <view></view>
 <!--弹出框 -->
 <view>在这里写弹出框里面的布局</view>

4 클릭 이벤트를 설정하고 클릭 함수 showModal() 또는 hideModal(을 설정합니다. ) for the target view

이 글의 사례 등을 읽으신 후 방법을 마스터하셨다고 생각합니다. PHP 중국어 사이트의 다른 관련 글도 주목해주세요!

추천 자료:

Ajax에서 테이블의 tr 및 td를 동적으로 늘리는 방법

WeChat 애플릿의 캐러셀 이미지를 적응형 높이로 설정하는 방법

위 내용은 WeChat 애플릿에서 팝업 상자 기능을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!