微信小程序学习之自定义对话框、底部弹出框（总结）

在Android开发中，经常需要我们自定义对话框或者底部弹出框，用于满足客户的需求。在微信小程序中，也是如此。

一、自定义对话框

（1）列表形式。

WXML文件代码如下：

<!-- 支付方式对话框 -->

<view class="fadeIn" wx:if="{{isShowPayTypeDialog}}">

  <view class="weui-mask"></view>

  <view class="weui-dialog">

    <text class="border_bottom p_item_h font_size_30" bindtap="dialogItemClick" data-index="0">线上支付</text>

    <text class="p_item_h font_size_30 border_bottom" bindtap="dialogItemClick" data-index="1">线下支付</text>

    <text class="p_item_h font_size_30 font_color_gray" bindtap="dialogItemClick" data-index="-1">取消</text>

  </view>

</view>

JS文件代码如下：

  /* 选择支付方式 */

  dialogItemClick: function (event) {

    var index = parseInt(event.currentTarget.dataset.index);

    if (index >= 0) {

      this.setData({payType: this.data.payTypeList[index]});

    }

    this.setData({isShowPayTypeDialog: false});

    this.setData({isShowInput: true});

  },

 

  /* 显示选择支付方式对话框 */

  showPayTypeDialog: function (params) {

    this.setData({isShowPayTypeDialog: true});

    this.setData({isShowInput: false});

  },

 

二、自定义底部弹出框

WXML文件代码如下：

<!-- 自定义底部弹出框 -->

<view class="fadeIn" wx:if="{{isShowBottomSheet}}">

  <view class="weui-mask" bindtap="close"></view>

    <view class="weui-half-screen-dialog bg_white" style="padding-bottom: 120rpx;">

      <view class="weui-half-screen-dialog__hd__main">

        <view class="container_v">

          <!-- 价格、数量 -->

          <view class="container_h border_bottom sheetdialog_layout_info align_center">

            <view class="grow_0">

              <image src="/images/dangao1.jpg" style="width: 120rpx; height: 120rpx;"></image>

            </view>

            <view class="container_v grow_1" style="height: 120rpx; padding-left: 20rpx">

              <text class="sheetdialog_layout_info_price">￥168</text>

              <text class="sheetdialog_layout_info_num">库存：10件</text>

            </view>

            <view class="grow_0">

              <image src="/images/icon_close.png" style="width: 30rpx; height: 30rpx;" bindtap="hideBottomSheet"></image>

            </view>

          </view>

          <!-- 规格尺寸 -->

          <view class="container_v border_bottom">

            <text style="font-size: 30rpx;padding-top: 20rpx;">尺寸</text>

            <view class="container_h" style="font-size: 30rpx;padding-top: 20rpx;padding-bottom: 40rpx;">

              <text class="{{typeSizeIndex === 0 ? 'text_type_select':'text_type'}}" bindtap="onTypeSizeSelect" data-index="0">8寸加高乳脂</text>

              <text class="{{typeSizeIndex === 1 ? 'text_type_select':'text_type'}}" style="margin-left: 30rpx;" bindtap="onTypeSizeSelect" data-index="1">8寸加高乳酸菌</text>

            </view>

          </view>

          <!-- 数量 -->

          <view class="container_h align_center" style="font-size: 30rpx;padding-top: 40rpx;padding-bottom: 40rpx;">

            <text class="grow_1">数量</text>

            <!-- 加减模块 -->

            <view class="container_h grow_0">

              <view class="tv_num_ar" bindtap="numReduce">

                <text>-</text>

              </view>

              <view class="tv_num">

                <text>{{orderNum}}</text>

              </view>

              <view class="tv_num_ar" bindtap="numAdd">

                <text>+</text>

              </view>

            </view>

            <text class="grow_0 btn_order" bindtap="selectTypeComplete">确定</text>

          </view>

        </view>

      </view>

    </view>

</view>