微信小程序商品详情页弹窗

最新推荐文章于 2025-10-13 08:28:29 发布

原创

最新推荐文章于 2025-10-13 08:28:29 发布 · 置顶 · 7.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #小程序弹窗 #商品详情页 #弹窗

本文探讨了如何在微信小程序中创建商品详情页面的弹窗功能。通过讲解关键代码和步骤，展示了如何实现在用户点击商品时，弹出包含详细信息的窗口，以提升用户体验。

 
  < 
  view 
  class= 
  "goods-detail-chooseCategory-title" 
  catchtap= 
  "normal" 
  data-statu= 
  "open" 
  > 
 
 
  <!-- { 
   {clickShowAlertState}} --> 
 
 
  < 
  view 
  class= 
  "goods-detail-chooseCategory-titleLeft" 
  >{ 
  {chooseCategoryTemp == null || currentChooseCategoryIndexTemp == -1 ?"选择"+goodsInfo.category:"已选:"+chooseCategoryTemp.category+" "+currentCategoryNumTemp+"个"}} 
  </ 
  view 
  > 
 
 
  < 
  view 
  class= 
  "goods-detail-chooseCategory-titleRight" 
  >> 
  </ 
  view 
  > 
 
 
  </ 
  view 
  > 
 

 
  <!--button--> 
 
 
  <!-- <view class="btn" >button</view> --> 
 
 
  <!--mask--> 
 
 
  <!-- <view class="drawer_screen" catchtap="showOrHideCategory" data-statu="close" wx:if="{ 
   {showModalStatus}}"></view> --> 
 
 
  <!--content--> 
 
 
  <!--使用animation属性指定需要执行的动画--> 
 
 
  < 
  view 
  animation= 
  "{ 
   {animationData}}" 
  class= 
  "category-box" 
  wx:if= 
  "{ 
   {showModalStatus}}" 
  > 
 
 
  < 
  view 
  class= 
  'category-box-inner' 
  > 
 
 
  <!--drawer content--> 
 
 
  < 
  view 
  class= 
  "category-box-top" 
  > 
 
 
  < 
  view 
  class= 
  'category-box-top-left' 
  > 
 
 
  < 
  image 
  class= 
  'category-box-top-icon' 
  ></ 
  image 
  > 
 
 
  < 
  view 
  class= 
  'category-box-top-left-center' 
  > 
 
 
  < 
  text 
  class= 
  'price' 
  >¥{ 
  {chooseCategoryTemp==null || currentChooseCategoryIndexTemp==-1?(goodsInfo.activesFlag == '0' ? goodsInfo.priceRange : goodsInfo.eventPriceRange):(goodsInfo.activesFlag == '0' ?chooseCategoryTemp.price:chooseCategoryTemp.eventPrice)}} 
  </ 
  text 
  > 
 
 
  < 
  text 
  >库存：{ 
  {chooseCategoryTemp == null || currentChooseCategoryIndexTemp == -1 ? goodsInfo.qty : chooseCategoryTemp.qty}} 
  </ 
  text 
  > 
 
 
  < 
  text 
  >{ 
  {chooseCategoryTemp==null || currentChooseCategoryIndexTemp==-1?"请选择"+goodsInfo.category:"已选:"+chooseCategoryTemp.category}} 
  </ 
  text 
  > 
 
 
  </ 
  view 
  > 
 
 
  </ 
  view 
  > 
 
 
  < 
  image 
  class= 
  'category-box-top-close' 
  catchtap= 
  "showOrHideCategory" 
  data-statu= 
  "x-close" 
  ></ 
  image 
  > 
 
 
  </ 
  view 
  > 
 
 
  < 
  view 
  class= 
  "category-box-content" 
  > 
 
 
  < 
  view 
  class= 
  ' category-box-content-category ' 
  > 
 
 
  < 
  text 
  class= 
  'category-box-content-category-text ' 
  >选择{ 
  {goodsInfo.category}} 
  </ 
  text 
  > 
 
 
  < 
  view 
  class= 
  'category ' 
  > 
 
 
  < 
  block 
  wx:for= 
  "{ 
   {goodsInfo.goodsc}}" 
  wx:for-index= 
  "index" 
  wx:for-item= 
  "item" 
  wx:key= 
  "id" 
  > 
 
 
  < 
  text 
  class= 
  "{ 
   {index==currentChooseCategoryIndexTemp?'category-text-yes':'category-text-no'}}" 
  catchtap= 
  'onCategoryItemChecked' 
  data-category-index= 
  '{ 
   {index}}' 
  data-category-item= 
  '{ 
   {item}}' 
  >{ 
  {item.category}} 
  </ 
  text 
  > 
 
 
  </ 
  block 
  > 
 
 
  </ 
  view 
  > 
 
 
  </ 
  view 
  > 
 
 
  < 
  view 
  class= 
  'category-buy' 
  > 
 
 
  < 
  text 
  >购买数量(起订量*{ 
  {goodsInfo.start_qty}}) 
  </ 
  text 
  > 
 
 
  < 
  view 
  class= 
  'category-number-view' 
  > 
 
 
  < 
  text 
  catchtap= 
  'categoryReduce' 
  >- 
  </ 
 