Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including omi-swiper with all npm packages installed. Try it out:

var omiSwiper = require("omi-swiper")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

omi-swiper v0.0.1

Omi ui omi-swiper

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

属性必须描述
dataObject根属性
data.swiperObjectswiper4 的配置对象
data.namestring如果页面有多个实例,必须存在不重复的 name
data.imgsarray定义数据
data.getCasefunction参数为实例对象
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free