123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <template>
- <view
- class="u-scroll-list"
- ref="u-scroll-list"
- >
-
-
- <scroller
- class="u-scroll-list__scroll-view"
- ref="u-scroll-list__scroll-view"
- scroll-direction="horizontal"
- :show-scrollbar="false"
- :offset-accuracy="1"
- @scroll="nvueScrollHandler"
- >
- <view class="u-scroll-list__scroll-view__content">
- <slot />
- </view>
- </scroller>
-
-
-
-
- <scroll-view
- class="u-scroll-list__scroll-view"
- scroll-x
- @scroll="wxs.scroll"
- @scrolltoupper="wxs.scrolltoupper"
- @scrolltolower="wxs.scrolltolower"
- :data-scrollWidth="scrollWidth"
- :data-barWidth="$u.getPx(indicatorBarWidth)"
- :data-indicatorWidth="$u.getPx(indicatorWidth)"
- :show-scrollbar="false"
- :upper-threshold="0"
- :lower-threshold="0"
- >
-
-
-
- <scroll-view
- class="u-scroll-list__scroll-view"
- scroll-x
- @scroll="scrollHandler"
- @scrolltoupper="scrolltoupperHandler"
- @scrolltolower="scrolltolowerHandler"
- :show-scrollbar="false"
- :upper-threshold="0"
- :lower-threshold="0"
- >
-
- <view class="u-scroll-list__scroll-view__content">
- <slot />
- </view>
- </scroll-view>
-
- <view
- class="u-scroll-list__indicator"
- v-if="indicator"
- :style="[$u.addStyle(indicatorStyle)]"
- >
- <view
- class="u-scroll-list__indicator__line"
- :style="[lineStyle]"
- >
- <view
- class="u-scroll-list__indicator__line__bar"
- :style="[barStyle]"
- ref="u-scroll-list__indicator__line__bar"
- ></view>
- </view>
- </view>
- </view>
- </template>
- <script
- src="./scrollWxs.wxs"
- module="wxs"
- lang="wxs"
- ></script>
- <script>
- const dom = uni.requireNativePlugin('dom')
- import nvueMixin from "./nvue.js"
- import props from './props.js';
- export default {
- name: 'u-scroll-list',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
-
- mixins: [uni.$u.mpMixin, uni.$u.mixin, nvueMixin, props],
-
- data() {
- return {
- scrollInfo: {
- scrollLeft: 0,
- scrollWidth: 0
- },
- scrollWidth: 0
- }
- },
- computed: {
-
- barStyle() {
- const style = {}
-
-
-
-
- const scrollLeft = this.scrollInfo.scrollLeft,
- scrollWidth = this.scrollInfo.scrollWidth,
- barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
- const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
- style.transform = `translateX(${ x }px)`
-
-
- style.width = uni.$u.addUnit(this.indicatorBarWidth)
- style.backgroundColor = this.indicatorActiveColor
- return style
- },
- lineStyle() {
- const style = {}
-
- style.width = uni.$u.addUnit(this.indicatorWidth)
- style.backgroundColor = this.indicatorColor
- return style
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- this.getComponentWidth()
- },
-
-
- scrollHandler(e) {
- this.scrollInfo = e.detail
- },
- scrolltoupperHandler() {
- this.scrollEvent('left')
- this.scrollInfo.scrollLeft = 0
- },
- scrolltolowerHandler() {
- this.scrollEvent('right')
-
-
- this.scrollInfo.scrollLeft = uni.$u.getPx(this.indicatorWidth) - uni.$u.getPx(this.indicatorBarWidth)
- },
-
-
- scrollEvent(status) {
- this.$emit(status)
- },
-
- async getComponentWidth() {
-
- await uni.$u.sleep(30)
-
- this.$uGetRect('.u-scroll-list').then(size => {
- this.scrollWidth = size.width
- })
-
-
- const ref = this.$refs['u-scroll-list']
- ref && dom.getComponentRect(ref, (res) => {
- this.scrollWidth = res.size.width
- })
-
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-scroll-list {
- padding-bottom: 10px;
- &__scroll-view {
- @include flex;
- &__content {
- @include flex;
- }
- }
- &__indicator {
- @include flex;
- justify-content: center;
- margin-top: 15px;
- &__line {
- width: 60px;
- height: 4px;
- border-radius: 100px;
- overflow: hidden;
- &__bar {
- width: 20px;
- height: 4px;
- border-radius: 100px;
- }
- }
- }
- }
- </style>
|