ScrollView 滚动区域/下拉刷新

Scan me!

用于模拟原生的滚动区域，并支持下拉刷新和加载更多 1.5.0+

引入

  1. import { ScrollView, ScrollViewRefresh, ScrollViewMore } from 'mand-mobile'
  3. Vue.component(ScrollView.name, ScrollView)

使用指南

ScrollViewRefresh为组件库内置的下拉刷新组件，仅用于作为视觉展示，需在插槽refresh)中使用，下拉刷新组件也可自定义

ScrollViewMore为组件库内置的加载更多组件，仅用于作为视觉展示，需在插槽more)中使用，加载更多组件也可自定义

代码演示

基础 添加内容

请在移动设备中扫码预览
  1. <template>
  2.   <div class="md-example-child md-example-child-scroll-view md-example-child-scroll-view-0">
  3.     <md-scroll-view
  4.       ref="scrollView"
  5.       @scroll="$_onScroll"
  6.     >
  7.       <div
  8.         v-for="i in list"
  9.         class="scroll-view-item"
  10.         :key="i"
  11.         @click="$_onItemClick(i)"
  12.       >
  13.         {{i}}
  14.       </div>
  15.     </md-scroll-view>
  16.   </div>
  17. </template>
  19. <script>
  20. import {ScrollView, Toast} from 'mand-mobile'
  22. export default {
  23.   name: 'scroll-view-demo-0',
  24.   components: {
  25.     [ScrollView.name]: ScrollView,
  26.   },
  27.   data() {
  28.     return {
  29.       list: 5,
  30.     }
  31.   },
  32.   mounted() {
  33.     window.ScrollViewTrigger0 = () => {
  34.       this.addItems()
  35.     }
  36.   },
  37.   methods: {
  38.     $_onItemClick(i) {
  39.       Toast.info(`Click ${i}`)
  40.     },
  41.     $_onScroll({scrollLeft, scrollTop}) {
  42.       console.log(`[Mand Mobile ScrollView - demo0 - onScroll] scrollLeft: ${scrollLeft}, scrollTop: ${scrollTop}`)
  43.     },
  44.     addItems() {
  45.       this.list += 5
  46.       // 如果把autoReflow设置为false, 需调用reflowScroller
  47.       this.$refs.scrollView.reflowScroller()
  48.     },
  49.   },
  50. }
  52. </script>
  54. <style lang="stylus">
  55. .md-example-child-scroll-view-0
  56.   height 400px
  57.   .scroll-view-item
  58.     padding 30px 0
  59.     text-align center
  60.     font-size 28px
  61.     font-family DINAlternate-Bold
  62.     border-bottom .5px solid #efefef
  63. </style>
  64.

加载更多

请在移动设备中扫码预览
  1. <template>
  2.   <div class="md-example-child md-example-child-scroll-view md-example-child-scroll-view-2">
  3.     <md-scroll-view
  4.       ref="scrollView"
  5.       :scrolling-x="false"
  6.       @endReached="$_onEndReached"
  7.     >
  8.       <div
  9.         v-for="i in list"
  10.         :key="i"
  11.         class="scroll-view-list"
  12.       >
  13.         <p class="scroll-view-item">{{i}}</p>
  14.       </div>
  15.       <md-scroll-view-more
  16.         slot="more"
  17.         :is-finished="isFinished"
  18.       >
  19.       </md-scroll-view-more>
  20.     </md-scroll-view>
  21.   </div>
  22. </template>
  24. <script>
  25. import {ScrollView, ScrollViewMore} from 'mand-mobile'
  27. export default {
  28.   name: 'scroll-view-demo-2',
  29.   components: {
  30.     [ScrollView.name]: ScrollView,
  31.     [ScrollViewMore.name]: ScrollViewMore,
  32.   },
  33.   data() {
  34.     return {
  35.       list: 10,
  36.       isFinished: false,
  37.     }
  38.   },
  39.   methods: {
  40.     $_onEndReached() {
  41.       if (this.isFinished) {
  42.         return
  43.       }
  44.       // async data
  45.       setTimeout(() => {
  46.         this.list += 5
  47.         if (this.list >= 20) {
  48.           this.isFinished = true
  49.         }
  50.         this.$refs.scrollView.finishLoadMore()
  51.       }, 1000)
  52.     },
  53.   },
  54. }
  56. </script>
  58. <style lang="stylus">
  59. .md-example-child-scroll-view-2
  60.   height 800px
  61.   .scroll-view-item
  62.     padding 30px 0
  63.     text-align center
  64.     font-size 32px
  65.     font-family DINAlternate-Bold
  66.     border-bottom .5px solid #efefef
  67. </style>
  68.

