购物车弹窗自适应商品条数

目的

购物车列表用的是view作为容器，这样列表是不能在弹窗里滚动的，因此要将购物车弹窗改为scroll-view显示，并且高度自适应行数，直至一个max-height高度

改造

替换成，同时在样式表中为它增加一个高度height值。

bug

过程出现了一个bug，外部的商品列表上拉时再触发购物车弹窗会出现有白屏区块。

在wxml面板查看，发现是modal-mask层随着页面滚动而上移了

果断修改样式.modal-mask {position: absolute;}为.modal-mask {position: fixed;}

问题迎刃而解。

进一步改造

将高亮动态化，由wxss样式转移到.js代码中控制

1、先注释掉wxss中硬编码的height样式

/*弹窗主体*/
.modal-content {
    position: fixed;
    bottom: -235px;
    left: 0;
    width: 100%;
    /*height: 235px;*/
    margin-top: 5px;
    background: #fff;
    z-index: 99;
}
/*内容区域*/
.modal-body {
    font-size: 14px;
    /*height: 145px;*/
    max-height: 295px;
}

2、在js文件声明成员变量

// 最大行数
var max_row_height = 5;
// 行高
var cart_footer_offset = 90;
// 底部栏偏移量
var food_row_height = 49;

设定最大行数，是因为这个弹窗不能无限伸展，否则都盖过整个屏幕了；在最大行数以内，都应该自动适应高度。

3、计算高度值

// scrollHeight为商品列表本身的高度
var scrollHeight = (that.data.cartObjects.length <= max_row_height ? that.data.cartObjects.length : max_row_height) * food_row_height;
// cartHeight为整个购物车的高度，也就是包含了标题栏与底部栏的高度
var cartHeight = scrollHeight + cart_offset;
animation.translateY(- cartHeight).step();
that.setData({
    scrollHeight: scrollHeight,
    cartHeight: cartHeight
});

4、wxml绑定数据

...
        

到此不论购物车内有几条数据，都能很好的自适应；超过5条，开始滚动视图，大功告成。

源码下载：关注公众号【黄秀杰】，回复112。