Skip to content

Commit f22d21a

Browse files
wlxuquwlxuqu
committed
修复dropdown组件某些情况可能会错位的问题
1 parent 9561247 commit f22d21a

File tree

6 files changed

+65
-20
lines changed

6 files changed

+65
-20
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717

1818
uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
1919

20-
## [点击加群交流反馈：1129077272](https://qm.qq.com/cgi-bin/qm/qr?k=1FfucLpozYbnb7FWo_KsqAdEi1mE3Qrf&jump_from=webapi)
20+
## [官方文档：https://www.uviewui.com](https://www.uviewui.com)
21+
22+
### [点击加群交流反馈：1129077272](https://qm.qq.com/cgi-bin/qm/qr?k=1FfucLpozYbnb7FWo_KsqAdEi1mE3Qrf&jump_from=webapi)
2123

2224
## 特性
2325

@@ -39,8 +41,6 @@ uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全
3941

4042
## 友情链接
4143

42-
<br>
43-
4444
#### **vue-admin-beautiful** —— [企业级、通用型中后台前端解决方案（基于vue/cli 4 最新版，同时支持电脑，手机，平板）](https://github.com/chuzhixin/vue-admin-beautiful)
4545

4646
#### **vue-admin-beautiful** —— [在线演示](http://beautiful.panm.cn/vue-admin-beautiful/#/index)

‎pages/componentsB/waterfall/index.vue

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,30 @@
33
<u-waterfall v-model="flowList" ref="uWaterfall">
44
<template v-slot:left="{ leftList }">
55
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
6-
<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
7-
<!-- #ifndef MP-WEIXIN -->
6+
<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
87
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
9-
<!-- #endif -->
10-
<!-- #ifdef MP-WEIXIN -->
11-
<view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
12-
<!-- #endif -->
138
<view class="demo-title">{{ item.title }}</view>
149
<view class="demo-price">{{ item.price }}元</view>
1510
<view class="demo-tag">
1611
<view class="demo-tag-owner">自营</view>
1712
<view class="demo-tag-text">放心购</view>
1813
</view>
1914
<view class="demo-shop">{{ item.shop }}</view>
20-
<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
2115
<view class="u-close">
2216
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
2317
</view>
2418
</view>
2519
</template>
2620
<template v-slot:right="{ rightList }">
2721
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
28-
<!-- #ifndef MP-WEIXIN -->
2922
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
30-
<!-- #endif -->
31-
<!-- #ifdef MP-WEIXIN -->
32-
<view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
33-
<!-- #endif -->
3423
<view class="demo-title">{{ item.title }}</view>
3524
<view class="demo-price">{{ item.price }}元</view>
3625
<view class="demo-tag">
3726
<view class="demo-tag-owner">自营</view>
3827
<view class="demo-tag-text">放心购</view>
3928
</view>
4029
<view class="demo-shop">{{ item.shop }}</view>
41-
<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
4230
<view class="u-close">
4331
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
4432
</view>

‎uview-ui/components/u-card/u-card.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
/**
7575
* card 卡片
7676
* @description 卡片组件一般用于多个列表条目，且风格统一的场景
77-
* @tutorial https://www.uviewui.com/components/line.html
77+
* @tutorial https://www.uviewui.com/components/card.html
7878
* @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
7979
* @property {String} title 头部左边的标题
8080
* @property {String} title-color 标题颜色（默认#303133）

‎uview-ui/components/u-dropdown-item/u-dropdown-item.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@
2121
</template>
2222

2323
<script>
24+
/**
25+
* dropdown-item 下拉菜单
26+
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
27+
* @tutorial http://uviewui.com/components/dropdown.html
28+
* @property {String | Number} v-model 双向绑定选项卡选择值
29+
* @property {String} title 菜单项标题
30+
* @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
31+
* @property {Boolean} disabled 是否禁用此选项卡（默认false）
32+
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
33+
* @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
34+
* @example <u-dropdown-item title="标题"></u-dropdown-item>
35+
*/
2436
export default {
2537
name: 'u-dropdown-item',
2638
props: {

‎uview-ui/components/u-dropdown/u-dropdown.vue

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
</view>
2222
<view class="u-dropdown__content" :style="[contentStyle, {
2323
transition: `opacity ${duration / 1000}s linear`,
24-
top: $u.addUnit(height)
24+
top: $u.addUnit(height),
25+
height: contentHeight + 'px'
2526
}]"
2627
@tap="maskClick" @touchmove.stop.prevent>
2728
<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
@@ -33,6 +34,23 @@
3334
</template>
3435

