参照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);
}
})
})