Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

omi-swiper

0.0.1 • Public • Published

Omi-Swiper

Omi ui swiper

Example

demo api (CN) api (EN)

Use

npm install omi-swiper
import { WeElement, define, render } from 'omi'
import 'omi-swiper'
 
define('my-app', class extends WeElement {
 
  _getCase = ( instance ) => {}
  
  data = {
    swiper: {
      navigation: {
        // 定义切换按钮的颜色
        type: 'white',
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    },
    // 实例为多个时, 必须存在且不唯一
    name: '',
    // 获取实例
    getCase: this._getCase,
    imgs: [
      // 形式需要统一
      // 一种形式
      {src: require('path')}
      // 二种形式 自定义 在懒加载中常用
      {html: <div> </div>}
    ]
  }
  
  render() {
    return (
      // 外层div为控制容器大小
      <div style="height: xxx">
        <o-swiper data={this.data} />
      </div>
    )
  }
})
 
render(<my-app />, 'body')

props

属性 必须 描述
data Object 根属性
data.swiper Object swiper4 的配置对象
data.name string 如果页面有多个实例,必须存在不重复的 name
data.imgs array 定义数据
data.getCase function 参数为实例对象

Install

npm i omi-swiper

DownloadsWeekly Downloads

2

Version

0.0.1

License

MIT

Unpacked Size

2.43 MB

Total Files

68

Last publish

Collaborators

  • avatar