12_微信小程序-BLE低功耗蓝牙开发-自定义弹窗界面

最新推荐文章于 2025-04-24 21:45:02 发布

原创

最新推荐文章于 2025-04-24 21:45:02 发布 · 864 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文详细介绍了在微信小程序中如何通过自定义组件实现弹窗功能，包括解决页面可滑动问题、单击事件穿透以及输入框事件穿透等常见问题。通过设置特定的WXML和WXSS样式，以及在JS文件中处理点击事件，成功创建了一个具备遮罩层和内容层的弹出框，并在点击遮罩层时自动关闭弹出窗。

在获取服务列表和特征值列表完成后，需要把相关的信息呈现出来，这里采用一个弹窗界面，把服务ID和特征值ID显示出来。微信小程序的原生弹窗不能满足需求，这里只有自定义弹窗窗界面了。

wxml代码：

<!--弹出框-->
<!--要加上catchtouchmove="dialogViewTouchMove"，否则页面可滑动-->
<view class="dialogView" catchtouchmove="dialogViewTouchMove" wx:if="{
  
  {dialogViewShowFlag}}">
    <!--遮罩，用来处理弹出框之外区域的点击事件，并且防止点击事件穿透-->
    <view class="dialogMaskView" catchtap="dialogMashViewClick">
        <!--文本输入框遮罩，防止弹出框底层有文本框，输入事件就直接穿透过去了-->
        <textarea class="dialogMaskTextarea" disabled="{
  
  {true}}"></textarea>
    </view>
    <!--弹出内容-->
    <view class="dialogContentView">
        <text>弹出内容、弹出内容</text>
        <button bindtap="dialogContentButtonClick">按钮</button>
    </view>
</view>

wxss代码:

/*弹出框样式*/
.dialogView {
    width: 100%;
    height: 100%;
    /*设置弹出框在那一层，数值约大，越前面*/
    z-index: 9998;
}
/* 遮罩层 */
.dialogMaskView{
    wi

最低0.47元/天解锁文章