配合TabBar

请在移动设备中扫码预览
  1. <template>
  2.   <div class="md-example-child md-example-child-scroll-view md-example-child-scroll-view-4">
  3.     <md-scroll-view
  4.       ref="scrollView"
  5.       :scrolling-x="false"
  6.       @scroll="$_onScroll"
  7.     >
  8.       <md-tab-bar
  9.         slot="header"
  10.         ref="tabBar"
  11.         :default-index="activeBlockIndex - 1"
  12.         :titles="tabBarTitles"
  13.         :show-ink-bar="true"
  14.         :key="activeBlockIndex"
  15.         @indexChanged="$_onTabChange"
  16.       ></md-tab-bar>
  17.       <div
  18.         v-for="i in category"
  19.         :key="i"
  20.         class="scroll-view-category"
  21.       >
  22.         <div
  23.           v-for="j in list"
  24.           :key="j"
  25.           class="scroll-view-list"
  26.         >
  27.           <p class="scroll-view-item">{{`${i} - ${j}`}}</p>
  28.         </div>
  29.       </div>
  30.     </md-scroll-view>
  31.   </div>
  32. </template>
  34. <script>
  35. import {ScrollView, TabBar} from 'mand-mobile'
  37. export default {
  38.   name: 'scroll-view-demo-3',
  39.   components: {
  40.     [ScrollView.name]: ScrollView,
  41.     [TabBar.name]: TabBar,
  42.   },
  43.   data() {
  44.     return {
  45.       category: 5,
  46.       list: 5,
  47.       dimensions: [],
  48.       scrollY: 0,
  49.       isManual: false,
  50.     }
  51.   },
  52.   computed: {
  53.     tabBarTitles() {
  54.       return this.dimensions.map((item, index) => {
  55.         return index + 1
  56.       })
  57.     },
  58.     activeBlockIndex() {
  59.       let activeIndex = 1
  60.       this.dimensions.forEach((dimension, index) => {
  61.         if (this.scrollY >= dimension[0] && this.scrollY <= dimension[1]) {
  62.           activeIndex = index + 1
  63.         }
  64.       })
  65.       return activeIndex
  66.     },
  67.   },
  68.   mounted() {
  69.     // 如果内容发生变化，需重新初始化block和scroller
  70.     this.$_initScrollBlock()
  71.     // this.$refs.scrollView.reflowScroller()
  72.   },
  73.   methods: {
  74.     $_initScrollBlock() {
  75.       const blocks = this.$el.querySelectorAll('.scroll-view-category')
  77.       let offset = 0
  78.       Array.prototype.slice.call(blocks).forEach((block, index) => {
  79.         const innerHeight = block.clientHeight
  80.         this.$set(this.dimensions, index, [offset, offset + innerHeight])
  81.         offset += innerHeight
  82.       })
  83.     },
  84.     $_onScroll({scrollTop}) {
  85.       if (!this.isManual) {
  86.         this.scrollY = scrollTop
  87.       }
  88.     },
  89.     $_onTabChange(index) {
  90.       const offsetTop = this.dimensions[index][0]
  91.       this.isManual = true
  92.       this.$refs.scrollView.scrollTo(0, offsetTop, true)
  93.       setTimeout(() => {
  94.         this.scrollY = offsetTop
  95.         this.isManual = false
  96.       }, 500)
  97.     },
  98.   },
  99. }
  101. </script>
  103. <style lang="stylus">
  104. .md-example-child-scroll-view-4
  105.   position relative
  106.   height 800px
  107.   .md-tab-bar
  108.     box-shadow 0 2px 8px #f0f0f0
  109.   .scroll-view-container
  110.     padding-top 80px
  111.   .scroll-view-item
  112.     padding 30px 0
  113.     text-align center
  114.     font-size 32px
  115.     border-bottom .5px solid #efefef
  116. </style>
  117.

