vue生成的H5页面怎么实现左右滑动本人引用的swiper

weixin_40883185 2017-11-23 01:21:11

<html data-dpr="1" class="pixel-ratio-1" style="font-size: 54px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta content="email=no" name="format-detection">
<meta name="format-detection" content="telephone=no">
<title>我的订单</title>
<link rel="stylesheet" type="text/css" href="css/weui.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-weui.min.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/wodedingdan.css">
<script src="lib/jquery-2.2.2.min.js"></script>
<script src="lib/vue.js"></script>

<script src="lib/flexible.js"></script>
<script src="lib/iscroll-5.2.0.js"></script>
</head>
<body style="background: rgb(239, 239, 244); font-size: 12px;">

<div class="weui-tab swiper-container">

<div class="weui-navbar">
<a onclick="switchOrderList(this,-1);" id="quanbuBut" class="weui-navbar__item weui-bar__item--on ulBut" href="http://admin.liangyizaixian.com/web/h5/user/menu/orderList?nodeOpenId=o3Yk8wQlBuzSHMuyaFrJZ3p4bBBY&code=021EIHuG0WVfJk2YYzsG0iXHuG0EIHuW&state=STATE#quanbu">
全部
</a>
<a onclick="switchOrderList(this,1);" id="daifuBut" class="weui-navbar__item ulBut" href="javascript:;">
待付款
</a>
<a onclick="switchOrderList(this,3);" id="daishouBut" class="weui-navbar__item" href="javascript:;">
待收货
</a>
<a onclick="switchOrderList(this,4);" id="wanchengBut" class="weui-navbar__item" href="javascript:;">
已完成
</a>
<a onclick="switchOrderList(this,5);" id="quxiaoBut" class="weui-navbar__item" href="javascript:;">
取消
</a>
</div>
<div class="swiper-wrapper">

<div id="order_list_div" class="swiper-slide weui-tab__bd">
<div id="quanbu" class="weui-tab__bd-item weui-tab__bd-item--active" style="touch-action: none;">
<div id="quanbuCon" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
<div class="null">
<dl>
<dt></dt>
<dd>该状态下暂无订单</dd>
</dl>
</div>
<div id="loadQuanbu" class="weui-loadmore" style="display: none;">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="lib/swiper.js"></script>
<script>
var swiper = new Swiper('.swiper-container',{
mousewheelControl:true
});
</script>
<script>
var quanbuScroll,daifuScroll,daishouScroll,wanchengScroll,quxiaoScroll;
var orderTask = "ORDER_LIST";//全局场景值
var nodeOpenId = 'o3Yk8wQlBuzSHMuyaFrJZ3p4bBBY';
var coreOpenId = '';
var orderListUrl = "/api/h5/order";
var vue;
var currentStatus;//全局的订单状态
window.onload=function(){
//发送异步请求,填充数据
var resultData = getOrderList(orderTask,coreOpenId,nodeOpenId,1);
var dataArray = resultData.data;
vue = new Vue({
el: '#order_list_div',
data: {
orderList: dataArray
},
methods:{
queryLogisticsInfo:function(orderNO){
window.location="/api/h5/queryLogisticsInfo?coreOpenId="+coreOpenId+"&nodeOpenId="+nodeOpenId+"&orderNO="+orderNO;
},
toPay:function(orderId){
window.location="/h5/order/topay?orderId="+orderId;
},
confirmGetGoods: function (index, orderNo) {
//确认收货
$.confirm({
title: '确认收货',
text: '需要确认收货吗？',
onOK: function () {
//点击确认
sendConfirmGetGoodsRequest(index, orderNo);
},
onCancel: function () {
}
});
}
},updated:function(){
quanbuScroll.refresh();
}
});
}

function sendConfirmGetGoodsRequest(index, orderNo) {
$.post({
url: "/web/h5/confirmGetGoods",
dataType: "json",
type: "post",
data: "orderNo=" + orderNo,
beforeSend: function () {
$.showLoading();
},
success: function (e) {
$.hideLoading();
if (e.status == 'ok') {
$.toast("操作成功");
vue.orderList[index].currentStatus = 4;
} else {
$.toast("操作失败", "cancel");
}
},
error: function () {
$.hideLoading();
$.toast("操作失败", "cancel");
}
});
}
function switchOrderList(obj,_currentStatus){
if(_currentStatus == -1){
currentStatus="";
}else{
currentStatus=_currentStatus;
// obj.parent().siblings().children().addClass('swiper-slide');
}
//发送异步请求,填充数据
var resultData = getOrderList(orderTask,coreOpenId,nodeOpenId,1);
var array = resultData.data;
vue.orderList=array;
//切换标签的class weui-btn_primary weui-btn_default
$(obj).addClass('weui-bar__item--on')
.siblings().removeClass('weui-bar__item--on');
}
function getOrderList(task,coreOpenId,nodeOpenId,num){
var resultData;
$.ajax({
url: orderListUrl,
async: false,
type: 'POST',
data: {"task" : task,"coreOpenId":coreOpenId,"nodeOpenId" : nodeOpenId,"currentStatus":currentStatus,"pageNo":num},
cache:false,
dataType:'json',
success: function(json) {
resultData = json;
}
});
return resultData;
}
function toDetail(obj){
window.location="/web/h5/toOrderDetail?nodeOpenId="+nodeOpenId+"&orderNO="+$(obj).attr("id");
}
</script>
<script src="lib/jquery-weui.min.js"></script>
<script src="js/wodedingdan.js"></script>
</body>
</html>

...全文