代码已上传至github
github代码地址:https://github.com/Miofly/mio.git
vue版本
npm i vue-seamless-scroll -S
<template>
<vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp ">
<ul class="item">
<li v-for="item in listData">
<span class="title" v-text="item.title"></span>
<span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
vueSeamlessScroll
},
computed: {
optionHover () {
return {
hoverStop: true, // 鼠标悬停停止滚动
direction: [0, 1][0], // 向下/上滚动
step: 0.5, // 滚动速度
// singleHeight: 20, // 滚动单行
// waitTime:2500 单行停顿时间
}
}
},
data() {
return {
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}]
}
}
}
</script>
<style lang="scss" scoped>
.seamless-warp {
height: 229rpx;
overflow: hidden;
}
</style>
html版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-touch-fullscreen content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
<meta name=format-detection content="telephone=no">
<meta name=format-detection content="email=no">
<meta name=renderer content=webkit>
<meta name=screen-orientation content=portrait>
<meta name=x5-orientation content=portrait>
<meta name=x5-fullscreen content=true>
<meta name=full-screen content=yes>
<meta name=keywords content="">
<meta name=description content="">
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://192.168.3.193:8888/mio/src/html/index.css"/>
<script type="text/javascript" src="http://192.168.3.193:8888/mio/src/html/js/common/vue.js"></script>
<script type="text/javascript" src="http://192.168.3.193:8888/mio/src/html/js/common/axios.js"></script>
<script type="text/javascript" src="http://192.168.3.193:8888/mio/src/html/js/common/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://192.168.3.193:8888/mio/src/html/js/common/htmlToolUtils.js"></script>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 375) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
}
var html = document.getElementsByTagName('html')[0];
var settedFs = settingFs = parseInt(100 * (clientWidth / 375));
var whileCount = 0;
while (true) {
var realFs = parseInt(window.getComputedStyle(html).fontSize);
var delta = realFs - settedFs;
//不相等
if (Math.abs(delta) >= 1) {
if (delta > 0)
settingFs--;
else
settingFs++;
html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
} else
break;
if (whileCount++ > 100)
break
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<script type="text/javascript" src="http://192.168.3.193:8888/mio/src/html/js/common/vue-scroll.js"></script>
</head>
<body style="font-size: 0.05rem">
<div id="app">
<vue-seamless-scroll :data="listData" :class-option="optionHover" class="notClick of-hide margin-top" style="height: 1rem">
<ul>
<li v-for="item in listData" style="font-size: 0.1rem">
<span style="font-size: 0.15rem" v-text="item.title"></span>
<span style="font-size: 0.15rem" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
<script>
var app = new Vue({
el: '#app',
components: {
vueSeamlessScroll
},
computed: {
optionHover () {
return {
hoverStop: true, // 鼠标悬停停止滚动
direction: [0, 1][0], // 向下/上滚动
step: 0.4, // 滚动速度
// singleHeight: 20, // 滚动单行
// waitTime:2500 单行停顿时间
}
}
},
data() {
return {
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}]
}
}
})
</script>
</body>
</html>