打印/下载
垂直滚动
水平滚动
参数
小程序

垂直滚动

html

<wm-scroll-view
  class="demo"
  ref="DemoScroll"
  @down="reFresh"
  @up="upLoad"
  @scroll="scroll"
>
  <div class="item" v-for="(val,key) in lists" :key="key">val.name</div>
</wm-scroll-view>

Css

.demo{height: 100%;}
.item{
  padding: 0 15px;
  line-height: 60px;
  border: #F2F4F8 1px solid;
  box-sizing: border-box;
}

JavaScript

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

export default {
  components: {WmScrollView},
  data(){
    return {
      lists: [],
    }
  },
  mounted(){
    this.lists = this.getData(3);
    this.$refs.DemoScroll.refresh();
  },
  methods:{

    /* 下拉刷新 */
    reFresh(res){
      console.log('刷新',res);
      this.lists = this.getData(8);
      this.$refs.DemoScroll.pullDownFinish();
    },

    /* 上拉加载 */
    upLoad(res){
      console.log('加载',res);
      let data = this.getData(10);
      for(let i in data) this.lists.push(data[i]);
      this.$refs.DemoScroll.pullUpFinish();
    },

    /* 滚动 */
    scroll(res){
      // console.log(res);
    },

    /* 数据 */
    getData(n){
      let data = [];
      for(let i=0; i<n; i++) data.push({name:'Test'+(i+1)});
      return data;
    },

  }
}

水平滚动

html

<wm-scroll-view
  class="demo"
  ref="DemoScroll"
  :scroll-x="true"
  :scroll-y="false"
  @scroll="scroll"
>
  <div class="item" v-for="(val,key) in lists" :key="key">val.name</div>
</wm-scroll-view>

Css

.demo{
  height: 40vmin;
  background-color: #F2F4F6;
  padding: 10px 0;
}
.item{
  display: inline-block;
  line-height: 40vmin;
  width: calc(40vmin + 10px);
  margin: 0 10px;
  text-align: center;
  background-color: #FFF;
  box-sizing: border-box;
}

JavaScript

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

export default {
  components: {WmScrollView},
  data(){
    return {
      lists: [],
    }
  },
  mounted(){
    this.lists = this.getData(5);
    this.$refs.DemoScroll.refresh();
  },
  methods:{

    /* 滚动 */
    scroll(res){
      console.log(res);
    },

    /* 数据 */
    getData(n){
      let data = [];
      for(let i=0; i<n; i++) data.push({name:'Test'+(i+1)});
      return data;
    },

  }
}

参数

  • 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'

引入

{
  "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}}