打印/下载
参数
Vue案例
小程序案例

参数

  • isScroll: (Boolean) 是否滑动, 默认: true
  • scroll-x: (Boolean) x轴方向滑动, 默认: false
  • scroll-y: (Boolean) y轴方向滑动, 默认: true
  • upper: (Numbar) "顶部/左边"区域大小, 默认: 64
  • lowerBoundary: (Numbar) "底部/右边"触发 up/right 事件, 默认: 50
  • upperLoad: (Boolean) "顶部/左边"加载动画, 默认: true
  • upperIcon: (String) "顶部/左边"加载图标, 默认: 'ui ui_loading'
  • upperBg: (String) "顶部/左边"背景颜色, 默认: ''
  • upperColor: (String) "顶部/左边"字体图标颜色, 默认: ''
  • limit: (Numbar) 滑动距离触发swipe, 默认: 120

事件

  • 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" :scroll-x="true" @scroll="demoScroll" @left="demoLeft" @right="demoRight">
  <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: 200px;
  height: 100%;
}
.demo-text-1{background-color: green;}
.demo-text-2{background-color: blueviolet;}
.demo-text-3{background-color: orange;}

JavaScript

export default {
  components: {WmScrollView},
  methods:{

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

    /* 左拉 */
    demoLeft(res){
      console.log(res);
    },

    /* 右拉 */
    demoRight(res){
      console.log(res);
    },

  },
}

引入

{
  "usingComponents": {
    "wm-scroll-view": "/components/scroll-view/index"
  },
  "navigationStyle": "custom"
}

Html

<wm-scroll-view slot="scroll-view_H" class="html" scroll-y="true" bind:scroll="scroll" bind:swipe="back">
  <view class="scroll-view-item_H demo-text-1">1</view>
  <view class="scroll-view-item_H demo-text-2">2</view>
  <view class="scroll-view-item_H demo-text-3">3</view>
</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

import store from '../../store'
import create from '../../libray/store/create'
import {Back} from '../../libray/ui/index'

create(store,{
  data:{
    isLogin: null,
    uInfo: null,
    lists:[0,1,2,3,4,5,6,7,8,9],
  },

  /* 返回 */
  back(e){
    let name = e.currentTarget.dataset.swipe || e.detail;
    if(name=='left') return Back(1);
  },

  /* 事件 */
  scroll(e){
    console.log(e.detail);
  },

});
{{copy}}