小程序弹幕

 不废话直接上干货

<view class="dan_box">
    <block wx:for="{{danData}}" wx:key="id">
      <view class="dan_con" style="animation: shift {{item.time}}s linear forwards;top:{{item.top}}%">
        <image src="{{item.touxiang}}"></image>
        <text>{{item.name}}</text>
      </view>
    </block>
</view>

.dan_box{
  z-index: 3;
  height: 40vh;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.dan_con{
  position: absolute;
  white-space:nowrap;/* 防止向下换行*/
}
.dan_con image{
  width: 50rpx;
  height: 50rpx;
  vertical-align: middle;
  border-radius: 50%;
}
.dan_con text{
  font-size: 30rpx;
  color: red;
  margin-left: 20rpx;
}
@keyframes shift{/**定义从右边向左边的移动的动画**/
  from{left: 100%;}
  to{left: -100%;}
}

 

// pages/dan/index.js
var cle_setInterval = ""
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nameArr:[
      "沧桑为饮","徒步鬼門關","秋叶静美","玫瑰虽美'但却刺入骨髓","哥的格调范","听风念故人","长相思","天冷了","秋月春花","江山寒色远","酒醉心头梦","起伏的背影","慢灵魂","悠然夏伤","薄荷之翼","紫色郁金香","娇美如厮","灯灭催魂亡","獨壹無弍","凌枫独傲","冷寒希","似梦非梦","雪朔风凛","浩迹随翎","戀之風景","陌筱雅","抹白的苍凉","流年的哀伤","横刀泪[由Www.QunZou.Com整理]","野味少女心","冷清°","梦倾城","走路带风的帅界扛把子","微雨落花","指尖的霸气","残梦断忆","苍麓","软淑萌","迷爱灬乖乖女","古城白衣少年","眸中秋水","落幕的夕阳","朱伞青衣乌篷","浮梦往事","鳶尾婲","劍氣斬魂","甜味的风","魅力妖刀","红尘旧梦","心如蝶舞","情话刺心","法翎","空心人","star丿丶浮华","時光清淺","夏风不燥","剑客王子","狙帝之魂","冷青春","月出东山之上","风的味道","感激经历","南风吹客衣","棒棒糖狠甜！","三岁就会撩妹","夏樱","夜空守望者","飘渺三井獣","雨中的伞","千游大人","飓风来临","惊鸿殇","莣鈈掉啲傷","热血与梦想","淡写流年","孤独的注解","冰舞恋雪","看清人心","百年孤寂","死亡之舞","哇咔咔","执手走天涯","花舞花落泪","一世繁华","北海茫月","北染陌人","一寸時光","孤獨纪","叶落枝残","繁华落尽","落晨曦","魂淡君","走路太妖会摔跤","一笑震九天","破碎的温柔","浅浅的回忆","浅唱悲伤","哎呀妈呀","怎样自在怎样活","覆手倾天下","恍然如梦微凉","橘子味的猫","神丶旳背影","冷小凡","北仑色","冷尐汐","灵魂杀手","寄与玘婳","亦旧怡心","年少轻狂","世上没有如果。","流云之风","待我强大给你天下","⌒黎秋lq","bor☆荭血","游荡江湖","鱼喵喵","旧城俨然回眸笑","沧海一瞬","天王在世","菩提树下叶撕阳。","mè村姐","暮归晨晓","抚剑听風","陌上芳菲","孤独的守候","狂刀先生","夜晚的天空","鬼魅惊神","深蓝梦境","大陆扛把子","零℃冬天","无语问苍天","道一声晚安","腐朽的灵魂","情缘异客","绮寮怨","抚爱无天","巴黎小甜心","苍龙坠坠落","潇洒出风尘","指间流逝的年华","王牌武夫","爷纵横四海","满盘皆输","骑猪去上网","轩辕增少","司马青衫","凌霄九天","倨傲的王者","将军妻","踏荹趉","故人归","雾远邀青树","一世蒼涼","咆哮九天","孤岛离魂","旧时月色","梦璃子","杀死欲望","天使琉璃月","琉璃繁缕","尘封","有一种格调叫我行我素","路尽隐香处","梵谷的左耳","萌尛喵","像我这样的人","红叶剑客","花未眠","葬芯鎖愛","心碎的浪漫","天翊战血","形同ü陌路","雪云飘","威震天下","冷紫葉","红酒琴殇","茉莉恋情","流年未亡","自强╮不息","当时年少春衫薄","噬影之瞳","消失的溫柔","淩亂玫瑰","向日的微笑","雷′克萨斯","坏天使","懒得笑","借雨尽凄凉","恶富贵","逆天的小盆友","吼霸霸","苍白沉默","糖果小柒","养猪发家致富","记忆的痕迹","之若素","专情予你","亡灵路人><","魂断蓝桥","羡风不停留","厮守浮华岁","善恶无定","柈迣迹","冷眸含黛","为你战苍穹","轻烟薄暮","丧命之徒","一笑魅縱生","倒影陪我走","看！灰鸡","听风在忧伤","狂龙一声笑","天ぐ下太平","离殇夜","夕曦，残颜","离别意","沫颜萱","幽恋如歌","嘴甜心狠办事稳","一剑击杀","嗜魂九天","青柠衬酸","沧桑的男人","尝ぐ醉","冷夜雨","谷猫落山","风舞松林涧","一折悲画扇","花雨黯","墮落","落雪听梅","夏季练习曲","素笺生花","唇齿留香","相思阙","欲与妄想","南歌初妤","迷乱浮生","月下残霞","沙漠之领主","落幕情殇","泪染裳","四月蔷薇","樱花味女孩","星恋影随","天涯路远","忧伤蔓延","徒步踏天涯","裂天与猎梦","夏末怅惘","奈河桥℃守望","雨的印迹","隔壁王学长;","不恋水的鱼","含笑饮毒酒","剑舞红颜笑","金钱打造气质","南笙离","执剑游天下","南乔几经秋","记忆的痕迹","主宰生灵","雨潇生","一干为尽","执笔绘流年","绿︶野","落日桥头细感风","彼岸荒芜","南街杏茶","坐看云起时","孤居","喵骚年","一个像夏天一个像秋天","半夜成仙","弑血狂战","兰晓曦","深究丶","终如初","孤傲白狼","冭孓爺","云中虎","洎ㄨ扰庸人","念旧的人","一种梦想","暴走苍穹","流失的回忆","血染双眼","熬尽孤单","遇见未知的自我","兲陰冷随風","沐小兮","夕阳余晖","飞痕斩剑","粉黛眉宇","凶我就拉黑","谵台风翔","→莲声","裸奔的蝸牛","蓝瑟之恋","懂得失去。","独酌饮明月","碍我者必亡","粗面鱼丸","流浪的白云","拔剑暗中杀","浮世毁梦","初如梦","我兜里有糖看你怎样抢","纵横天下","流水十年閒","戰神荣誉","心已打烊","辉煌一世","颓废的少年","xnノ神不定","來去皆江湖","离魂殇","王不留行","残泪无痕","萌酱の小可爱","长愿相随","灵魂傀儡","颤魂杀戮","潶天使","小鞋啪啪乱飞","一切◣随风","飞韵无影","飞翔的海豚","荒野蛮神ベ","素衣白裙","初梦良安","水墨青花","冰雪掌控者","揽清幽","逝去的往昔","莱昂雄狮","校长借个火","肳與辠","炼狱暗杀者","醉酒戏红颜","浪与风","风融化于耳","想飞de猪","度娘°","四谎记","赚个小钱","南城以南","走过的路","asia丶黑貓","逃逆過去","物事人非空自悲","學會放手","裸奔的砒霜","尽揽少女心","抓住夏天","明眸绕指柔","抽烟请举手i","夏天的血","指尖的信仰","慕容龙城","遗忘你","原来无话可说","爷独步天下","滑稽的殺手","卧树之森","冰雪战神","菸霧狆漃瘼","漃瘼柒汐","青栀如初","鹿饮溪","巷雨优美回忆","一壶桃花酒","绝世剑皇","落笔画秋枫","低调杀手","自愈","呐伤狠赞","我亦在","记忆之城","散落樱花","邪龙无心","干净的像风","树屿牧歌","越努力，越幸运","雷霆依德","逍遥行天下","捧杀","满身伤痕","嬷嬷扎","梦中梦","甜崽","烽烟乱世遇佳人","剑尊杀戮","沫色倾人","缘尽情封","花开亦不离","咪咪兔","听雨声盼永恒","踏平战区","紫廖渔歌〃","半盏清酒","竹影清风","rck丶雨儿","软清风","冷月寒光","龙啸霸天","失控","岁月你别催","残月夜影","琉璃子","十步杀一人","久夏﹏青","眉染春烟","孤人眠","花开似锦","风￠魂","雾风寒狼","逆伤莫小帅","醉的潇洒","巅峰王者","踏尽风雪","与孤独相拥","冷ゝ冰月","自我泅渡","沧桑为引","春秋不做梦℃","rule丶宅男","薄薄白衣叹","拼命╮菇凉","﹏那年一路向北","流星番茄","梦外喜城","花月夜","若安离半冬","厌离","白色秋天","占有欲","时光海","美轮美奂","欲望养厉鬼","南街九尾狐","天然槑","星耀使者","浮云旧事","luck丿至尊","春色三分","彗星少年","被神厌恶","nuel忆殇","萧曲落守约","理解的心","风雨兼程","流绪微梦","素白","薄情辞","angel琉璃","哥不打菜鸟","雾隐失落天","枭雄在世","壹鉎嘸茇","浸婚纱","深邃的眼神","璃若轻","惟爱myself","雾时之森","一抹夏殇","亡枫灭族","森里伊人","魄力男人","落笔画忧愁","清笑歌","战落梦魂","习惯所有的虚假","老衲戒女神","迷人ü风野","冷裂往事","戏蝶舞","血洗天下","一抹淡影","为你钟情","单身成瘾i","三寸海屿日光","纯净的眸子","讲给风听","弹指分天下","年少德无知","江河无风","离人梦长","惜你如命","蕩失淚光","称霸幼儿园","凌空垫射减","虎行風捷猎","道貌岸然","独步江湖","喜欢感情々","墨雨无痕","骑猪上高速","Distance の痕丶","Really.深爱成伤","冷温柔°Triste","╰Sweet┃乱了夏天","透支的狂 beast","瞬间”Heart Att","冷庸颜 °Escape丶","南城style","雨食Infante","Emotiona°小吃货","Hello 爱情风","瑾年 Invader","Small゛尒莫","小情绪 Triste *","俗 man■","Care. 在意","夜寐-sink°","Promise*不弃","LonElY 炙莲","Dummer、莫颜","牵手 °sunset","Autism゛陌亡","第5梦�鱀ream","Fusheng若","Charm 猫姬","独家说LOVE","Aomr゛心渃相依゜","smoke，身上的味道.","Proud queen","Flowers 日沐","小情绪 Triste *","Forever゛木偶心","碎脸 Scent flavor","Jeperdre我输不起","escape *被遗忘","东窗 Gentle","Moment丶初晴","旧伤 -Too ha","黑色无欲者Speaker","时光纪　Bound っ","Melody.（没了你）","Angle把淚吟成歌","毒魂SHOOT","温唇°sunshine","Smile灬凉城丶","格调 Moment゜","Existence°鱼","生疏人 Brbara-","仅此°future","Existence°鱼","不三心 °sunset","温唇°sunshine","Sad.p┈━═淚","MdENY 勿念","black“葬心","Fairy°好菇凉","失眠梦°Triste","Enteral丶不朽","阳暖人不暖心i","雨食Infante ゅ","-领悟 Lifetrut","（Roar）咆哮","╯用Style、淡漠一切","醉眼　WhiteIn゜","〝时光烙印time brand〞","°Distance（距离","じAomrご心渃相依つ","bombasti゜孤岛","浅笑°　Sunshine","释怀° Believeヾ","﹏扬尐№","我把整颗心给你，你却嫌腥","萌倒众生〆","我不娇气〞我只依赖","花开花落终不悔","飞逝的流水","暴走的小菇凉い","_蓝莓咘丁_","你的未来我预定了 つ","我要爱你很久很久很久","零do°温柔","爱情、全是TMD不扯淡","花若怜_指尖泪","﹎卌除恛忆ㄨ","天使街23号","你若幸福╮我便安心","退一步人去楼空ァ","安雨·薇","时间是自称包治百病dē庸医","既可笑丶又扯淡","____丧心病狂。","爱睡觉の大懒虫","叭咪呗呗哄 #","那年夏天宁静的海","你若幸福，我便不再打扰","这个世界╭ァ诱惑太多","泪之魄","__柒柒゛","心如空城般死寂丶","伪装の坚强、谁会吢庝","呵呵是母猪的叫声","待俄强大之后必毁负俄之狗","俄的天空有点灰","叽里呱啦▽","空心人丶","ゾ疯嘙子ξ","覀苽菋菂夏天","十年之后、你为谁唱起十年","别拿你的二手情话恶心我","姓 大 名 爷","樱雪の彩蝶","不狠不女人无毒不丈夫","俺是俺们村的村花","我会好好的活","___空城°","__碎花","何以解忧 唯有妇炎洁","你是我的死劫","╰一素锦流年一╮","不二心℡","疯疯癫癫的小女子","懒懒dě高贵","旧巷子里的旧少年°","尒宝赑の心肝","°浅陌______","你若一直在 我便一直爱","__碎了一地斑驳","じ学嬒自己訫疼自己☆","午夜的哭声","綯暣ぬ易拉罐","笑傲&风云","假装什麽都不懂","ゃ拾起回忆ち","抬头、让眼泪倒流","梦到你的真心","柠檬加醋i","无心话伤了有心人","曾经没有记忆","虚假成瘾","别畏我心","青春的情债","最聪明是无情","怪癖宝贝i","谁把星星弄丢了i","情输","时光封藏了我最疼的伤痛","伴我久还是弃我走i","没心没肺 姑娘活得不累","：情话腻心","挽长发","梦醒了一个人ˇ","不放手的样子","我在等不会等我的人i","顾长安","若不伴请别绊i","万人中央你会闪闪发光i","适当的表情","三人行必有电灯泡i","天真的二次方","难在相拥。","想你是习惯","三行情书。","心如薄荷凉透心","邮寄一个拥抱。","[他忘了少时她]","回过头看我会在i","我要的是青春的活力","[猫忘了鱼尾纱]","爱的没了姿态","[鹿忘了玫瑰园]","不开灯的街","不再对你依赖","°我等山海灰散尽i","享受错觉","眼见心不净","倒立泪不流","两颗心缺一","动了心的人就像吸了毒一样","我是多余！","庸人自扰旳玩笑","校门口前唱咆哮i","欠缺一份在乎","人已走远。","花开不败","变的善变╮","顺时针的恐惧","陪我一起自豪","别说你也难过","抖落一身扎人的谎","注定要被辜负","[潮忘了岛的心]","冷了谁的笑","煎熬","时光易老i","说好的幸福呢i","幸福我看不见","? 小米加步枪i","深海再深不及人心i","[鱼忘了蓝海鲸]","强档来期i","梦与梦的交接","一个人想走到遗忘","依赖的伤害","温情半零落","习惯性、落泪","心如荒岛囚心终老i","未能自救","九分矜持。","沽酒问卿","￡霸王↘爷战神彡","废途","苦酒入喉","栖世","社会全能帅小伙","花美男。麻凯","劝君莫执意","尤友","夕阳、坠落的很沧桑","北城痞子","夜袭寡妇村R","超能力i的人","食惡鲨","山雞@","异世邪君","故酒","10%先生","瞳荧","少年多沧桑#","离旧人。","▁背叛゜全杀无赦","拾你所爱","粉嫩小生","夜袭尼姑庵","鹤冢","ぐyě孒の酒","亚特兰斯少年 ∮","屁股大坐天下","别看了你帅不过我的","学弟°","无奈我只爱你","冷面微笑﹋","糙汉子i","拿酒与你说心事","Rnsh-逆神","风月倦怠","俺的媳妇你别碰","念着旧伤","゛安分ゝ旳小男ん ℡","祝颂","帅哥的立軆纹身","荒人说梦","恣意踏江山","╔爺們賊ゞ帅","〆丨ㄖгéи勿攣�]","得劲","热呛","願妳無憂","與亽潮","！﹎↘雄鷹戰猛風","年少轻狂","曲水弯弯","归去如风","失恋光荣","我就是帅哥蟋蟀他哥","矜持不失淡雅的少年丶","让老衲摸摸！","★少年真情＊","我不要在庸碌中老去","烂人","彼岸星光ぐ","憶往昔單裑歲仴矁","爱过你，已足够","00んoυ锝癡綪","吾且作远来客"
    ],
    danData:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let _that = this;
    this.danFn()
    cle_setInterval = setInterval(function(){
      _that.danFn()
    },5000)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
   
  },
  danFn:function(){
    let _that= this;
    let obj={};//定义一个对象push到doommData中
    for(let i = 0; i<5;i++){
      obj={};
      obj.touxiang= "你的图片文件夹/aratar_"+Math.floor(Math.random()*this.data.nameArr.length)+".jpg"
      let name =  _that.data.nameArr[Math.floor(Math.random()*_that.data.nameArr.length)]
      obj.name= name.substring(0, name.length - 2) + '**'
      obj.top= Math.floor(Math.random()*(90-5+1)+5)
      obj.time=Math.floor(Math.random()*(20-5+1)+5);
      _that.data.danData.push(obj)
      console.log(obj.name)
      _that.setData({
        danData:_that.data.danData
      })
    }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    clearInterval(cle_setInterval)
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(cle_setInterval)
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

效果