极客观点
项目管理
HarmonyOS
1.mui scroll滑动失效，可以左右滑动实现tab切换，但是上下滑动，任一子选项卡皆不能滑动
2，代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>出差申请3</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/mui.picker.all.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.all.js"></script>
<script src="js/utility.js"></script>
<script src="js/vue.min.js"></script>
<style type="text/css">
body,html {
height: 100%;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
.dis-nav {
position: relative;
}
.mui-toast-container {
bottom: 50% !important;
}
.mui-bar-nav~.mui-content {
padding-bottom: 50px;
}
#projectInfo ul li {
border-bottom: none;
}
</style>
</head>
<body>
<div class="mui-content" id="maincontent">
<div class="mui-slider" id="slider">
<!--选项卡标题区-->
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">流程信息</a>
<a class="mui-control-item" href="#item2">流程图</a>
</div>
<div class="mui-slider-progress-bar mui-col-xs-6"></div>
<div class="mui-slider-group">
<!--第一个选项卡内容区-->
<div id="item1" class="mui-slider-item mui-control-content mui-active" >
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media cui-border-b">
<!--<img class="mui-media-object mui-pull-left" v-bind:src="'data:image/png;base64,'+photoData">-->
<div class="mui-media-body">
{{empData.NameCN}}
<p class='cui-g-c9 cui-size-12'>{{empData.PositionNameCN}} {{empData.Eid}}</p>
</div>
</li>
</ul>
<!--基本信息-->
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active">
<a class="mui-navigate-right" href="#">
<span class="title">基本信息</span>
</a>
<div class="mui-collapse-content">
<form class="mui-input-group">
<div id="CommonInfo" class="cui-bgc-0">
<div class="mui-collapse-content">
<ul>
<li>
<div class="text-outer">
<div class="text-mid">
<label>公司名称</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{empData.CompNameCN}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>部门</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{empData.DeptNameCN}}</label>
</div>
</div>
</li>
<li>
<div class="text-outer">
<div class="text-mid">
<label>员工编号</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{empData.Eid}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>姓名</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{empData.NameCN}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>岗位</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{empData.PositionNameCN}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>是否需要报销</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.Allowance?"是":'否'}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>公出预算</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.Budget}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>公出类型</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.LeaveTypeName}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>预计离开时间</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.PlanLeaveDate}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>预计回来时间</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.PlanReturnDate}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>预计出差天数</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.TripDay}}</label>
</div>
</div>
</li>
<li>
<div class="text-outer">
<div class="text-mid">
<label>公出事由</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.Descr}}</label>
</div>
</div>
</li>
<li>
<div class="text-outer">
<div class="text-mid">
<label>是否项目</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.IsProjectRequest ? '是':'否'}}</label>
</div>
</div>
</li>
<li v-if='detailData.IsProjectRequest'>
<div class="text-outer">
<div class="text-mid">
<label>项目经理</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.PMName}}</label>
</div>
</div>
</li>
<li v-if='detailData.IsProjectRequest'>
<div class="text-outer">
<div class="text-mid">
<label>项目预算员</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{detailData.BudgeterName}}</label>
</div>
</div>
</li>
<div v-if='isTimeKeeper'>
<li>
<div class="text-outer">
<div class="text-mid">
<label>实际离开时间</label>
</div>
</div>
<div class="form-info">
<button class="mui-btn mui-btn-block mui-icon mui-icon-arrowright mui-right timepicker btnDate" v-on:tap="DatePickerOnTap" type="button" data-datetype="StartTime">
{{detailData.ActualLeaveDate}}
</button>
</div>
</li>
<li>
<div class="text-outer">
<div class="text-mid">
<label>实际回来时间</label>
</div>
</div>
<div class="form-info">
<button class="mui-btn mui-btn-block mui-icon mui-icon-arrowright mui-right timepicker btnDate" v-on:tap="DatePickerOnTap" type="button" data-datetype="EndTime">
{{detailData. ActualReturnDate}}
</button>
</div>
</li>
<li>
<div class="text-outer">
<div class="text-mid">
<label>实际公出天数</label>
</div>
</div>
<div class="text-outer-r text-mid">
<input style='font-size: 12px;' id='' type="number" placeholder="请填写" v-model:value="detailData.ActualLeaveDay">
</div>
</li>
</div>
</ul>
<div class="cui-blank-10"></div>
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
<div class="cui-line"></div>
<div id="commonInfo" class="cui-bgc-0">
<div v-for="(item,index) in detailData.NewBusinessTripProjectDetail2">
<!--项目信息-->
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active">
<a class="mui-navigate-right" href="#">
<span class="title">项目信息{{index+1}}</span>
</a>
<div class="mui-collapse-content">
<form class="mui-input-group">
<div id="CommonInfo" class="cui-bgc-0">
<ul>
<li>
<div class="text-outer">
<div class="text-mid">
<label>项目名称<span>*</span></label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.ProjectName}}</label>
</div>
</div>
</li>
<li>
<div class="text-outer">
<div class="text-mid">
<label>预算金额<span>*</span></label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.ProjectBudget}}</label>
</div>
</div>
</li>
</ul>
</div>
</form>
</div>
</li>
</ul>
</div>
<div class="cui-line"></div>
</div>
</div>
<div id="commonInfo" class="cui-bgc-0">
<div v-for="(item,index) in detailData.NewBusinessTripDetail2">
<!--明细信息-->
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active">
<a class="mui-navigate-right" href="#">
<span class="title">明细信息{{index+1}}</span>
</a>
<div class="mui-collapse-content">
<form class="mui-input-group">
<div id="CommonInfo" class="cui-bgc-0">
<ul>
<li>
<div class="text-outer">
<div class="text-mid">
<label>出发日期</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.LeaveDate}}</label>
</div>
</div>
</li>
<li>
<div class="text-outer">
<div class="text-mid">
<label>到达日期</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.ReturnDate}}</label>
</div>
</div>
</li>
<li>
<div class="text-outer">
<div class="text-mid">
<label>出发地</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.From}}</label>
</div>
</div>
</li>
<li>
<div class="text-outer">
<div class="text-mid">
<label>目的地</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.To}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>交通工具</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.TransportName}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>机票</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.TicketCost}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>交通费</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.TransportCost}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>住宿费</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.HotelCost}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>招待费</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.GuestsCost}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>其他费用</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.OtherCost}}</label>
</div>
</div>
</li>
<li class="cui-border-none">
<div class="text-outer">
<div class="text-mid">
<label>补贴</label>
</div>
</div>
<div class="text-outer-r">
<div class="text-mid">
<label>{{item.Allowance}}</label>
</div>
</div>
</li>
</ul>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
<div class="cui-line"></div>
</div>
<!--明细合计-->
<div id="TotalDetail-att" class="cui-bgc-0">
<div class="cui-blank-10"></div>
<h3>明细合计</h3>
<input id='detailTotal' type="text" :value="detailData.Budget" readonly="readonly">
</div>
</div>
</div>
</div>
<!--第二个选项卡内容区-->
<div id="item2" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--流程图-->
<ul id="timeline">
</ul>
</div>
</div>
</div>
</div>
<nav class="mui-bar mui-bar-tab dis-nav" id="navBar" v-if="Audit=='true'">
<button type="button" class="mui-btn mui-icon mui-icon-checkmarkempty CommonProcessButton cui-border-r cui-c-green" onclick="Approve()">
<span>同意</span>
</button>
<button type="button" class="mui-btn mui-icon mui-icon-close CommonProcessButton cui-c-red" onclick="Reject()">
<span>驳回</span>
</button>
</nav>
</div>
</div>
<script type="text/javascript">
(function($) {
mui.init();
UserId = GetUserId();
UrlParam = GetRequest();
$.init();
var deceleration = mui.os.ios ? 0.003 : 0.0009,
hasNode = true; //审批信息完整性与否的flag，false不执行页面
mui('.mui-scroll-wrapper').scroll({
indicators: true, //是否显示滚动条
deceleration: deceleration //添加阻尼系数
});
})(mui);
</script>
</body>
</html>