Scroller 滚动请使用手机扫码体验

局部滚动组件,支持惯性、吸边回弹。纵向可支持下拉刷新和上拉加载,横向可支持滚动末尾跳转。

基本用法

横向使用,支持惯性、吸边回弹,支持滚动末尾跳转。

  1. html
    <nut-scroller @jump="jump()">
  2. <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">
  3. <dl class="nut-scroller-item-info">
  4. <dt>防水升级版 迷你小音</dt>
  5. <dd>2018-02-25</dd>
  6. </dl>
  7. </div>
  8. <slot slot="more"><div class="nut-hor-jump-more">查看更多</div></slot>
  9. </nut-scroller>

横向小于一屏

  1. html
    <div class="hor-panel">
  2. <nut-scroller @jump="jump()">
  3. <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData3" :key="index">
  4. <dl class="nut-scroller-item-info">
  5. <dt>防水升级版 蓝牙音箱 小音</dt>
  6. <dd>2018-02-25</dd>
  7. </dl>
  8. </div>
  9. <slot slot="more" ><div class="nut-hor-jump-more">查看更多</div></slot>
  10. </nut-scroller>
  11. </div>

纵向使用,支持下拉刷新和上拉加载更多。

  1. html
    <nut-scroller
  2. :is-un-more="isUnMore1"
  3. :is-loading="isLoading1"
  4. :type="'vertical'"
  5. @loadMore="loadMoreVert"
  6. @pulldown="pulldown"
  7. >
  8. <div slot="list" class="nut-vert-list-panel">
  9. <div class="nut-vert-list-item" v-for="(item, index) of listData1" :key="index">
  10. <dl class="nut-scroller-item-info">
  11. <dt>防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音</dt>
  12. <dd>2018-02-25</dd>
  13. </dl>
  14. </div>
  15. </div>
  16. </nut-scroller>

纵向不满一屏

  1. html
    <nut-scroller
  2. :is-un-more="isUnMore2"
  3. :is-loading="isLoading2"
  4. :type="'vertical'"
  5. @loadMore="loadMoreVert2"
  6. @pulldown="pulldown2"
  7. >
  8. <div slot="list" class="nut-vert-list-panel">
  9. <div class="nut-vert-list-item" v-for="(item, index) of listData2" :key="index">
  10. <dl class="nut-scroller-item-info">
  11. <dt>防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音</dt>
  12. <dd>2018-02-25</dd>
  13. </dl>
  14. </div>
  15. </div>
  16. </nut-scroller>
  1. javascript
    export default {
  2. data() {
  3. return {
  4. listData: new Array(20),
  5. listData1: new Array(20),
  6. listData2: [1, 2],
  7. listData3: [1],
  8. maxPages: 4,
  9. isUnMore1: false,
  10. isLoading1: false,
  11. page1: 2,
  12. maxPages2: 1,
  13. isUnMore2: false,
  14. isLoading2: false,
  15. page2: 2,
  16. timers: null,
  17. };
  18. },
  19. methods: {
  20. jump() {
  21. location.href = 'http://www.jd.com';
  22. },
  23. loadMoreVert() {
  24. this.isLoading1 = true;
  25. if (this.page1 > this.maxPages) {
  26. this.isUnMore1 = true;
  27. this.isLoading1 = false;
  28. } else {
  29. clearTimeout(this.timers);
  30. this.timer = setTimeout(() => {
  31. this.isLoading1 = false;
  32. this.isUnMore1 = false;
  33. this.listData1 = new Array(20 * this.page1);
  34. this.page1 = ++this.page1;
  35. }, 300);
  36. }
  37. },
  38. pulldown() {
  39. this.isLoading1 = true;
  40. clearTimeout(this.timers);
  41. this.timer = setTimeout(() => {
  42. this.isLoading1 = false;
  43. this.isUnMore1 = false;
  44. this.listData1 = new Array(20);
  45. this.page1 = 2;
  46. }, 3000);
  47. },
  48. loadMoreVert2() {
  49. this.isLoading2 = true;
  50. if (this.page2 > this.maxPages2) {
  51. this.isUnMore2 = true;
  52. this.isLoading2 = false;
  53. } else {
  54. clearTimeout(this.timers);
  55. this.timer = setTimeout(() => {
  56. this.isLoading2 = false;
  57. this.isUnMore2 = false;
  58. this.listData2 = new Array(20 * this.page2);
  59. this.page2 = ++this.page1;
  60. }, 300);
  61. }
  62. },
  63. pulldown2() {
  64. this.isLoading2 = true;
  65. clearTimeout(this.timers);
  66. this.timer = setTimeout(() => {
  67. this.isLoading2 = false;
  68. this.isUnMore2 = false;
  69. this.listData2 = new Array(10);
  70. this.page2 = 2;
  71. }, 300);
  72. }
  73. },
  74. destroyed() {
  75. clearTimeout(this.timer);
  76. }
  77. };

Prop

字段说明类型默认值
type类型,’horizontal’横向或’vertical’纵向String‘horizontal’
stretch拉伸范围Number100
isUnMore是否没有更多Booleanfalse
isLoading是否正在加载Booleanfalse
propsTimetype=vertical时,加载成功后pulldownTxt停留时间,单位为 msNumber0
threshold距离底部多少开始加载Number100
pulldownTxt下拉展示文案String‘下拉刷新’
loadMoreTxt上拉展示文案String‘上拉加载’
unloadMoreTxt没有更多数据展示文案String‘没有更多了’
scrollTo滚动到指定位置,只能设置负数,需要配合scrollToCbk使用Number1

Event

字段说明回调参数
pulldown下拉刷新回调-
loadMore上拉加载回调-
jump查看更多跳转回调-
scrollToCbk滚动到指定位置之后,scrollTo参数设置成默认值-
scrollChange实时监听滚动y轴坐标,type vertical时生效滑动高度

Scroller 滚动 - 图1