vue.js 横向滑动_一个Vue.js插件可以滑动文本

vue.js 横向滑动

Textra (Textra)

Vue js add-on to slide text.

Vue js附加组件可滑动文本。

View demo 查看演示 Download Source 下载源

正在安装 (Installing)

npm i -D vue-textra

Then inside you project, start using it :

然后在您的项目内部，开始使用它：

import Vue from 'vue'
import App from './App.vue'
import Textra from 'vue-textra'

Vue.use(Textra);
new Vue({
  el: '#app',
  render: h => h(App)
})

用法 (Usage)

Inside any of your components:

在任何组件内部：

<textra :data='words' :timer="1.1" filter="flash" />

And in your instance data:

在您的实例数据中：

//...
  data () {
    return {
      words: ["My text to show","palnet","fail","sample text"]
    }
  }
//...

Another example :

另一个例子 ：

<textra :data='words' :timer="1.1" :infinite='true' filter="left-right" />

This one will loop around for ever.

这将永远循环。

道具 (Props)

data (data)

Type : Array Description : Should be array of things you want to slide.

类型：数组描述：应该是要滑动的东西的数组。

---

---

timer (timer)

Type : Number Description : Defines gap between each slide as second. Default : 1

类型：数字说明：将每张幻灯片之间的间隔定义为秒。 默认值： 1

---

---

filter (filter)

Type : String Description : Defines type of filter you want to use when sliding. Default : simple

类型：字符串说明：定义滑动时要使用的过滤器类型。 默认值： simple

---

---

infinite (infinite)

Type : Boolean Description : Defines whether your slider should keep looping or not. Default : false

类型：布尔值描述：定义滑块是否应保持循环播放。 默认值： false

筛选器 (Filters)

There are 9 types of filters available for now:

目前有9种类型的过滤器可用：

• simple

  simple

• bottom-top

  bottom-top

• top-bottom

  top-bottom

• right-left

  right-left

• left-right

  left-right

• press

  press

• scale

  scale

• flash

  flash

• flip

  flip

翻译自: https://vuejsexamples.com/a-vue-js-add-on-to-slide-your-text/

vue.js 横向滑动