1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
| <template>
| <view class="tn-scroll-list-class tn-scroll-list">
| <scroll-view
| class="tn-scroll-list__scroll-view"
| scroll-x
| :upper-threshold="0"
| :lower-threshold="0"
| @scroll="scrollHandler"
| @scrolltoupper="scrollToUpperHandler"
| @scrolltolower="scrollToLowerHandler"
| >
| <view class="tn-scroll-list__scroll-view__content">
| <slot></slot>
| </view>
| </scroll-view>
|
| <!-- 指示器-->
| <view
| v-if="indicator"
| class="tn-scroll-list__indicator"
| :style="[indicatorStyle]"
| >
| <view class="tn-scroll-list__indicator__line" :style="[lineStyle]">
| <view class="tn-scroll-list__indicator__line__bar" :style="[barStyle]"></view>
| </view>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| name: 'tn-scroll-list',
| props: {
| // 是否显示指示器
| indicator: {
| type: Boolean,
| default: true
| },
| // 指示器整体宽度
| indicatorWidth: {
| type: [String, Number],
| default: 50
| },
| // 指示器滑块的宽度
| indicatorBarWidth: {
| type: [String, Number],
| default: 20
| },
| // 指示器颜色
| indicatorColor: {
| type: String,
| default: '#E6E6E6'
| },
| // 指示器激活时颜色
| indicatorActiveColor: {
| type: String,
| default: '#01BEFF'
| },
| // 自定义指示器样式
| indicatorStyle: {
| type: Object,
| default() {
| return {}
| }
| }
| },
| computed: {
| // 指示器滑块样式
| barStyle() {
| let style = {}
| // 获取滑动距离的比值
| // 滑块当前移动距离与总需滑动距离(指示器的总宽度减去滑块宽度)的比值 = scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比
| const scrollLeft = this.scrollInfo.scrollLeft,
| scrollWidth = this.scrollInfo.scrollWidth,
| barAllMoveWidth = uni.upx2px(this.indicatorWidth) - uni.upx2px(this.indicatorBarWidth);
| const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
| style.transform = `translateX(${x}px)`
| // 设置滑块的宽度和背景颜色
| style.width = `${this.indicatorBarWidth}rpx`
| style.backgroundColor = this.indicatorActiveColor
| return style
| },
| // 指示器整体样式
| lineStyle() {
| let style = {}
| style.width = `${this.indicatorWidth}rpx`
| style.backgroundColor = this.indicatorColor
| return style
| }
| },
| data() {
| return {
| // 滑动时滑块信息
| scrollInfo: {
| scrollLeft: 0,
| scrollWidth: 0
| },
| // 滑动区域的宽度
| scrollWidth: 0
| }
| },
| mounted() {
| this.$nextTick(() => {
| this.init()
| })
| },
| methods: {
| // 初始化
| init() {
| this.getComponentWidth()
| },
| // 处理滚动事件
| scrollHandler(event) {
| this.scrollInfo = event.detail
| },
| // 滚动到最左边触发事件
| scrollToUpperHandler() {
| this.$emit('left')
| this.scrollInfo.scrollLeft = 0
| },
| // 滚动到最右边触发事件
| scrollToLowerHandler() {
| this.$emit('right')
| // this.scrollInfo.scrollLeft = uni.upx2px(this.indicatorWidth) - uni.upx2px(this.indicatorBarWidth)
| },
| // 获取组件的宽度
| getComponentWidth() {
| this._tGetRect('.tn-scroll-list').then(res => {
| if (!res) {
| setTimeout(() => {
| this.getComponentWidth()
| }, 10)
| return
| }
| this.scrollWidth = res.width
| })
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
|
| .tn-scroll-list {
| padding-bottom: 20rpx;
|
| &__scroll-view {
| display: flex;
| flex-direction: row;
|
| &__content {
| display: flex;
| flex-direction: row;
| }
| }
|
| &__indicator {
| display: flex;
| flex-direction: row;
| justify-content: center;
| margin-top: 30rpx;
|
| &__line {
| width: 120rpx;
| height: 8rpx;
| border-radius: 200rpx;
| overflow: hidden;
|
| &__bar {
| width: 40rpx;
| height: 8rpx;
| border-radius: 200rpx;
| }
| }
| }
| }
| </style>
|
|
