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

一人一花

已于 2024-03-10 17:44:07 修改

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： mui框架相关文章标签： mui popover 超出内容滚动加载

于 2019-05-16 18:04:38 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35500233/article/details/90268578

本文主要描述了在使用mui框架（v3.7.2）结合vue（v2.6.10）开发项目时，遇到mui-popover组件在内容超出屏幕高度后，移动端无法通过滑动查看下部内容的问题。通过分析，发现是mui.js拦截了touchmove事件。提出了两种解决方案：一是调整HTML结构并添加相应JS代码来启动滑动效果；二是直接修改mui.js源码，删除阻止滚动的部分。经过修改，实现了在移动端内容超出时可以正常滑动查看的效果。

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

我的项目整体是基于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-

最低0.47元/天解锁文章

200万优质内容无限畅学