vue插件实现循环滚动列表——vue-seamless-scroll
https://blog.csdn.net/weixin_45389051/article/details/106379832?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
1 <template>
2 <div class="index">
3 <div class="banner">
4 <div class="width1000">
5 <el-input
6 class="search-input"
7 placeholder="搜索资源"
8 v-model="searchKey">
9 <i slot="prefix" class="el-input__icon el-icon-search"></i>
10 </el-input>
11 </div>
12 </div>
13
14 <div class="notice-box">
15 <div class="width1000">
16 <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
17 <ul class="item">
18 <li v-for="(item, index) in newsList" :key="index" v-text="item.title"></li>
19 </ul>
20 </vue-seamless-scroll>
21 </div>
22 </div>
23 </div>
24 </template>
25
26 <script>
27 import vueSeamlessScroll from 'vue-seamless-scroll'
28 export default{
29 name: 'index',
30 components:{
31 vueSeamlessScroll
32 },
33 data(){
34 return {
35 searchKey: '',
36 newsList: [{
37 'title': '1、所有组件的 输入输出格式要遵循一定标准,最起码可以跟踪一个尝试执行的用例。'
38 }, {
39 'title': '2、编排时,每个组件都额外编排一个前置的'
40 }, {
41 'title': '3、自己实现日志消费服务,监控 syslog 通过TCP端口 发送过来的日志,消费整理,把分析写入业务数据库'
42 }]
43 }
44 },
45 computed: {
46 optionLeft () {
47 return {
48 direction: 2, // 左方向
49 limitMoveNum: 3
50 }
51 }
52 },
53 mounted(){
54
55 },
56 methods:{
57
58 }
59 }
60 </script>
61
62 <style lang="scss" scoped>
63 .index {
64 .banner {
65 width: 100%;
66 height: 460px;
67 background: url('../assets/images/banner-bg.png') no-repeat left top;
68 background-size: 100% 100%;
69 .width1000 {
70 display: flex;
71 justify-content: center;
72 .search-input {
73 width: 760px;
74 margin-top: 300px;
75 /deep/ .el-input__inner {
76 height: 50px;
77 line-height: 50px;
78 }
79 }
80 }
81 }
82 .notice-box {
83 height: 38px;
84 line-height: 38px;
85 background: #011130;
86 color: #fff;
87 .seamless-warp2 {
88 overflow: hidden;
89 height: 38px;
90 width: 100%;
91 ul.item {
92 width: 100%;
93 li {
94 float: left;
95 margin-right: 10px;
96 font-size: 14px;
97 }
98 }
99 }
100 }
101
102 }
103 </style>
vue插件实现循环滚动列表——vue-seamless-scroll的更多相关文章
- Jquery制作--循环滚动列表
自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...
- vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结
最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件.下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者 ...
- vue实现循环滚动列表vue-seamless-scroll
1.安装 vue-seamless-scroll 实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入,组件配置 import vueSea ...
- vue的v-for循环渲染列表时,解决没有:key警告问题(:key的作用)
:key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下,可以进行单独渲染,减少页面资源消耗. 当前页面如果有列表渲染v-for,并且在v-for的循环标签中没有:key元素时,控制台会出 ...
- jquery特效:无缝向上循环滚动列表
效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1&l ...
- 用Vue来实现音乐播放器(十六):滚动列表的实现
滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 <template> < ...
- vue插件编写与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...
- 手把手教你写vue插件并发布(二)
前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...
- 推荐 VSCode 上特别好用的 Vue 插件 - vetur
作者 @octref 此前 V2EX 发过帖子,最近新增代码补全功能,综合比较应该是目前 VSCode 上面最好用的 Vue 插件. 能够实现在 .vue 文件中: 语法错误检查,包括 CSS/SCS ...
- Vue组件封装之无限滚动列表
无限滚动列表:分为单步滚动和循环滚动两种方式 <template> <div class="box" :style="{width:widthX,hei ...
随机推荐
- VBA常用的函数
space(8)加空格 vbcrlf换行 trim()去掉两侧空格 lrim()去掉左侧空格 rtrim()去掉右侧空格 left()取字符的左侧 right()取字符串的右侧开始 mid()取字符串 ...
- linux 上安装kapacitor
转载请注明出处: 1.通过安装包安装 1.使用以下命令下载安装包: wget https://dl.influxdata.com/kapacitor/releases/kapacitor_1.6.3- ...
- 如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana|Part 1
本系列将分成三个部分,您将学习如何使用 Helm 在 Kubernetes 上集成 Prometheus 和 Grafana,以及如何在 Grafana 上创建一个简单的控制面板.Prometheus ...
- 【最佳实践】京东小程序-LBS业务场景的性能提升
一.前言 1.1 京东LBS门详业务介绍 京东LBS门详目前已经支持了仓网.药急送.天选.小时达POP多种业务,并且具备了多端的能力,一套代码可以在京东app.健康app.微信小程序中运行,一定程度上 ...
- python tkinter 使用(六)
python tkinter 使用(六) 本文主要讲述tkinter中进度条的使用. 1:确定的进度条 progressbar = tkinter.ttk.Progressbar(root, mode ...
- vscode下载
vscode下载 想下载官网可以直接去官网下载(速度超慢~) 百度网盘链接: 链接:https://pan.baidu.com/s/14DfWI5b2HA_J_kHBcu8JQw?pwd=yyds 提 ...
- ASR项目实战-方案设计
对于语音识别产品的实施方案,给出简易的业务流程,仅供参考. 如下流程图,可以使用如下两个站点查看. web chart Web Sequence Diagrams 文件转写 创建文件转写任务 客户应用 ...
- Python——第二章:字符串操作——索引和切片
索引: 按照位置提取元素 可以采用索引的方式来提取某一个字符(文字) s = "我叫周杰伦" print(s[3]) #程序员都是从0开始数,这里的3代表第4位,也就是" ...
- MySQL|MySQL事物以及隔离级别
MySQL 事务主要用于处理操作量大,复杂度高的数据.比如开单,需要添加给订单表增加记录,还需要增加订单的各种相关明细,操作复杂度高,这些操作语句需要构成一个事务.在 MySQL 命令行的默认设置下, ...
- NoClassDefFoundError: javax/el/ELManager
Caused by: java.lang.NoClassDefFoundError: javax/el/ELManager at org.hibernate.validator.messageinte ...