WeChat Mini 프로그램의 상품 상세 페이지에 팝업 상자를 추가하는 방법

이번에는 위챗 미니 프로그램 상품 상세 페이지에 팝업 상자를 추가하는 방법을 알려드리겠습니다. 위챗 미니 프로그램 상품 상세 페이지에 팝업 상자를 추가할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다. 전자상거래 프로젝트의

제품 세부정보

페이지에서 장바구니에 담거나 주문할 때 제품 속성 팝업 상자를 선택할 수 있습니다. 아래에서 위로 스타일을 얻을 수 있습니다 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 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 class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
 <!--弹出框 -->
 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">在这里写弹出框里面的布局</view>

4 클릭 이벤트를 설정하고 클릭 함수 showModal( ) 또는 hideModal()을 사용하여 대상 보기를

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS 디자인 패턴의 체인 호출 사용 분석

vue-cli 프로젝트에 배경 모의 인터페이스를 추가하는 단계에 대한 자세한 설명

위 내용은 WeChat Mini 프로그램의 상품 상세 페이지에 팝업 상자를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!