王明 / Recruitment

Blame view

node_modules/uview-ui/components/u-back-top/u-back-top.vue 3.27 KB
Edit Raw Normal View History Permalink
c7add6cf   “wangming”   初始版本开发完毕 
1
 
  <template>
25852764   unknown   s 
2
3
4
5
6
7
8
9
10
11
12
13
 
  	<view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{
  		bottom: bottom + 'rpx',
  		right: right + 'rpx',
  		borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
  		zIndex: uZIndex,
  		opacity: opacity
  	}, customStyle]">
  		<view class="u-back-top__content" v-if="!$slots.default && !$slots.$default">
  			<u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
  			<view class="u-back-top__content__tips">
  				{{tips}}
  			</view>
c7add6cf   “wangming”   初始版本开发完毕 
14
15
 
  		</view>
  		<slot v-else />
25852764   unknown   s 
16
 
  	</view>
c7add6cf   “wangming”   初始版本开发完毕 
17
18
19
 
  </template>
  
  <script>
c7add6cf   “wangming”   初始版本开发完毕 
20
21
 
  	export default {
  		name: 'u-back-top',
25852764   unknown   s 
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
 
  		props: {
  			// 返回顶部的形状，circle-圆形，square-方形
  			mode: {
  				type: String,
  				default: 'circle'
  			},
  			// 自定义图标
  			icon: {
  				type: String,
  				default: 'arrow-upward'
  			},
  			// 提示文字
  			tips: {
  				type: String,
  				default: ''
  			},
  			// 返回顶部滚动时间
  			duration: {
  				type: [Number, String],
  				default: 100
  			},
  			// 滚动距离
  			scrollTop: {
  				type: [Number, String],
  				default: 0
c7add6cf   “wangming”   初始版本开发完毕 
47
 
  			},
25852764   unknown   s 
48
49
50
51
 
  			// 距离顶部多少距离显示，单位rpx
  			top: {
  				type: [Number, String],
  				default: 400
c7add6cf   “wangming”   初始版本开发完毕 
52
 
  			},
25852764   unknown   s 
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
 
  			// 返回顶部按钮到底部的距离，单位rpx
  			bottom: {
  				type: [Number, String],
  				default: 200
  			},
  			// 返回顶部按钮到右边的距离，单位rpx
  			right: {
  				type: [Number, String],
  				default: 40
  			},
  			// 层级
  			zIndex: {
  				type: [Number, String],
  				default: '9'
  			},
  			// 图标的样式，对象形式
  			iconStyle: {
  				type: Object,
  				default() {
  					return {
  						color: '#909399',
  						fontSize: '38rpx'
  					}
  				}
  			},
  			// 整个组件的样式
  			customStyle: {
  				type: Object,
  				default() {
  					return {}
  				}
  			}
  		},
  		watch: {
  			showBackTop(nVal, oVal) {
  				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
  				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
  				if(nVal) {
  					this.uZIndex = this.zIndex;
  					this.opacity = 1;
c7add6cf   “wangming”   初始版本开发完毕 
93
 
  				} else {
25852764   unknown   s 
94
95
 
  					this.uZIndex = -1;
  					this.opacity = 0;
c7add6cf   “wangming”   初始版本开发完毕 
96
 
  				}
25852764   unknown   s 
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
  			}
  		},
  		computed: {
  			showBackTop() {
  				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
  				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
  				return this.scrollTop > uni.upx2px(this.top);
  			},
  		},
  		data() {
  			return {
  				// 不透明度，为了让组件有一个显示和隐藏的过渡动画
  				opacity: 0,
  				// 组件的z-index值，隐藏时设置为-1，就会看不到
  				uZIndex: -1
c7add6cf   “wangming”   初始版本开发完毕 
112
113
114
115
 
  			}
  		},
  		methods: {
  			backToTop() {
c7add6cf   “wangming”   初始版本开发完毕 
116
117
118
119
 
  				uni.pageScrollTo({
  					scrollTop: 0,
  					duration: this.duration
  				});
c7add6cf   “wangming”   初始版本开发完毕 
120
121
122
123
124
125
 
  			}
  		}
  	}
  </script>
  
  <style lang="scss" scoped>
25852764   unknown   s 
126
127
 
  	@import "../../libs/css/style.components.scss";
c7add6cf   “wangming”   初始版本开发完毕 
128
 
  	.u-back-top {
25852764   unknown   s 
129
130
131
132
133
 
  		width: 80rpx;
  		height: 80rpx;
  		position: fixed;
  		z-index: 9;
  		@include vue-flex;
c7add6cf   “wangming”   初始版本开发完毕 
134
 
  		flex-direction: column;
c7add6cf   “wangming”   初始版本开发完毕 
135
 
  		justify-content: center;
25852764   unknown   s 
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
  		background-color: #E1E1E1;
  		color: $u-content-color;
  		align-items: center;
  		transition: opacity 0.4s;
  		
  		&__content {
  			@include vue-flex;
  			flex-direction: column;
  			align-items: center;
  			
  			&__tips {
  				font-size: 24rpx;
  				transform: scale(0.8);
  				line-height: 1;
  			}
c7add6cf   “wangming”   初始版本开发完毕 
151
152
153
 
  		}
  	}
  </style>