微信小程序WeUI中half-screen-dialog底部弹窗相关问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序WeUI中half-screen-dialog底部弹窗相关问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：
如图需要从页面底部弹出一个弹框，弹框里的内容超出最大高度时，可以滚动。
mp-halfscreendialog,微信小程序,小程序,前端

问题：

原生的组件关闭图标在左侧，需要通过样式改到右侧
原生的组件底部有footer按钮区域，需要通过样式隐藏掉
在弹框里使用区域滚动通过scroll-view 设置纵向滚动并给最大高度
设置title
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>{{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;
}

弹窗样式只能写在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;
}