| | |
| | | |
| | | <template> |
| | | <scroll-view |
| | | :id="elmId" |
| | | class="c-infinite-scroll" |
| | | :scrollY="true" |
| | | lowerThreshold="100" |
| | | @scroll="evt=>onScroll(evt)" |
| | | @touchstart="evt=>onTouch(evt)" |
| | | @touchmove="evt=>onTouch(evt)" |
| | | @touchend="evt=>onTouch(evt)" |
| | | @scrollToLower="evt=>onScrollToLower(evt)" |
| | | lowerThreshold="100" |
| | | > |
| | | <view |
| | | class="c-infinite-top" |
| | |
| | | <text |
| | | class="c-infinite-empty" |
| | | v-else |
| | | >暂无数据...</text> |
| | | >(暂无数据)</text> |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | | </template> |
| | | |
| | | <script> |
| | | import Taro from '@tarojs/taro'; |
| | | import { AtActivityIndicator } from 'taro-ui-vue'; |
| | | import { Tools } from '@components/common/Tools'; |
| | | import './cInfiniteScroll.scss'; |
| | | |
| | | export default { |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | elmId: 'cis-' + Tools.createGUID(), |
| | | // 初始化状态 |
| | | inital: false, |
| | | // 当前页面 |
| | |
| | | // 开始加载 |
| | | this.inital = true; |
| | | this.loading = true; |
| | | this.onLoadMore({ |
| | | current: this.current, |
| | | next: this.current + 1, |
| | | // 加载成功 |
| | | success: options => { |
| | | setTimeout(() => { |
| | | this.loading = false; |
| | | // 没有数据 |
| | | if (!options.pageTotal || options.pageTotal <= 0) { |
| | | this.ending = true; |
| | | } |
| | | // 有数据 |
| | | else { |
| | | this.pageTotal = options.pageTotal; |
| | | this.current = this.current + 1; |
| | | // 已到最后一页 |
| | | if (this.current >= this.pageTotal) { |
| | | setTimeout(() => { |
| | | this.onLoadMore({ |
| | | current: this.current, |
| | | next: this.current + 1, |
| | | // 加载成功 |
| | | success: options => { |
| | | this.$nextTick(() => { |
| | | this.loading = false; |
| | | // 没有数据 |
| | | if (!options.pageTotal || options.pageTotal <= 0) { |
| | | this.ending = true; |
| | | this.pageTotal = 0; |
| | | } |
| | | } |
| | | // 还原下拉 |
| | | // 有数据 |
| | | else { |
| | | this.pageTotal = options.pageTotal; |
| | | this.current = this.current + 1; |
| | | // 已到最后一页 |
| | | if (this.current >= this.pageTotal) { |
| | | this.ending = true; |
| | | } |
| | | } |
| | | // 如果下拉刷新,还原下拉 |
| | | if (this.touch.dargState === 2) { |
| | | this.touch.driftTop = 0; |
| | | setTimeout(() => { |
| | | this.touch.dargState = 0; |
| | | }, 300); |
| | | } |
| | | }); |
| | | }, |
| | | // 加载失败 |
| | | fail: () => { |
| | | this.loading = false; |
| | | this.ending = true; |
| | | this.pageTotal = 0; |
| | | // 如果下拉刷新,还原下拉 |
| | | if (this.touch.dargState === 2) { |
| | | this.touch.driftTop = 0; |
| | | setTimeout(() => { |
| | | this.touch.dargState = 0; |
| | | }, 300); |
| | | } |
| | | }, 100); |
| | | }, |
| | | // 加载失败 |
| | | fail: () => { |
| | | this.loading = false; |
| | | // 还原下拉 |
| | | if (this.touch.dargState === 2) { |
| | | this.touch.driftTop = 0; |
| | | setTimeout(() => { |
| | | this.touch.dargState = 0; |
| | | }, 300); |
| | | } |
| | | }, |
| | | }); |
| | | }, |
| | | }); |
| | | }, 100); |
| | | }, |
| | | onScroll(evt) { |
| | | // 已经滚动(滚动后禁止下拉刷新) |
| | |
| | | // 小程序中滚动到底部 |
| | | onScrollToLower() { |
| | | if (process.env.TARO_ENV !== 'weapp') { |
| | | return; |
| | | } |
| | | this.hanldeLoadMore(); |
| | | }, |
| | | // 初始加载 |
| | | initScroll() { |
| | | // 已初始化,跳过 |
| | | if (this.inital) { |
| | | return; |
| | | } |
| | | this.hanldeLoadMore(); |
| | |
| | | } |
| | | } |
| | | }, |
| | | refresh() { |
| | | // 初始加载 |
| | | $initScroll() { |
| | | // 已初始化,跳过 |
| | | if (this.inital) { |
| | | return; |
| | | } |
| | | this.hanldeLoadMore(); |
| | | }, |
| | | // 刷新加载 |
| | | $refresh(autoStart) { |
| | | Taro.pageScrollTo({ |
| | | selector: '#' + this.elmId, |
| | | scrollTop: 0, |
| | | }); |
| | | this.ending = false; |
| | | this.current = 0; |
| | | this.hanldeLoadMore(); |
| | | if (autoStart === 'off') { |
| | | this.inital = false; |
| | | } else { |
| | | this.hanldeLoadMore(); |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |