vue文字首尾相连无限轮播

前言

工作中用到了这么个东西，时间紧急搜索了一种写法临时用。空闲下来准备自己写一个，简单花了一点时间写了个demo，分享一下。（注意：这个demo只经过了简单测试，你要是在实际项目中用是需要自己调整的）

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {width: 100%;height: 100%;margin: 0;}#app {height: 100vh;background-color: #ccc;padding: 1px;box-sizing: border-box;}#app div {overflow-x: hidden;white-space: nowrap;}#app div p {width: fit-content;transition: transform 16.7ms;margin: 0;display: flex;}#app div p span {display: inline-block;padding-right: 48px;}</style>
</head><body><div id="app"><div ref="msg">{{msg}}</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>new Vue({el: '#app',data: {msg: '别绪如丝梦不成，那堪孤枕梦边城。因听紫塞三更雨，却忆红楼半夜灯。书郑重，恨分明，天将愁味酿多情。起来呵手封题处，偏到鸳鸯两字冰。'},mounted() {this.carouselText()},methods: {// 此处替换轮播区域dom结构用来实现轮播效果，当然你也可以直接写好这个dom结构直接用carouselText() {const msg = this.$refs.msgconst p1 = document.createElement('p')const s1 = document.createElement('span')const s2 = document.createElement('span')s1.innerText = msg.innerTexts2.innerText = msg.innerTextp1.append(s1)p1.append(s2)msg.innerText = ''msg.append(p1)this.carouselAnime(0)},// 轮播动画carouselAnime(right) {const msgArea = this.$refs.msg.children[0]if (right < msgArea.offsetWidth - this.$refs.msg.offsetWidth) { // 轮播距离判断，这个判断也可以没有，这是我早期思路留下的，留着也没问题msgArea.style.transform = `translateX(-${right}px)`if (right > msgArea.children[0].offsetWidth) { // 判断第一遍内容已经完全播完，第二遍内容刚到最左侧时把第一段内容重新移到最左侧替换当前位置的第二遍内容，这里仔细看的话会看出一点替换的痕迹right = 0msgArea.style.transform = `translateX(0)`}right++}setTimeout(() => { // 定时器开启轮播this.carouselAnime(right)}, 16.7)}}})</script>
</body></html>

代码很简单，思路也写在了注释里，有机会我在更新点别的东西与大家分享吧！

vue文字首尾相连无限轮播相关推荐

vue 实现无限轮播_使用Vue制作图片轮播组件思路详解
之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也 ...
引导界面滑动导航 + 大于等于1页时无限轮播 + 各种切换动画轮播效果
参考地址: https://github.com/bingoogolapple/BGABanner-Android#%E6%95%88%E6%9E%9C%E5%9B%BE%E4%B8%8E%E7%A4 ...
android 轮换实现动画,怎么在Android中实现一个首页无限轮播功能
怎么在Android中实现一个首页无限轮播功能发布时间:2021-04-12 16:22:49 来源:亿速云阅读:74 作者:Leah 这期内容当中小编将会给大家带来有关怎么在Android中实现 ...
安卓实现广告栏图片无限轮播播放效果
//经常在安卓app中页面上方放置一个广告栏,用到的无限轮播代码: public class MainActivity extends Activity { // 广告控件 private MyPag ...
android ViewPager实现无限轮播和设置监听事件
ViewPager的无限轮播,主要以实现为主.代码如下首先定义activity_viewpager.xml: <LinearLayout android:layout_width=" ...
iOS开发之ImageView复用实现图片无限轮播
在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...
【Swift】自定义控件无限轮播 + 无限图片轮播
CocoaPods安装 pod 'PGBannerSwift' 复制代码使用 1.无限图片轮播首先引入import PGBannerSwift let banner = PGBanner(fram ...
Banner 自动无限轮播(普通)
例题:Banner自动无限轮播 build.gradle中加入(加在最下面):compile 'com.youth.banner:banner:1.4.10' 添加之后需要点击右上角的 Sync ...
ViewPager两种方式实现无限轮播
给自己的忠告:虽然轮子很好用,但是使用轮子的前提是:如果不去封装一些复杂的功能,自己会用最基本的方法写一个,不然再好的轮子那也是别人的,当自己项目遇到和轮子不一样的地方,那就只能束手无策或者改人家的源 ...
无限轮播图片的实现原理
无限轮播图相信是很多开发人员常用的一个功能,这里总结一下常用的两种方式的实现原理一.使用UIScrollview实现无限轮播用UIScrollView实现,在scrollView上添加3个UIIm ...

vue文字首尾相连无限轮播

vue文字首尾相连无限轮播相关推荐

最新文章

热门文章