提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Vue列表HTML 实现 以及 原生 无缝 滚动
2023-06-13 09:14:09 时间

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

相关文章