vue及原生html实现列表无缝上下滚动，以及单行滚动

最新推荐文章于 2024-05-04 01:51:35 发布

wflynn

最新推荐文章于 2024-05-04 01:51:35 发布

阅读量1.9k

点赞数 1

分类专栏： vue html uniapp

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/106074199

版权

vue 同时被 3 个专栏收录

53 篇文章 1 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

uniapp

15 篇文章 1 订阅

订阅专栏

代码已上传至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>

wflynn

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue及原生html实现列表无缝上下滚动，以及单行滚动

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="it.
复制链接

扫一扫