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

php中世界最好的语言
풀어 주다: 2018-06-02 10:22:41
원래의
3774명이 탐색했습니다.

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