위챗 애플릿 상품상세페이지 하단 팝업창 구현 방법

이번에는 위챗 미니 프로그램 제품 상세정보 페이지 하단에 팝업창을 구현하는 방법과, 위챗 미니 하단에 팝업창을 구현하기 위한 주의사항은 무엇인지 알려드리겠습니다. 프로그램 상품 상세페이지입니다. 실제 사례를 살펴보겠습니다.

1.js 코드(보통 대화상자를 표시하는 함수만 호출됩니다. 대화상자 외부를 클릭하면 대화상자가 사라질 수 있음)

//显示对话框
 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 코드

/*使屏幕变暗 */
.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 변수 in it js 코드의 데이터 객체에서 초기화하려면 초기에 대화 상자가 표시되지 않았기 때문에 false로 초기화하세요.)

 <!--屏幕背景变暗的背景 -->
 <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
 <!--弹出框 -->
 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">在这里写弹出框里面的布局</view>

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 도서:

vue에서 필터를 사용하는 방법

vue를 사용하여 dom의 클래스를 결정하는 방법

위 내용은 위챗 애플릿 상품상세페이지 하단 팝업창 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!