vue插件 vue-seamless-scroll 无缝滚动
vue插件 vue-seamless-scroll 实现无缝滚动<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="
·
vue插件 vue-seamless-scroll 实现无缝滚动
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>值班人员信息</title>
<link rel="stylesheet" href="css/base.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="js/vue/dist/vue.js"></script>
<link rel="stylesheet" href="js/iview/dist/styles/iview.css">
<script src="js/iview/dist/iview.min.js"></script>
<script src="js/vue-seamless-scroll.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.user-list{
height:280px !important;
}
.user-list li{
margin-bottom:30px;
}
</style>
</head>
<body>
<div id="app" class="dp-item dp-item-2">
<div class="dp-item_center">
<div class="dp-tit" style="z-index: 999;">
<div class="dp-tit-btn btn3">
值班人员信息
</div>
</div>
<!-- 简介 -->
<div class="dp-center">
<vue-seamless-scroll :data="listItem" :class-option="classOption" class="warp">
<div v-for="(item,index) in listItem">
<ul id="user-data" class="user-list">
<li v-for="(list,i) in listItem[index]" >
<img v-bind:src="[webUrl + list.avatar]" width="130px" height="178px">
<p style="font-weight: 400;">{{list.name}}</p>
<p>{{list.position}}</p>
</li>
</ul>
</div>
</vue-seamless-scroll>
</div>
</div>
</div>
<script type="text/javascript">
var page = 1, pageSize = 1000;
var vm = new Vue({
el: '#app',
data: {
visible: false,
webUrl:"",
value1: 0,
setting: {
autoplay: true,
autoplaySpeed: 10*1000,
dots: 'none',
radiusDot: false,
trigger: 'click',
arrow: 'never'
},
classOption:{
step: 0,
limitMoveNum: 2,
direction: 1,
openWatch: true,
singleHeight: 280, //单条数据高度有值hoverStop关闭
waitTime: 10*1000 //单步停止等待时间
},
listItem:[]
},
mounted:function(){
this.show();
},
computed: {
},
methods: {
show: function () {
this.visible = true;
}
}
});
$(function(){
vm.webUrl = DOMIAN;
loadData();
var r_time = 60*60*1000;
setInterval(function(){
loadData();//每小时调用一次
},r_time);
setTimeout(function(){ vm.classOption.step = 2; }, 10*1000);
});
//回调函数
function callback(jsonData) {
//console.log("jsonpCallback: " + jsonData)
}
//根据当前时间获取拼接查询参数
function getWeekDay(){
var day = new Date();
var week = day.getDay();
var hour = day.getHours();
if(0 == week){
week = 7;
}
var h = "AM";//上午
if(hour>13){
h = "PM";//下午
}
var result = week + "_" + h;
return result;
}
//加载值班人员信息 (动态变化,根据值班安排设置加载)
function loadData(){
var week = getWeekDay();
$.ajax({
dataType:"jsonp",
async: false,
type: "POST",
url: DOMIAN + "/act/service/screen/getOnduty",
data: {"page":page,"pageSize":pageSize,"callback":"callback","time":week},
success: function(jsonData) {
if("SUCCESS" == jsonData.result){
if(jsonData.data){
var datas = jsonData.data;
if(datas){
vm.listItem = datas;
if(datas.length<=1){
vm.setting.autoplay = false;
}
}
}
}else{
alert("数据加载失败!");
}
}
});
}
</script>
</body>
</html>
更多推荐
已为社区贡献3条内容
所有评论(0)