vue外掛 vue-seamless-scroll 無縫滾動
阿新 • • 發佈：2018-12-14
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>