uniapp 微信小程序 wx.createAnimation 实现向上滚动弹幕

2021/11/13 20:43:27

本文主要是介绍uniapp 微信小程序 wx.createAnimation 实现向上滚动弹幕,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

不多bb,直接先贴代码,反正我是能用的,如果不能用的话就改改,改改后还不能用就不能用吧。

<template>
      <view class="undone-order">
        <view :style="mainStyle">
            <view style="height: 400rpx;width: 100%;background: transparent;overflow: hidden;">
                <view class="t-content" style="text-align: center;background: transparent;" @transitionend="animationend" :animation="animationData" :style="animationStyle">
                    <view v-for="(item,index) in dataList" :key="index" class="img_cont_class">
                        <view class="img_view_class">
                            <image :src="item.headimg" style="height: 50rpx;width: 50rpx;border-radius: 25rpx;" mode=""></image>
                        </view>
                        <view class="content_class">
                            {{item.content}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <button type="default" @click="scaleAndScale">123123</button>
      </view>

  </template>
  <script>
      export default {
          data() {
              return {
                  animation: '',
                  animationData: {},
                  isStop: true,
                animationStyle:'transform: translateY(50%)',
                mainStyle:'position:fixed;right:9999px',
                runOver:true,
                dataList:[
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时,连着写,然后自己设

	


这篇关于uniapp 微信小程序 wx.createAnimation 实现向上滚动弹幕的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程