微信小程序--禁止模态框底部滚动

最新推荐文章于 2024-07-20 12:45:20 发布

yjwu5353

最新推荐文章于 2024-07-20 12:45:20 发布

阅读量1.1k

点赞数

文章标签：微信小程序禁止模态框底部滚动

本文链接：https://blog.csdn.net/yjwu5353/article/details/80096759

版权

当模态框里的content滚动时，底部页面禁止滚动，原理主要是使用scroll-view 的scroll-y来控制，参考如下：

wxml文件

<scroll-view scroll-y="{{isScroll}}">

    <view class="rootView">

        <view class="inTable">

            <view wx:for="{{arrayData}}" wx:key="" class="unitItemLeft" bindtap="showDialog" data-statu="open">
                <input class="baseItemWithBorder" value="{{item}}"  disabled />
            </view>

            <!--测试弹窗-->
            <view class="dialogMarsk" bindtap="showDialog" data-statu="close" wx:if="{{isDialogShow}}"></view>
            <!--dialog-->
            <view class="dialog" wx:if="{{isDialogShow}}">

                <view class="appreciationTitle">
                    <text style="font-size:24px;">我是弹窗</text>
                </view>

                <view wx:for="{{dialogData}}" class="appreciationTable">
                    <view class="unitItemLeft">
                        <text class="baseItemWithBorder">{{item.name}}</text>
                    </view>
                </view>

            </view>

        </view>

    </view>

</scroll-view>

wxss文件

Page {
    /* background: #1baceb; */
    position: absolute;
    font-size: 36rpx;
    width: 100%;
    height: 100%;
    display: block;
    background: #FAFAFA;
    overflow-y: hidden;
}

scroll-view {
    height: 100%;
}

.rootView{
    /* width: 100%; */
    padding: 10rpx;
    display: flex;
    flex-direction: column;
}

.baseItemWithBorder{
    flex-grow: 1;
    height: 100%;
    padding-left: 20rpx;
    padding-right: 20rpx;
    border-bottom: 1px solid #cc3333;
}

.inTable{
    width: 100%;
    display: flex;
    box-shadow:5px 5px 10px gray;
    flex-direction: column;
    margin-top: 40rpx;
    background: white;
}

.inDetail{
    width: 100%;
    height: 80rpx;
    display: flex;
}

.unitLeft{
    justify-content: flex-start;
    padding-left: 20rpx;
}

.unitItemLeft{
    width: 100%;
    height: 80rpx;
    display: flex;
    flex-direction: row;
}

.dialogMarsk {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.dialog {
    width: 80%;
    height: 50%;
    position: fixed;
    top: 10%;
    z-index: 1001;
    background: #FAFAFA;
    border-radius: 3px;
    overflow-y: scroll;
}

.appreciationTable{
    width: 98%;
    display: flex;
    flex-direction: column;
    background: white;
    margin: 0 10rpx;
}

.appreciationTitle{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

js文件

Page({

    /**
     * 页面的初始数据
     */
    data: {

        arrayData: null,
        dialogData: null,
        isDialogShow: false,
        isScroll: true

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

        //构建测试数据
        let data = new Array();
        let dialog = new Array();
        for(let i = 0; i < 25; i++){
            data[i] = '我是测试-----------' + i;
            dialog[i] = {
                name: '我是弹窗-' + i,
                isSelected: false
            };
        }
        this.setData({
            arrayData: data,
            dialogData : dialog
        });
    },

    /**
     * 显示、关闭弹窗
     */
    showDialog: function (e) {
        var currentStatu = e.currentTarget.dataset.statu;
        console.log('currentStatu:', currentStatu);
        //关闭
        if (currentStatu == "close") {
            this.setData({
                isDialogShow: false,
                isScroll: true
            });
        }
        // 显示
        if (currentStatu == "open") {
            this.setData({
                isDialogShow: true,
                isScroll: false
            });
        }
    },


})