電商項目中商品詳情頁，加入購物車或者下單時可以選擇商品屬性的彈出框，通過設置view的平移動畫，達到從底部彈出的樣式

創新互聯建站堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站設計、做網站、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的啟東網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

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)
 }

當前文章：微信小程序商品詳情頁的底部彈出框效果-創新互聯
鏈接URL：http://vcdvsql.cn/article32/ddpipc.html

成都網站建設公司_創新互聯，為您提供App設計、小程序開發、軟件開發、域名注冊、動態網站、App開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