123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- <template>
-
- <list
- class="u-list"
- :enableBackToTop="enableBackToTop"
- :loadmoreoffset="lowerThreshold"
- :showScrollbar="showScrollbar"
- :style="[listStyle]"
- :offset-accuracy="Number(offsetAccuracy)"
- @scroll="onScroll"
- @loadmore="scrolltolower"
- >
- <slot />
- </list>
-
-
- <scroll-view
- class="u-list"
- :scroll-into-view="scrollIntoView"
- :style="[listStyle]"
- scroll-y
- :scroll-top="Number(scrollTop)"
- :lower-threshold="Number(lowerThreshold)"
- :upper-threshold="Number(upperThreshold)"
- :show-scrollbar="showScrollbar"
- :enable-back-to-top="enableBackToTop"
- :scroll-with-animation="scrollWithAnimation"
- @scroll="onScroll"
- @scrolltolower="scrolltolower"
- @scrolltoupper="scrolltoupper"
- >
- <view>
- <slot />
- </view>
- </scroll-view>
-
- </template>
- <script>
- import props from './props.js';
-
- const dom = uni.requireNativePlugin('dom')
-
-
- export default {
- name: 'u-list',
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- watch: {
- scrollIntoView(n) {
- this.scrollIntoViewById(n)
- }
- },
- data() {
- return {
-
- innerScrollTop: 0,
-
- offset: 0,
- sys: uni.$u.sys()
- }
- },
- computed: {
- listStyle() {
- const style = {},
- addUnit = uni.$u.addUnit
- if (this.width != 0) style.width = addUnit(this.width)
- if (this.height != 0) style.height = addUnit(this.height)
-
- if (!style.height) style.height = addUnit(this.sys.windowHeight, 'px')
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
- }
- },
- provide() {
- return {
- uList: this
- }
- },
- created() {
- this.refs = []
- this.children = []
- this.anchors = []
- },
- mounted() {},
- methods: {
- updateOffsetFromChild(top) {
- this.offset = top
- },
- onScroll(e) {
- let scrollTop = 0
-
- scrollTop = e.contentOffset.y
-
-
- scrollTop = e.detail.scrollTop
-
- this.innerScrollTop = scrollTop
- this.$emit('scroll', Math.abs(scrollTop))
- },
- scrollIntoViewById(id) {
-
-
- const item = this.refs.find(item => item.$refs[id] ? true : false)
- dom.scrollToElement(item.$refs[id], {
-
- animated: this.scrollWithAnimation
- })
-
- },
-
- scrolltolower(e) {
- uni.$u.sleep(30).then(() => {
- this.$emit('scrolltolower')
- })
- },
-
-
- scrolltoupper(e) {
- uni.$u.sleep(30).then(() => {
- this.$emit('scrolltoupper')
-
- this.offset = 0
- })
- }
-
- },
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-list {
- @include flex(column);
- }
- </style>
|