8***@qq.com
8***@qq.com
  • 发布:2018-03-06 15:40
  • 更新:2021-03-01 08:39
  • 阅读:3001

MUI 下滑刷新上拉加载后,侧滑删除按钮点击无反应 失效

分类:MUI

参照demo做了下滑刷新和上拉加载,想在这个基础上再加上侧滑删除按钮, 删除按钮可以显示,但是删除按钮点击后无反应。很迷茫啊。。。。。。。。。。。。。。
下面是代码
<div class="mui-content" id="news">
<!--列表信息流 开始-->
<div id="list" class="mui-scroll-wrapper ">
<div class="mui-scroll ">
<ul id='OA_task' class="mui-table-view ">
<li class="mui-table-view-cell mui-media " v-for="item in items">
<a href="javascript:;" :data-guid="item.guid" @tap="open_detail(item)">
<img class="mui-media-object mui-pull-left " :src="item.cover">
<div class="mui-media-body ">
<div class="mui-ellipsis-2 ">{{item.content}}</div>
</div>
<div class="meta-info ">
<div class="author ">{{item.workdate}}</div>
<div class="time mui-slider-handle">{{item.status}}</div>
</div>
</a>
<div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-red">删除</a>
</div>
</li>
</ul>
</div>
</div>
<!--列表信息流 结束-->
</div>
<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
var lastId = '',
minId = ''; //最新新闻的id
var webview_detail = null; //详情页webview
var titleNView = { //详情页原生导航配置
backgroundColor: '#f7f7f7', //导航栏背景色
titleText: '', //导航栏标题
titleColor: '#000000', //文字颜色
type: 'transparent', //透明渐变样式
autoBackButton: true, //自动绘制返回箭头
splitLine: { //底部分割线
color: '#cccccc'
}
}

        //mui初始化,配置下拉刷新  
        mui.init({  
            pullRefresh: {  
                container: '#list',  
                down: {  
                    style: 'circle',  
                    offset: '0px',  
                    auto: true,  
                    callback: pulldownRefresh  
                },  
                up: {  
                    contentrefresh: '正在加载...',  
                    callback: pullupRefresh  
                }  
            },  
            gestureConfig: { //手势开启  
                doubletap: true,  
                longtap: true,  
                swipe: true,  
                tap: true  
            }  
        });  

            mui('.OA_task').on('tap', '.mui-btn', function(event) {  

            plus.nativeUI.toast('btn tap');  
            event.preventDefault();  
            plus.nativeUI.toast('btn tap');  
            var elem = this;  
            var li = elem.parentNode.parentNode;  
            mui.confirm('确认删除该条记录?', 'Hello MUI', btnArray, function(e) {  
                if(e.index == 0) {  
                    li.parentNode.removeChild(li);  
                } else {  
                    setTimeout(function() {  
                        $.swipeoutClose(li);  
                    }, 0);  
                }  
            })  
        })  

2018-03-06 15:40 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com (作者)

自己顶一下。 关于拉下刷新和侧滑删除功能的集成。

8***@qq.com

8***@qq.com (作者)

求助大神帮忙看下

shenxiaodi

shenxiaodi

加上这一句:

btnArray = ['确认' , '取消'];

最终这样写:

mui('.OA_task').on('tap', '.mui-btn', function(event) {  

        plus.nativeUI.toast('btn tap');      
        event.preventDefault();      
        plus.nativeUI.toast('btn tap');      
        var elem = this;      
        var li = elem.parentNode.parentNode;      
        mui.confirm('确认删除该条记录?', 'Hello MUI', btnArray, function(e) {      
            if(e.index == 0) {      
                li.parentNode.removeChild(li);      
            } else {      
                setTimeout(function() {      
                    $.swipeoutClose(li);      
                }, 0);      
            }      
        });    
btnArray = ['确认' , '取消'];

该问题目前已经被锁定, 无法添加新回复