鲁达 1.使用场景：
在公司做的小程序，主要是提供线上购物使用。在购物车列表上，有这样一个场景，即当客人把衣服加购后一段时间，该衣服可能库存紧缺或是下架了，这时，我们需要在购物车项中，告诉客人该衣服已经下架，而不是让他下单结算时，才发现缺货。
因此，我需要做一个功能 ，在购物车上显示缺货样式。比如象如下界面：
如果通过自己对小程序WXML及CSS的了解和网上查阅的一些资料，最终实现了这样的效果：
现在，我们来说明一下过程：
第一步，我们来做WXML：
<view class=‘picturenoqty’>
<image src=‘{{item.productInfo.image}}’></image>
<view class=’spannoqty’>
<view class=’textnoqty’>缺货</view>
</view>
</view>
其实我们可以把view想象成html里的div，这样比较好理解盒子的概念。
第一行，我们定义一个盒子，如果是缺货时，就显示这个盒子（而不显示正常的盒子）;
第二行，我们显示图片;
第三行，我们显示白色半透明色块;
第四行，我们显示缺货字样（可以修改为无货）也可以。
如图：
第二步，我们来做CSS:
.picturenoqty{width: 160rpx ;height : 160rpx;}
.picturenoqty image{width: 100%;height : 100%: bondar raulus :6rpx;}
.picturenoqty .spannoqty{position: absolute; background: rgba(153, 153, 153, e.5);width: 160rpx ;haight :20px; left:0rpx; top: 80rpx;}
.picturenoqty .spannoqty .textnoqty{position: absolute; left:50rpx;color: . #fff; font- size:34rpx; top :3rpx}
第一行，我们定义了盒子的宽高，即图片外层
第二行，我们定义了图片的大小及圆角;
第三行，我们定义了色块底色及透明度等样式
第四行，我们定义了”缺货“字样的样式。
如图：
接着，我们把它套到程序里就实现了。
这里需要注意：
- 我们通过两个View来实现显示，一个view来显示底色块，一个view显示缺货字样（这样比较灵活）
- 我们通过在样式的 rgba(153, 153, 153, e.5)，表示了透明度，position: absolute表示了绝对定位