微信小程序实战篇-商品详情页（二）

最新推荐文章于 2024-07-18 22:07:15 发布

码农掘金

最新推荐文章于 2024-07-18 22:07:15 发布

阅读量1.6w

点赞数 7

分类专栏：微信小程序文章标签：微信小程序开发微信小程序电商小程序微信开发

本文链接：https://blog.csdn.net/u012927188/article/details/74745769

版权

本文介绍微信小程序中商品详情页的sku选择框实现，涉及CSS动画、模板复用和事件处理。讲解了position的absolute和fixed属性、transform的scale和translateY方法以及transition的使用。同时讨论了detail.wxml的模板引用、detail.wxss的样式设计和detail.js的事件监听。

摘要由CSDN通过智能技术生成

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

sku选着.png

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

代码的实现

1. detail.wxml

<import src="/template/quantity/index.wxml" />
  <!-- sku选择 -->
  <text bindtap="toggleDialog">请选择购买数量</text>
  <view class="dialog {
   { showDialog ? 'dialog--show' : '' }}">
    <view class="dialog__mask" bindtap="toggleDialog" />
    <view class="dialog__container">
      <view class="row">
         <image bindtap="closeDialog" class="image-close" src="../../images/detail/close.png"></image>
        <image class="image-sku" src="http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg"></image>
        <view class="column">
          <text class="sku-price">￥500</text>
          <text class="sku-title">库存20件</text>
           <text class="sku-title">商品编码：1456778788</text>
        </view>
      </view>
      <text class