下拉刷新 触发下拉刷新

请在移动设备中扫码预览
  1. <template>
  2.   <div class="md-example-child md-example-child-scroll-view md-example-child-scroll-view-1">
  3.     <md-scroll-view
  4.       ref="scrollView"
  5.       :scrolling-x="false"
  6.       @refreshing="$_onRefresh"
  7.     >
  8.       <md-scroll-view-refresh
  9.         slot="refresh"
  10.         slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
  11.         :scroll-top="scrollTop"
  12.         :is-refreshing="isRefreshing"
  13.         :is-refresh-active="isRefreshActive"
  14.       ></md-scroll-view-refresh>
  15.       <div
  16.         v-for="i in list"
  17.         :key="i"
  18.         class="scroll-view-list"
  19.       >
  20.         <p class="scroll-view-item">{{i}}</p>
  21.       </div>
  22.     </md-scroll-view>
  23.   </div>
  24. </template>
  26. <script>
  27. import {ScrollView, ScrollViewRefresh} from 'mand-mobile'
  29. export default {
  30.   name: 'scroll-view-demo-0',
  31.   components: {
  32.     [ScrollView.name]: ScrollView,
  33.     [ScrollViewRefresh.name]: ScrollViewRefresh,
  34.   },
  35.   data() {
  36.     return {
  37.       list: 5,
  38.     }
  39.   },
  40.   mounted() {
  41.     window.ScrollViewTrigger1 = () => {
  42.       this.$refs.scrollView.triggerRefresh()
  43.     }
  44.   },
  45.   methods: {
  46.     $_onRefresh() {
  47.       // async data
  48.       setTimeout(() => {
  49.         this.list += 5
  50.         this.$refs.scrollView.finishRefresh()
  51.       }, 2000)
  52.     },
  53.   },
  54. }
  56. </script>
  58. <style lang="stylus">
  59. .md-example-child-scroll-view-1
  60.   height 800px
  61.   .scroll-view-item
  62.     padding 30px 0
  63.     text-align center
  64.     font-size 28px
  65.     font-family DINAlternate-Bold
  66.     border-bottom .5px solid #efefef
  67. </style>
  68.

粘性标题

