vue插件 vue-seamless-scroll 无缝滚动

vue插件 vue-seamless-scroll 实现无缝滚动<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="

kenhins

3640人浏览 · 2018-10-08 16:23:37

kenhins · 2018-10-08 16:23:37 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^