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

最新推荐文章于 2024-03-08 16:02:34 发布

程序员顺溜

最新推荐文章于 2024-03-08 16:02:34 发布

阅读量765

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/Losthome/article/details/123054027

版权

微信小程序专栏收录该内容

22 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在获取服务列表和特征值列表完成后，需要把相关的信息呈现出来，这里采用一个弹窗界面，把服务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{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
}
/*遮罩层里面的文本输入框*/
.dialogMaskTextarea {
    width: 100%;
    height: 100%;
}


/* 内容层 */
.dialogContentView{
    height: 80%;
    width: 80%;
    /*设置弹出框在那一层，数值约大，越前面，设置内容层在弹出层的前面*/
    /* z-index: 9999; */
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #fff;
    border-radius:5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

在js文件中增加了一个点击内容层之外区域自动隐藏弹出窗的功能

dialogMashViewClick: function(e) {
        debug.Debug(BLECTR_MODUAL_NAME, debug.DEBUG_DEBUG, "dialogMashViewClick");
        // 点击内容层之外区域（遮罩层），隐藏弹出窗口
        this.data.dialogViewShowFlag = false;
        this.setData({['dialogViewShowFlag']: this.data.dialogViewShowFlag});
    },

最终的效果：