请在移动设备中扫码预览
  1. <template>
  2.   <div class="md-example-child md-example-child-scroll-view md-example-child-scroll-view-3">
  3.     <md-scroll-view
  4.       ref="scrollView"
  5.       :scrolling-x="false"
  6.       @scroll="$_onScroll"
  7.     >
  8.       <div
  9.         v-for="i in category"
  10.         :key="i"
  11.         class="scroll-view-category"
  12.       >
  13.         <p class="scroll-view-category-title">{{ i }}</p>
  14.         <div
  15.           v-for="j in list"
  16.           :key="j"
  17.           class="scroll-view-list"
  18.         >
  19.           <p class="scroll-view-item">{{`${i} - ${j}`}}</p>
  20.         </div>
  21.       </div>
  22.     </md-scroll-view>
  23.     <p v-if="activeBlockIndex > 0" class="scroll-view-striky-title">{{ activeBlockIndex }}</p>
  24.   </div>
  25. </template>
  27. <script>
  28. import {ScrollView} from 'mand-mobile'
  30. export default {
  31.   name: 'scroll-view-demo-3',
  32.   components: {
  33.     [ScrollView.name]: ScrollView,
  34.   },
  35.   data() {
  36.     return {
  37.       category: 5,
  38.       list: 5,
  39.       dimensions: [],
  40.       scrollY: 0,
  41.     }
  42.   },
  43.   computed: {
  44.     activeBlockIndex() {
  45.       let activeIndex = -1
  46.       this.dimensions.forEach((dimension, index) => {
  47.         if (this.scrollY >= dimension[0] && this.scrollY <= dimension[1]) {
  48.           activeIndex = index + 1
  49.         }
  50.       })
  51.       return activeIndex
  52.     },
  53.   },
  54.   mounted() {
  55.     // 如果内容发生变化，需重新初始化block和scroller
  56.     this.$_initScrollBlock()
  57.     // this.$refs.scrollView.reflowScroller()
  58.   },
  59.   methods: {
  60.     $_initScrollBlock() {
  61.       const blocks = this.$el.querySelectorAll('.scroll-view-category')
  62.       let offset = 0
  63.       Array.prototype.slice.call(blocks).forEach((block, index) => {
  64.         const innerHeight = block.clientHeight
  65.         this.$set(this.dimensions, index, [offset, offset + innerHeight])
  66.         offset += innerHeight
  67.       })
  68.     },
  69.     $_onScroll({scrollTop}) {
  70.       this.scrollY = scrollTop
  71.     },
  72.   },
  73. }
  75. </script>
  77. <style lang="stylus">
  78. .md-example-child-scroll-view-3
  79.   position relative
  80.   height 800px
  81.   .scroll-view-striky-title
  82.     position absolute
  83.     top 0
  84.     left 0
  85.     right 0
  86.   .scroll-view-category-title, .scroll-view-striky-title
  87.     padding 10px 0
  88.     text-align center
  89.     font-size 32px
  90.     font-family DINAlternate-Bold
  91.     background-color #f0f0f0
  92.   .scroll-view-item
  93.     padding 30px 0
  94.     text-align center
  95.     font-size 32px
  96.     border-bottom .5px solid #efefef
  97. </style>
  98.

API

ScrollView Props

属性说明类型默认值备注
scrolling-x水平滚动Booleantrue-
scrolling-y垂直滚动Booleantrue-
bouncing可回弹Booleantrue-
autoReflow 1.5.3+内容发生变化时自动重置滚动区域尺寸Booleanfalse当设置为false时，内容发生变化需手动调用reflowScroller
endReachedThreshold触发到达底部的提前量Number0单位px

ScrollViewRefresh Props

属性说明类型默认值备注
scroll-top距离顶部距离Number0单位px
is-refresh-active释放可刷新状态Booleanfalse-
is-refreshing刷新中状态Booleanfalse-
refresh-text待刷新文案String下拉刷新-
refresh-active-text释放可刷新文案String释放刷新-
refreshing-text刷新中文案String刷新中…-

ScrollViewMore Props

属性说明类型默认值备注
is-finished全部已加载Booleanfalse-
loading-text加载中文案String更多加载中…-
finished-text全部已加载文案String全部已加载-

ScrollView Slots

default

滚动区域内容插槽，当内容发生变化是，需要调用reflowScroller重置滚动区域，参考reflowScroller)

refresh

下拉刷新组件插槽，可如下使用slot-scoped获取相关滚动状态（不兼容slot-scoped时滚动状态也可通过事件中动态设置）

  1. <md-scroll-view-refresh
  2.   slot="refresh"
  3.   slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
  4.   :scroll-top="scrollTop"
  5.   :is-refreshing="isRefreshing"
  6.   :is-refresh-active="isRefreshActive"
  7. ></md-scroll-view-refresh>
more

加载更多组件插槽

header

吸顶区域插槽

吸底区域插槽

ScrollView Methods

reflowScroller()

重置滚动区域，一般滚动区域中的内容发生变化之后需调用

scrollTo(left, top, animate = false)

滚动至指定位置

参数说明类型
left距左侧距离Number
top距顶部距离Number
animate使用动画Boolean
triggerRefresh()

触发下拉刷新

finishRefresh()

停止下拉刷新

finishLoadMore()

停止加载更多

ScrollView Events

@scroll({scrollLeft, scrollTop})

滚动事件

属性说明类型
scrollLeft距左侧距离Number
scrollTop距顶部距离Number
@refreshActive()

释放可刷新事件

@refreshing()

刷新中事件

@endReached()

滚动触底事件