需求：
如圖需要從頁面底部彈出一個(gè)彈框，彈框里的內(nèi)容超出最大高度時(shí)，可以滾動(dòng)。

問題：

1. 原生的組件關(guān)閉圖標(biāo)在左側(cè)，需要通過樣式改到右側(cè)
2. 原生的組件底部有footer按鈕區(qū)域，需要通過樣式隱藏掉
3. 在彈框里使用區(qū)域滾動(dòng)通過scroll-view 設(shè)置縱向滾動(dòng)并給最大高度
4. 設(shè)置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>{{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>
              單價(jià)最便宜
            </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>
    <!-- 合計(jì) -->
    <view class="footer">
      <view class="footer-all">
        共計(jì)：<text class="totalIcon">￥</text><text class="totalMoney"> {{curGoodsSpec.totalSpecAmount}}</text>
      </view>
      <view class="">
        <!-- 不在售賣時(shí)間顯示加減數(shù)量 -->
        <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()
    },
    // 優(yōu)惠加購
    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;
}
/* 隱藏更多按鈕避免關(guān)閉點(diǎn)擊偶爾失效 */
.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官方組件庫：助力小程序高效設(shè)計(jì)與開發(fā)官方文章來源地址http://www.zghlxwxcb.cn/news/detail-763531.html

到了這里，關(guān)于微信小程序WeUI中half-screen-dialog底部彈窗相關(guān)問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！