2018-11-01 15:01:36 +08:00
|
|
|
# omi-touch
|
2018-11-01 14:58:48 +08:00
|
|
|
|
2018-11-01 15:01:36 +08:00
|
|
|
Smooth scrolling, rotation, pull to refresh and any motion for the web.
|
2018-11-01 14:58:48 +08:00
|
|
|
|
2018-11-01 15:01:36 +08:00
|
|
|
[→ touch the mobile demo](https://tencent.github.io/omi/packages/omi-touch/examples/simple/)
|
2018-11-01 14:58:48 +08:00
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
|
```js
|
2018-11-01 15:01:36 +08:00
|
|
|
import { render, define, WeElement } from 'omi'
|
|
|
|
import 'omi-touch'
|
2018-11-01 14:58:48 +08:00
|
|
|
|
2018-11-01 15:01:36 +08:00
|
|
|
define('my-app', class extends WeElement {
|
2018-11-01 15:05:48 +08:00
|
|
|
onChange = value => {
|
2018-11-01 15:01:36 +08:00
|
|
|
console.log(value)
|
2018-11-01 14:58:48 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
2018-11-01 15:01:36 +08:00
|
|
|
<div class="main">
|
|
|
|
<omi-touch min={-1750} max={0} change={this.onChange}>
|
2018-11-01 15:05:48 +08:00
|
|
|
<div class="touchArea">
|
|
|
|
<ul>
|
2018-11-01 15:01:36 +08:00
|
|
|
<li>Hello, Omi-Touch!</li>
|
2018-11-01 15:05:48 +08:00
|
|
|
<li>AlloyTouch</li>
|
2018-11-01 15:01:36 +08:00
|
|
|
<li>Omi</li>
|
|
|
|
...
|
|
|
|
...
|
2018-11-01 15:05:48 +08:00
|
|
|
...
|
|
|
|
<li> row 20</li>
|
|
|
|
<li> row 21</li>
|
2018-11-01 15:01:36 +08:00
|
|
|
<li> row 22</li>
|
|
|
|
<li> row 23</li>
|
|
|
|
<li> row 24</li>
|
|
|
|
<li style="border-bottom: none;"> row 25</li>
|
|
|
|
</ul>
|
2018-11-01 14:58:48 +08:00
|
|
|
</div>
|
2018-11-01 15:01:36 +08:00
|
|
|
</omi-touch>
|
2018-11-01 14:58:48 +08:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
2018-11-01 15:01:36 +08:00
|
|
|
})
|
2018-11-01 14:58:48 +08:00
|
|
|
|
2018-11-01 15:05:48 +08:00
|
|
|
render(<my-app />, 'body')
|
2018-11-01 14:58:48 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
|
|
MIT © dntzhang
|