Parallax rolling expansion.
<template> <div class="wrapper"> <list ref="scroller" @scroll="onScroll" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd" @touchstart.native="onTouchStart" @touchmove.native="onTouchMove" @touchend.native="onTouchEnd" @touchcancel.native="onTouchEnd"> <cell> <div class="padding"></div> </cell> <cell class="cell" v-for="(item, index) in items"> <text class="text">{{index + 1}}</text> </cell> </list> <wxc-slide-nav class="nav nav-top" ref="topNav" position="top" @slideIn="slideIn"> <div class="nav-cell"><text>Before</text></div> <div class="nav-cell"><text>06-22</text></div> <div class="nav-cell"><text>Next</text></div> </wxc-slide-nav> <wxc-slide-nav class="nav nav-bottom" ref="bottomNav" position="bottom" @slideOut="slideOut"> <div class="nav-cell"><text class="nav-text">Filter</text></div> <div class="nav-cell"><text class="nav-text">Time</text></div> <div class="nav-cell"><text class="nav-text">From</text></div> </wxc-slide-nav> </div> </template> <script> import { WxcSlideNav } from 'weex-ui'; export default { data() { return { items: new Array(50) } }, components: { WxcSlideNav }, methods: { onTouchStart: WxcSlideNav.handleTouchStart, onTouchEnd: WxcSlideNav.handleTouchEnd, onTouchMove(e) { WxcSlideNav.handleTouchMove.call(this, e, this.$refs.bottomNav); }, onScroll(e) { WxcSlideNav.handleScroll.call(this, e, this.$refs.scroller, this.$refs.topNav, this.$refs.bottomNav); }, slideIn() {}, slideOut() {} } } </script>
Due to the compatibility and other reasons, to use the API is not particularly elegant, need to cooperate in <list>
manual binding event.
<list ref="scroller" @scroll="onScroll" <!-- to Native --> @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd" <!-- to H5 --> @touchstart.native="onTouchStart" @touchmove.native="onTouchMove" @touchend.native="onTouchEnd" @touchcancel.native="onTouchEnd"> <cell> <div class="padding"></div> </cell> </list>
In addition, the top of list
needs to add padding
, because list
and cell
dont support
paddingand
marginstyles. It needs to add a placeholder
cellto
padding, which is highly consistent with
topNav`.
<cell> <div class="padding"></div> </cell> ... <style> .padding { width: 750px; height: 80px; } </style>
The event method of slideNav
is then bound in the event callback, where onTouchMove
and onScroll
need to be passed into the scroller
and slideNav
objects.
onTouchStart: WxcSlideNav.handleTouchStart, onTouchEnd: WxcSlideNav.handleTouchEnd, // The following method does not use the arrow function, which results in this pointing error onTouchMove(e) { WxcSlideNav.handleTouchMove.call(this, e, this.$refs.bottomNav); }, onScroll(e) { WxcSlideNav.handleScroll.call(this, e, this.$refs.scroller, this.$refs.topNav, this.$refs.bottomNav); }
Prop | Type | Required | Default | Description |
---|---|---|---|---|
position | String | N | 'top' | nav position top/bottom |
height | [String,Number] | N | - | list height |
slideIn
slideInEnd
slideOut
slideOutEnd