微信小程序实战篇-商品详情页(二)

今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~


微信小程序实战篇-商品详情页(二)_第1张图片
sku选着.png

这个布局难点是需要绘制一个阴影背景、弹出的动画、购买数量加减的逻辑以及图片如何高于弹出框

代码的实现

  1. detail.wxml

  
  请选择购买数量
  
    
    
      
         
        
        
          ¥500
          库存20件
           商品编码:1456778788
        
      
      
      
        购买数量