|注册
打印/下载
VueAdmin
UI组件
使用
案例

ScrollView 滑动视图

import WmScrollView from '@/components/scroll-view'
<wm-scroll-view :scroll-x="true" @scroll="demoScroll"></wm-scroll-view>

参数

  • isScroll: (Boolean) 是否滑动, 默认: true
  • scroll-x: (Boolean) x轴方向滑动, 默认: false
  • scroll-y: (Boolean) y轴方向滑动, 默认: true
  • upper: (Numbar) "顶部/左边"区域大小, 默认: 64
  • lower: (Numbar) "底部/右边"区域大小, 默认: 64
  • upperLoad: (Boolean) "顶部/左边"加载动画, 默认: true
  • lowerLoad: (Boolean) "底部/右边"加载动画, 默认: true
  • upperIcon: (String) "顶部/左边"加载图标, 默认: 'ui ui_loading'
  • lowerIcon: (String) "底部/右边"加载图标, 默认: 'ui ui_loading'
  • upperBg: (String) "顶部/左边"背景颜色, 默认: ''
  • lowerBg: (String) "底部/右边"背景颜色, 默认: ''
  • upperColor: (String) "顶部/左边"文本颜色, 默认: ''
  • lowerColor: (String) "底部/右边"文本颜色, 默认: ''

事件

  • scroll: (event) 滚动时触发, 返回: {x,y}
  • up: (event) 上拉时触发, 返回: {位置信息}
  • down: (event) 下拉时触发, 返回: {位置信息}
  • left: (event) 左拉时触发, 返回: {位置信息}
  • right: (event) 右拉时触发, 返回: {位置信息}
  • swipe: (event) 滑动方向, 返回: 'left' | 'right' | 'up' | 'down'

引入

import WmScrollView from '@/components/scroll-view'

Html

<wm-scroll-view class="scroll-view_H" ref="demo" :scroll-x="true" @scroll="demoScroll" @down="demoDown">
  <div class="scroll-view-item_H demo-text-1">1</div>
  <div class="scroll-view-item_H demo-text-2">2</div>
  <div class="scroll-view-item_H demo-text-3">3</div>
</wm-scroll-view>

CSS

.scroll-view_H{
  white-space: nowrap;
  height: 50px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 50%;
  height: 100%;
}
.demo-text-1{background-color: green;}
.demo-text-2{background-color: blueviolet;}
.demo-text-3{background-color: orange;}

JavaScript

export default {
  methods:{

    /* 监听滚动 */
    demoScroll(res){
      console.log(res);
    },

    /* 下拉 */
    demoDown(res){
      console.log(res);
    },

    /* 指定位置 */
    demoCilck(){
      this.$refs.demo.scrollTo('max');
    },

  },
}
{{copy}}