mui中使用 mui-popover遇到的问题及解决方法

我的项目整体是基于mui(v3.7.2)框架实现的,同时使用了vue(v2.6.10)框架来给界面绑定数据。
具体的界面如下
在这里插入图片描述
点击页面的按钮,弹出下面这个界面。
我的html代码如下:

<div id="cardContent" class="card-content mui-popover mui-popover-bottom mui-popover-action" data-disable-auto-close="true">
        <p><span class="line"></span><span class="card-text">AAAAA</span><span class="line right-line"></span></p>
        <div>
            <ul class="mui-table-view">
                <li class="choose-ques" v-for="item in cardList">
                    {{item.text}}
                </li>
            </ul>
        </div>
    </div>

js代码:

$(document).on('tap', '.test-card', function(){
	mui('#cardContent').popover('toggle');
});

下面是css样式:

.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after {
    height: 0px;
}

.mui-popover .mui-table-view {
    background-color: #fff;
    border-radius: 0px;
}

.card-content {
    background-color: #fff !important;
    padding-top: 15px;
    height: 200px;
    display:none;
}

    .card-content p {
        text-align: center;
        height:21px;
    }

.line {
    height: 1px;
    width: 45px;
    background-color: #F3F3F3;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.right-line {
    margin-right: 0px;
    margin-left: 8px;
}

.card-content ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 12px;
    padding-bottom:25px;
    overflow:scroll !important;
    height:165px !important;
    max-height:165px !important;
    position:absolute !important;
    overflow:auto !important;
}

    .card-content ul li {
        width: 33px;
        height: 48px;
        line-height: 48px;
        background-color: #fff;
        color: #969696;
        text-align: center;
        display: inline-block;
        padding: 0px;
        border: 1px solid #F3F3F3;
        border-top: 0px;
        border-radius: 0px !important;
        margin: 11px;
        box-shadow: 2px 2px 1px #F3F3F3;
    }

理想的效果是,当里面的内容超出当前页面的高度时,在移动端是可以通过滑动手势,显示下面的内容,在浏览器端滚动鼠标是可以浏览下面的内容的,但是在移动端它就是滑动不了(手指滑动没有反应)。

下面有两种实现方式:
第一种修改Html结构

将html代码换为下面这样:

<div id="bottomPopover" class="mui-popover mui-popover-bottom">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						滑动显示的数据
					</ul>
				</div>
			</div>
		</div>

改成这样之后,你需要在界面中加入如下js代码来启动滑动的效果。

mui('.mui-scroll-wrapper').scroll();

第二种的方法:
修改原生的js代码
最后在网上查阅资料,发现说是mui.js将popover里的touchmove事件给拦截了,所以内容是不允许滑动(滚动)的
具体实现如下:

var onPopoverShown = function(e) {
this.removeEventListener('webkitTransitionEnd', onPopoverShown);
this.addEventListener($.EVENT_MOVE, $.preventDefault);
$.trigger(this, 'shown', this);
}

我用的是压缩之后的js代码,找到EVENT_MOVE,删掉了那一段js如图所示:
在这里插入图片描述
之后当数据超出当前容器高度时就可以滑动显示了

  • 0
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 5

打赏作者

一人一花

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值