首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS实现超简易轮播图

    滚动的延时使用设定的delay, 延时结束后, 清除过渡动画(过渡动画的清除, 主要给后面最后一位跳到第一位时用)和isAnimating标记 goSlider () { // 添加过渡效果, delay...('isAnimating') // 切换结束, 清空状态, 清空过渡效果 setTimeout(() => { this.swiper.style.transition = ''...此时没有过渡动画, 就实现了最后一位5和第一位5的快速切换, 然后过渡到第1位; 给currentPosition设置为1后, 进入到切换动画, 这样视觉上就是5过渡到1 animate () {...将位置设为第一项 this.currentPosition++ // 轮播 setTimeout(() => { this.goSlider() }, 20) } 5.轮播开始 循环调用轮播操作函数...') // 切换结束, 清空状态, 清空过渡效果 setTimeout(() => { this.swiper.style.transition =

    10.4K30

    TDesign 更新周报(2022年6月第1周)

    支持事件表格支持编辑单元格InputNumber: 通过 inputProps 透传 Input 组件全部特性Bug FixesProgress: theme 由 circle 切换至 plump 后样式错乱...keys 属性时,严重闪烁Cascader: 修复无法透传属性 popupPropsTransfer: 修复当与tree结合的全选判断问题Others官网: 支持在线配置组件库主题详情见:https:...Swiper: 动态列表渲染问题Table: 可编辑单元格,使用日期选择器时,切换月份也会导致退出编辑模式Form: 修复 form实例方法 submit 调用后的刷新问题详情见:https://github.com...skeleton: 动画结束后,父级无意义的 div 导致样式无法继承、计算TimePicker: 修复RangePicker的聚焦样式丢失的问题Form: 修复 addon 在 form 表单下数据劫持失败问题...: 支持通过修改loop值关闭循环OthersRefactor: 将 mask 重命名为 overlayRefactor: 重构Progress组件,Api更新Refactor: 重构 Slider 组件

    1.1K20

    前端-微信小程序开发(2):小程序基本介绍

    ② WXSS,WeiXin Style Sheets,是一套样式语言,用于定义样式,与CSS类似,一般认为是CSS的子集 因为小程序中UI组件都是Native实现,所以小程序直接手起刀落压根放弃让我们使用...>             swiper-item {{item}}">           swiper-item>         ...class="page-section page-section-spacing">                幻灯片切换时长...APPService线程,这里可能有误) ② 主View等待构建页面命令,逻辑层开始载入js逻辑(编译过),微信底层应该会将WXML以及WXSS翻译为JS代码,逻辑层执行JS代码做一些初始化工作APP结束后...③ 业务线程执行实例化Page逻辑,引发onLoad、onShow事件,onShow的时候页面初步渲染已经结束,如果系统有异步数据或者其他再次数据渲染会执行setData,引发Native UI更新,逻辑结束

    1.8K30

    uni-app开发一个小视频应用(二)

    “ 前情回顾uni-app开发一个小视频应用(一)上篇文章,我们已经实现了首页的头部导航栏组件、底部的tabBar导航栏组件、中间的视频列表组件以及视频列表组件中的视频播放组件,传入视频列表渲染后已经可以上下滑动进行视频切换和播放...这个左侧信息栏信息是和当前播放视频相关联的,所以应该在循环视频列表的时候,将左侧信息栏组件一起渲染出来,所以左侧信息栏组件应该加到swiper-item>中。...swiper>组件给我们提供了一个change事件,我们可以监听这个change事件,拿到滑动完成后滑动到了第几页,即swiper-item>的序号(从0开始),然后与滑动前的当前page相比较,就可以知道是向上滑还是向下滑了...判断好了是上滑还是下滑后,我们还需要对上滑和下滑作出正确的处理,我们需要能够拿到每个视频播放组件,然后调用视频播放组件上的相关方法对播放进行控制,这就是涉及到了父组件如何调用子组件上方法,父组件要想调用子组件上的方法...如果是播放中,那么点击就暂停,如果不是播放中,那么点击就播放,同时,由于uni-app不支持vue的dblclick事件的,所以我们还需要对单击和双击操作进行判断,我们需要定义一个变量用于记录用户点击次数

    1.7K41

    支持触摸滑动和硬件加速的移动版 Slider:Swiper

    Swiper 是一个界面非常优美的轻量级的 Slider,它主要为移动设备而设计的,并且由于使用了硬件加速,所以运行效率非常高。...因为没有使用 JavaScript 框架,所以这个 Slider 是非常轻量级的。但是功能却一点都不弱,支持触摸滑动,滑动的速率都是可以定制化的,并且支持垂直或者水平方向的滑动,内置导航等。...Swiper 可以呈现一次多个项目,支持无限循环,并且支持任意的 HTML 元素内容。...并且还提供 API 接口让你控制分页,已经主要事件的回调函数 虽然 Swiper 是主要面对移动设备,但是它同样支持 PC,并且还可以通过插件进行扩展。 演示和下载:Swiper。 ----

    92940

    React 轮播动画探索

    x 轴的 -300% swiper 宽度的位置上 opacity:0,表示一开始透明不可见 退出动画的结束状态(next): opacity:0,表示结束时透明不可见 经过我们的改造,最终效果如下:...但幻灯片切换效果不佳并不是最主要的,更重要的还是氛围气泡业务逻辑的实现,我们看看结合 push 命令,动态更新幻灯片数量的情况下,swiper 在 react 中的状态管理会变得多不堪。...另一个问题 —— 基于 swiper 动态更新氛围气泡 在实际业务使用中,其实还遇到了优先级展示的问题,氛围气泡的位置一共有三个组件在轮流展示: 打开直播间,先展示一段 5s 的课程公告 公告消失后,如果有氛围气泡数据...prependSlide('swiper-slide">new Slide'); }; 从这里就能看出来,在 react 中,如果需要动态更新幻灯片的场景,使用 swiper...除此之外,实践中也发现了很多其他的问题,比如说: 通过 swiper.appendSlide/prependSlide 方法去插入新的幻灯片,只能传入 HTML 字符串,不能传入 React 组件。

    2.5K10

    Hexo添加首页置顶轮播图

    前言 在写系列博文时对于某一篇文章的寻找过程会比较繁琐(对于博主而言自然会简单些,但是对于访客来讲就没那么轻松),因此参考Akilar的博文弄了一个置顶轮播图。...可以把系列博文的链接汇总起来做一个索引,放置在轮播图中。这样既可以展示博主想对外展示的内容,又方便快速进行文章跳转。 效果可以在博客首页查看。 本篇教程会涉及大量源码的改动,对缩进有严格要求。...如果需要,可以移步下方链接至Akilar的博客教程去下载源码。...,并将以下内容写入该文件: .blog-slider.swiper-container-fade.swiper-container-horizontal#swiper_containe .blog-slider...注意在butterfly_v3.6.0中取消了缓存配置,需要将{cache:theme.fragment_cache}改为{cache: true} .recent-post-item(style='height

    1.1K20

    【愚公系列】2022年03月 微信小程序-视图容器

    和swiper-item ---- 前言 视图容器 名称 功能说明 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视图 match-media media...query 匹配检测节点 movable-area movable-view的可移动区域 movable-view 可移动的视图容器,在页面中可以拖拽滑动 page-container 页面容器 scroll-view...可滚动视图区域 share-element 共享元素 swiper 滑块视图容器 swiper-item 仅可放置在swiper组件中,宽高自动设置为100% view 视图容器 一、cover-image...小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等),用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。...其中只可放置swiper-item组件,否则会导致未定义的行为。

    63430

    如何使用小程序视图容器组件

    在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细使用每个组件及API的使用。...同时,我们也可以通过hover-start-time和hover-stay-time设定按住显示时间和手松开后的保留时间。...除了刚才讲的scroll-view视图容器,官方还提供了另一种滑块容器组件swiper组件,swiper滑块更适合banner或幻灯片等应用的展示,其支持指示点、自动播放等功能,我们就来体验下吧,同样...然后在index.js中获取这几个属性的状态,返回当前状态,从而实现控制swiper的属性,关于如何获取前端的数值,我们将在后面的文章中讲解,大家不用着急搞懂,先明白swiper的使用即可。...通过实验,我想大家应该很快就明白了swiper和scroll-view的区别,接下来,我们看看视图容器中的另一个组件。

    9.6K10377

    使用dreamweaver制作采用DIV+CSS进行布局——美食甜品店铺加盟企业HTML静态网页 ——学生美食网页设计作品静态HTML网页模板源码

    该模块的左侧有个美食分类,用户可以选择自己喜欢的种类,当点击种类后,就会在右侧出现该分类下的各种美食,用户可以点击自己感兴趣的食品,从而看到它的具体信息。...网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。...index.html是首页、其他html为二级页面; (2) css文件包含:css全部页面样式,文字滚动, 图片放大等; (3) js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到...;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 3;} .slider .swiper-button-next{background-image.../images/arrow-right.png);width: 30px;height: 58px;background-size:30px 58px;right: -30px;} .slider .swiper-button-prev

    1.1K20

    Vue2.0 数据抓取及Swiper组件开发

    ,该系列博文的发布已得到黄轶老师的授权许可 0 系列文章目录 Vue2.0 定制一款属于自己的音乐 WebApp Vue2.0 路由配置及Tab组件开发 Vue2.0 数据抓取及Swiper组件开发 Vue2.0...Swiper 组件 Swiper组件我们采用的是饿了么前端团队推出的Mint UI移动端组件库,除了Swiper组件外,我们在后续项目中还会引入Mint UI的其他组件,所以我们在这里就引入全部组件 /..." class="slider-wrapper"> slider..." :key="index"> slider-img">...CSS 文件进行定义,需要做好 CSS 模块化管理,注意单页应用的样式污染问题 该章节的内容到这里就全部结束了,源码我已经发到了 GitHub Vue_Music_03 上了,有需要的同学可自行下载

    61440

    Hexo-Butterfly主题修改记录-2

    is_post()表示文章页面不采用随机背景 修改完毕后在配置文件中将background设置为任意颜色,并添加代码: # 随机背景图banner的数量 background_num: 16 修改背景颜色及透明度...相对路径为与css的相对路径)' 如果要合并整个文件夹的话也无需一个个添加, 主题文档\source\css\下新建文件夹,文件夹名随意 然后在主题文件\source\css\index.styl中添加如下代码...__img height 200px 在主题配置文件的CDN配置中增加代码: # 首页轮播图 swiper_js: https://cdn.jsdelivr.net/gh/ooahz/hexo@...中添加如下代码引入: @import url(hexo-config('CDN.swiper_css')) 最后在HEXO根目录\source\_data\ 新建slider.yml,进行信息的配置:...== true + .recent-post-item - .recent-post-item 然后在Front-matter中添加字段 hide: true 缺点:虽然被隐藏的文章不会在首页显示了

    1.7K20
    领券