首页 > 其他分享 >28.无缝滚动(默认向上滚动)

28.无缝滚动(默认向上滚动)

时间:2023-07-06 16:00:14浏览次数:37  
标签:12 滚动 title 28 2022 date 无缝

vue-seamless-scroll使用手册:https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/properties.html 步骤一:git bash输入:npm install vue-seamless-scroll --save 步骤二:main.js全局注册

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

步骤三:组件中使用

<template>
  <vue-seamless-scroll :data="listData" class="warp">
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <span class="title" v-text="item.title"></span>
        <span class="date" v-text="item.date"></span>
      </li>
    </ul>
  </vue-seamless-scroll>
</template>
<script>
  export default {
    data () {
      return {
        listData: [{
          'title': '1.无缝滚动第一行',
          'date': '2022-12-16'
        }, {
          'title': '2.无缝滚动第二行',
          'date': '2022-12-17'
        }, {
          'title': '3.无缝滚动第三行',
          'date': '2022-12-18'
        },{
          'title': '4.无缝滚动第四行',
          'date': '2022-12-19'
        }, {
          'title': '5.无缝滚动第五行',
          'date': '2022-12-20'
        }, {
          'title': '6.无缝滚动第六行',
          'date': '2022-12-21'
        }],
      }
    },
  }
</script>
<style lang="scss" scoped>
  .warp {
    height: 270px;
    width: 360px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,
      a {
        display: block;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    }
  }
</style>

 

补充:常用配置项

<template>
  <vue-seamless-scroll :data="listData" class="warp" :class-option="classOption>
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <span class="title" v-text="item.title"></span>
        <span class="date" v-text="item.date"></span>
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
export default {
    data () {
        return {
            classOption: {
                direction: 1, //direction方向: 0 向下、1 向上、2 向左、3 向右
                step: 1, //step速度:数值越大速度滚动越快。list为30条,step必须为30的约束,否则无法保证结束的位置是否正确
                hoverStop: false, //禁用鼠标悬停停止
                singleHeight: 30, //单步停顿
                waitTime: 0, //单步停止等待时间(默认值 1000ms)
                openTouch: false //移动端开启 touch 滑动
            }
        }
    },
}
</script>

 

 

标签:12,滚动,title,28,2022,date,无缝
From: https://www.cnblogs.com/chenJieLing/p/17532417.html

相关文章

  • macOS Sonoma 14 beta 3 (23A5286g) ISO、IPSW、PKG 发布下载
    macOSSonoma14beta3(23A5286g)ISO、IPSW、PKG下载,7月5日(北京时间今日凌晨)已发布本站下载的macOS软件包,既可以拖拽到Applications(应用程序)下直接安装,也可以制作启动U盘安装,或者在虚拟机中启动安装。另外也支持在Windows和Linux中创建可引导介质。请访问原文链......
  • macOS Sonoma 14 beta 3 (23A5286g) Boot ISO 原版可引导镜像下载
    macOSSonoma14beta3(23A5286g)BootISO原版可引导镜像下载,7月5日(北京时间今日凌晨)已发布本站下载的macOS软件包,既可以拖拽到Applications(应用程序)下直接安装,也可以制作启动U盘安装,或者在虚拟机中启动安装。另外也支持在Windows和Linux中创建可引导介质。请访......
  • element-ui的el-dialog主体滚动的小技巧
    一.场景element-ui的el-dialog的主体内容变多的时候,应该需要滚动条,所以解决方式:局部/全局设置样式;el-dialog源码改造。注意:看完了解思路,掌握max-height和overflow:auto的联合使用,el-scroll的使用即可二.方案一仅针对el-dialog__body的部分做处理,max-height:可以让内容......
  • 直播源码开发,文字垂直滚动、纵向走马灯
    直播源码开发,文字垂直滚动、纵向走马灯方法一、使用系统控件ViewFlipper方式:布局文件: <ViewFlipper    android:id="@+id/view_flipper"    android:layout_width="300dp"    android:layout_height="35dp"    android:layout_centerInParen......
  • POJ 3728 The merchant
    题意好像不清楚:给定一棵\(n​\)个点的树,每个点有点权\(val_i​\),现在有\(q​\)个询问,每次询问给出\(u,v​\),设\(u​\)到\(v​\)的路径上的点编号为\(a_1,a_2\cdotsa_{len}​\),求\(\max\limits_{1\lex<y\lelen}{val_{a_y}-val_{a_x}}​\)。因为\(x,y\)有顺......
  • 记录--组件库的 Table 组件表头表体是如何实现同步滚动?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在使用Vue3组件库NaiveUI的数据表格组件DataTable时碰到的问题,NaiveUI的数据表格组件DataTable在固定头部和列的示例中,在键盘操作下表格横向滚动会有问题,本文是记录下解决问题的过程,并最后向Naiv......
  • 车灯IC AP2813 平均电流型双路降压恒流驱动芯片
    产品描述 AP2813是一款双路降压恒流驱动器,高效率、外围简单、内置功率管,适用于5-80V输入的高精度降压LED恒流驱动芯片。内置功率管输出最大功率可达12W,最大电流1.2A。AP2813一路直亮,另外一路通过MODE1切换全亮,爆闪。AP2813工作频率固定在150KHZ左右,同时内置抖频......
  • 关于滚动条样式
     美化滚动条样式,主要涉及以下几个伪元素属性(注,这里以chrome浏览器作示例)::-webkit-scrollbar 用于设置滚动条的整体样式在这里设置宽高,以控制滚动条尺寸,且必须要设置宽高,否则不生效宽高分别对应y轴和x轴的滚动条尺寸若宽高为0,则可隐藏滚动条,但仍可保持滚动  ......
  • 前端Vue自定义精美上下滚动通告栏组件 常用于展示公告信息 上下滚动跑马灯 上下滚动广
    前端Vue自定义精美上下滚动通告栏组件常用于展示公告信息上下滚动跑马灯上下滚动广播,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13318效果图如下:cc-noticeBar使用方法<!--默认颜色#333公告栏--><viewclass="header">默认颜色......
  • 28.拷贝初始化和直接初始化
    ●当用于类类型对象时,初始化的拷贝形式和直接形式有所不同:直接初始化直接调用与实参匹配的构造函数,拷贝初始化总是调用拷贝构造函数。拷贝初始化首先使用指定构造函数创建一个临时对象,然后用拷贝构造函数将那个临时对象拷贝到正在创建的对象。举例如下stringstr1("Iamastring......