wxc-slide-nav

Weex 导航滑动视窗增大组件

规则

• 上下滚动列表的时候，可以优雅地动画收起展开导航条，使得能展示更多的列表内容

Demo

使用方法

  1. <template>
    2.   <div class="wrapper">
    3.       <list
    4.         ref="scroller"
    5.         @scroll="onScroll"
    6.         @touchstart="onTouchStart"
    7.         @touchmove="onTouchMove"
    8.         @touchend="onTouchEnd"
    9.         @touchcancel="onTouchEnd"
    10.         @touchstart.native="onTouchStart"
    11.         @touchmove.native="onTouchMove"
    12.         @touchend.native="onTouchEnd"
    13.         @touchcancel.native="onTouchEnd">
    14.         <cell>
    15.           <div class="padding"></div>
    16.         </cell>
    17.         <cell class="cell" v-for="(item, index) in items">
    18.             <text class="text">{{index + 1}}</text>
    19.         </cell>
    20.       </list>
    21.   22.       <wxc-slide-nav class="nav nav-top" ref="topNav" position="top" @slideIn="slideIn">
    23.         <div class="nav-cell"><text>前一天</text></div>
    24.         <div class="nav-cell"><text>06-22</text></div>
    25.         <div class="nav-cell"><text>后一天</text></div>
    26.       </wxc-slide-nav>
    27.   28.       <wxc-slide-nav class="nav nav-bottom" ref="bottomNav" position="bottom" @slideOut="slideOut">
    29.         <div class="nav-cell"><text class="nav-text">筛选</text></div>
    30.         <div class="nav-cell"><text class="nav-text">时间</text></div>
    31.         <div class="nav-cell"><text class="nav-text">从低到高</text></div>
    32.       </wxc-slide-nav>
    33.     </div>
    34. </template>
    35. <script>
    36.   import { WxcSlideNav } from 'weex-ui';
    37.   export default {
    38.       data() {
    39.         return { items: new Array(50) }
    40.       },
    41.       components: { WxcSlideNav },
    42.       methods: {
    43.         onTouchStart: WxcSlideNav.handleTouchStart,
    44.         onTouchEnd: WxcSlideNav.handleTouchEnd,
    45.         onTouchMove(e) {
    46.           WxcSlideNav.handleTouchMove.call(this, e, this.$refs.bottomNav);
    47.         },
    48.         onScroll(e) {
    49.           WxcSlideNav.handleScroll.call(this, e, this.$refs.scroller, this.$refs.topNav, this.$refs.bottomNav);
    50.         },
    51.         slideIn() {},
    52.         slideOut() {}
    53.       }
    54.   }
    55. </script>Click to copy

由于兼容性以及其他原因，目前API使用起来不是特别优雅，需要配合在<list>组件上手动绑定事件 1. <list 2. ref="scroller" 3. @scroll="onScroll" 4. 5. @touchstart="onTouchStart" 6. @touchmove="onTouchMove" 7. @touchend="onTouchEnd" 8. @touchcancel="onTouchEnd" 9. 10. @touchstart.native="onTouchStart" 11. @touchmove.native="onTouchMove" 12. @touchend.native="onTouchEnd" 13. @touchcancel.native="onTouchEnd"> 14. 15.

另外list顶部需要添加padding，因为list和cell不支持padding和margin样式，需要在里面加一个占位的cell充当padding，高度与 topNav 一致 1. 2.

然后在事件回调里绑定slideNav的事件方法，其中onTouchMove和onScroll需要传入scroller和slideNav对象 1. onTouchStart: WxcSlideNav.handleTouchStart, 2. onTouchEnd: WxcSlideNav.handleTouchEnd, 3. // 下面方法不要使用箭头函数，会导致this指向错误 4. onTouchMove(e) { 5. WxcSlideNav.handleTouchMove.call(this, e, this.$refs.bottomNav); 6. }, 7. onScroll(e) { 8. WxcSlideNav.handleScroll.call(this, e, this.$refs.scroller, this.$refs.topNav, this.$refs.bottomNav); 9. }Click to copy

可配置参数

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-slide-nav/