微信小程序WeUI中half

微信小程序WeUI中half

需求：
如图需要从页面底部弹出一个弹框，弹框里的内容超出最大高度时，可以滚动。

问题：

1. 原生的组件关闭图标在左侧，需要通过样式改到右侧
2. 原生的组件底部有footer按钮区域，需要通过样式隐藏掉
3. 在弹框里使用区域滚动通过scroll-view 设置纵向滚动并给最大高度
4. 设置title
5. half-screen-dialog如果在子组件中引入，需要在pages父组件中的css文件里修改样式。在子组件中修改不生效

代码：

index.json

{"component": true,"usingComponents": {"compute-cart": "/components/computeCart","mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog"}
}

index.wxml

<mp-half-screen-dialog extClass='type-dialog' show="{{typeDialog}}" bindclose='toggleDialog'><view slot="title" style="text-align: left;"><text>{{dsName}} {{curGoodsSpec.spec}}</text></view><view class="model" slot="desc"><scroll-view class="scrollBox" scroll-y="true"><view class="" wx:for="{{curGoodsSpec.detailVos}}" wx:key="index"><view class="title">{{dsSpec}}<view class="bestOffer" wx:if="{{item.bestOfferLabel}}"><image src=".png" mode="widthFix" class="cheapestSingle"></image>单价最便宜</view></view><view class="goods-weight"><view class="goods-netWeight " style="margin-right: 24rpx;"><view class="weight-name {{item.isSelected ? 'goods-name-active' : ''}} {{curGoodsSpec.settlementType == 1 ? 'bordeRi' : ''}}">¥{{item.disSalePrice}}/件</view><view class="weight-num {{item.isSelected ? 'goods-num-active' : ''}}" wx:if="{{curGoodsSpec.settlementType !== 1}}">约¥{{itemUnitPrice}}/斤</view></view></view></view></scroll-view><!-- 合计 --><view class="footer"><view class="footer-all">共计：<text class="totalIcon">¥</text><text class="totalMoney"> {{alSpecAmount}}</text></view><view class=""><!-- 不在售卖时间显示加减数量 --><view class="{{dsStatus == 1 ? 'priceinfo' : ''}} {{dsStatus == 5 ? 'out-sale-cart-btn' : ''}}"><compute-cartquantity="{{curGoodsSpec.cartQty}}"cur-stock="{{curGoodsSpec.curStock}}"from="cartpageSpec"goods-key="{{dsKey}}"goods-status="{{dsStatus}}"multiple="{{curGoodsSpec.multiple}}"bind:cb="bindCartItemChange"></compute-cart></view></view></view></view>
</mp-half-screen-dialog>

index.js

methods: {bindCartItemChange(e) {this.setData({curGoodsKey: dsKey})GoodsSpecShow()},// 优惠加购toggleDialog(e) {this.setData({typeDialog: !peDialog,curGoodsKey: e.detail})if (peDialog) {GoodsSpecShow()}},getGoodsSpecShow() {let params_ = {goodsKey: this.data.curGoodsKey,merchantNo: wx.getStorageSync("merchantNo")}goodsSpecShow(params_).then(data => {if (data) {this.setData({curGoodsSpec: data})}})},}

index.wxss

.goods-weight .weight-num {color: #666;background: #fff;border-radius: 0rpx 4rpx 4rpx 0rpx;border: 1rpx solid #CFCFCF;padding: 9rpx 12rpx;
}
.scrollBox {max-height: 580rpx;
}
.scrollBox .title {font-size: 28rpx;font-weight: 400;color: #999999;margin-bottom: 16rpx;display: flex;
}
.model {border-top: 2rpx solid #EEEEEE;padding-top: 32rpx;
}
.footer {padding: 24rpx 32rpx 0 32rpx;border-top: 2rpx solid #EEEEEE;display: flex;justify-content: space-between;
}
.footer .footer-all {font-size: 24rpx;font-weight: 400;color: #666666;line-height: 34rpx;
}
.footer .totalIcon {font-size: 24rpx;font-weight: 400;color: #FF0B0B;line-height: 34rpx;
}
.footer .totalMoney {font-size: 40rpx;font-weight: 600;color: #FF0B0B;line-height: 56rpx;
}
.scrollBox {padding: 0 32rpx;
}.priceinfo {text-align: right;
}
.out-sale-cart-btn {position: relative;z-index: 20;
}
.bestOffer {font-size: 24rpx;font-weight: 400;color: #FF0B0B;line-height: 34rpx;display: flex;margin-left: 8rpx;
}
.goods-weight .goods-name-active {color: #FA4F13;border: 1rpx solid #E66F22;background: #fdd8cf;
}
.goods-weight .goods-num-active {color: #FA4F13;border: 1rpx solid #E66F22;border-left: 0;
}

弹窗样式只能写在pages父组件中

/* half-screen-dialog ui组件样式只能写在pages里 */.type-dialog .weui-half-screen-dialog__ft {display: none !important;
}
.type-dialog .weui-half-screen-dialog__bd {padding-bottom: 20px;
}
.type-dialog {padding: 0;
}
.weui-half-screen-dialog__hd {padding: 0 32rpx;
}
/* 隐藏更多按钮避免关闭点击偶尔失效 */
.weui-half-screen-dialog .weui-icon-btn_more{display: none !important;
}
.weui-icon-btn_close {position: absolute;right: -680rpx;
}
.weui-half-screen-dialog__hd__main {padding-left: 0 !important;
}

参考文章：
微信小程序WeUI中half-screen-dialog的小问题
WeUI官方组件库：助力小程序高效设计与开发官方