Requirements:
As shown in the figure, a pop-up box needs to pop up from the bottom of the page. When the content in the pop-up box exceeds the maximum height, it can be scrolled.
question:
- The native component close icon is on the left, it needs to be changed to the right by style
- There is a footer button area at the bottom of the native component, which needs to be hidden by styling
- Use area scrolling in the pop-up box to set vertical scrolling through scroll-view and give the maximum height
- set title
- If half-screen-dialog is introduced in a child component, the style needs to be modified in the css file in the pages parent component. Modifications in subcomponents do not take effect
code:
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>{
{curGoodsSpec.goodsName}} {
{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">
{
{item.goodsSpec}}
<view class="bestOffer" wx:if="{
{item.bestOfferLabel}}">
<image src="https://retail.benlai.com/fortune/images/bazaar/cheapestSingle.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}}">约¥{
{item.netUnitPrice}}/斤</view>
</view>
</view>
</view>
</scroll-view>
<!-- 合计 -->
<view class="footer">
<view class="footer-all">
共计：<text class="totalIcon">¥</text><text class="totalMoney"> {
{curGoodsSpec.totalSpecAmount}}</text>
</view>
<view class="">
<!-- 不在售卖时间显示加减数量 -->
<view class="{
{curGoodsSpec.goodsStatus == 1 ? 'priceinfo' : ''}} {
{curGoodsSpec.goodsStatus == 5 ? 'out-sale-cart-btn' : ''}}">
<compute-cart
quantity="{
{curGoodsSpec.cartQty}}"
cur-stock="{
{curGoodsSpec.curStock}}"
from="cartpageSpec"
goods-key="{
{curGoodsSpec.goodsKey}}"
goods-status="{
{curGoodsSpec.goodsStatus}}"
multiple="{
{curGoodsSpec.multiple}}"
bind:cb="bindCartItemChange">
</compute-cart>
</view>
</view>
</view>
</view>
</mp-half-screen-dialog>
index.js
methods: {
bindCartItemChange(e) {
this.setData({
curGoodsKey: e.detail.goodsKey
})
this.getGoodsSpecShow()
},
// 优惠加购
toggleDialog(e) {
this.setData({
typeDialog: !this.data.typeDialog,
curGoodsKey: e.detail
})
if (this.data.typeDialog) {
this.getGoodsSpecShow()
}
},
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;
}
The pop-up window style can only be written in the pages parent component
/* 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;
}
Reference article:
Small problem of half-screen-dialog in WeChat applet WeUI
Official component library of WeUI: Helping the efficient design and development of applets Official