3536
<script>
37+
/**
38+
* dropdown 下拉菜单
39+
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
40+
* @tutorial http://uviewui.com/components/dropdown.html
41+
* @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
42+
* @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
43+
* @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
44+
* @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
45+
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
46+
* @property {String | Number} height 标题菜单的高度，单位任意（默认80）
47+
* @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
48+
* @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
49+
* @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
50+
* @event {Function} open 下拉菜单被打开时触发
51+
* @event {Function} close 下拉菜单被关闭时触发
52+
* @example <u-dropdown></u-dropdown>
53+
*/
3654
export default {
3755
name: 'u-dropdown',
3856
props: {
@@ -75,6 +93,11 @@
7593
titleSize: {
7694
type: [Number, String],
7795
default: 28
96+
},
97+
// 下拉出来的内容部分的圆角值
98+
borderRadius: {
99+
type: [Number, String],
100+
default: 0
78101
}
79102
},
80103
data() {
@@ -91,7 +114,8 @@
91114
opacity: 0
92115
},
93116
// 让某个菜单保持高亮的状态
94-
highlightIndex: 99999
117+
highlightIndex: 99999,
118+
contentHeight: 0
95119
}
96120
},
97121
computed: {
@@ -101,13 +125,17 @@
101125
// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
102126
style.transform = `translateY(${this.active ? 0 : '-100%'})`
103127
style['transition-duration'] = this.duration / 1000 + 's';
128+
style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
104129
return style;
105130
}
106131
},
107132
created() {
108133
// 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
109134
this.children = [];
110135
},
136+
mounted() {
137+
this.getContentHeight();
138+
},
111139
methods: {
112140
init() {
113141
// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
@@ -171,6 +199,20 @@
171199
// 外部手动设置某个菜单高亮
172200
highlight(index = undefined) {
173201
this.highlightIndex = index !== undefined ? index : 99999;
202+
},
203+
// 获取下拉菜单内容的高度
204+
getContentHeight() {
205+
// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
206+
// 才能让遮罩占满菜单一下，直到屏幕底部的高度
207+
// this.$u.sys()为uView封装的获取设备信息的方法
208+
let windowHeight = this.$u.sys().windowHeight;
209+
this.$uGetRect('.u-dropdown__menu').then(res => {
210+
// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
211+
// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
212+
// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
213+
// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
214+
this.contentHeight = windowHeight - res.bottom;
215+
})
174216
}
175217
}
176218
}
@@ -182,6 +224,7 @@
182224
.u-dropdown {
183225
flex: 1;
184226
width: 100%;
227+
position: relative;
185228
186229
&__menu {
187230
@include vue-flex;
@@ -220,6 +263,7 @@
220263
left: 0px;
221264
bottom: 0;
222265
overflow: hidden;
266+
223267
224268
&__mask {
225269
position: absolute;
@@ -236,6 +280,7 @@
236280
z-index: 10;
237281
transition: all 0.3s;
238282
transform: translate3D(0, -100%, 0);
283+
overflow: hidden;
239284
}
240285
}
241286

‎uview-ui/components/u-message-input/u-message-input.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
// 激活样式
101101
activeColor: {
102102
type: String,
103-
default: 'red'
103+
default: '#2979ff'
104104
},
105105
// 未激活的样式
106106
inactiveColor: {

0 commit comments

Comments
 (0)