Skip to content

Commit f3fc7dd

Browse files
mehaotianmehaotian
committed
fix(uni-ui): gird list title
1 parent 99f27bc commit f3fc7dd

File tree

34 files changed

+883
-684
lines changed

34 files changed

+883
-684
lines changed

‎components/uni-fab/uni-fab.vue‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
bottom: vertical === 'bottom' && direction === 'vertical',
1313
right: horizontal === 'right' && direction === 'horizontal'
1414
}" :style="{ 'background-color': styles.buttonColor }" class="fab-circle" @click="_onClick">
15-
<view class="fab-circle-box" :class="{ active: isShow }">
16-
<view class="fab-circle-v"></view>
17-
<view class="fab-circle-h"></view>
18-
</view>
15+
<view class="fab-circle-box" :class="{ active: isShow }">
16+
<view class="fab-circle-v"></view>
17+
<view class="fab-circle-h"></view>
18+
</view>
1919
</view>
2020
<view :class="{
2121
left: horizontal === 'left',
@@ -37,13 +37,13 @@
3737
</view>
3838
</template>
3939

40-
<script>
40+
<script>
4141
import uniIcons from "@/components/uni-icons/uni-icons.vue";
4242
export default {
4343
name: 'UniFab',
44-
components:{
45-
uniIcons
46-
},
44+
components: {
45+
uniIcons
46+
},
4747
props: {
4848
pattern: {
4949
type: Object,
@@ -182,7 +182,6 @@
182182
</script>
183183

184184
<style scoped>
185-
186185
.uni-icon {
187186
font-family: uniicons;
188187
font-size: 30px;
@@ -267,34 +266,34 @@
267266
z-index: 11;
268267
}
269268
270-
.fab-circle-box {
271-
position: absolute;
272-
left: 0;
273-
top: 0;
274-
right: 0;
275-
bottom: 0;
269+
.fab-circle-box {
270+
position: absolute;
271+
left: 0;
272+
top: 0;
273+
right: 0;
274+
bottom: 0;
276275
transition: all 0.3s;
277-
}
276+
}
278277
279-
.fab-circle-v {
280-
position: absolute;
281-
width: 8rpx;
282-
height: 60rpx;
283-
left: 50%;
284-
top: 50%;
285-
margin: -30rpx 0 0 -4rpx;
286-
background-color: white;
287-
}
278+
.fab-circle-v {
279+
position: absolute;
280+
width: 8rpx;
281+
height: 60rpx;
282+
left: 50%;
283+
top: 50%;
284+
margin: -30rpx 0 0 -4rpx;
285+
background-color: white;
286+
}
288287
289-
.fab-circle-h {
290-
position: absolute;
291-
width: 60rpx;
292-
height: 8rpx;
293-
left: 50%;
294-
top: 50%;
295-
margin: -4rpx 0 0 -30rpx;
296-
background-color: white;
297-
}
288+
.fab-circle-h {
289+
position: absolute;
290+
width: 60rpx;
291+
height: 8rpx;
292+
left: 50%;
293+
top: 50%;
294+
margin: -4rpx 0 0 -30rpx;
295+
background-color: white;
296+
}
298297
299298
.fab-circle.left {
300299
left: 0;
@@ -384,4 +383,4 @@
384383
.fab-content .fab-item.first {
385384
width: 110rpx;
386385
}
387-
</style>
386+
</style>

‎components/uni-indexed-list/uni-indexed-list.vue‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<view class="uni-indexed-list" :style="{ height: winHeight + 'px' }">
2+
<view class="uni-indexed-list" ref="list" id="list">
33
<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
44
<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + list.key">
55
<uni-indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect" @itemClick="onClick"></uni-indexed-list-item>
@@ -46,6 +46,9 @@
4646
}
4747
const throttleTouchMove = throttle(touchMove, 40)
4848
// #endif
49+
// #ifdef APP-NVUE
50+
const dom = weex.requireModule('dom');
51+
// #endif
4952
export default {
5053
name: 'UniIndexedList',
5154
components: {
@@ -85,16 +88,31 @@
8588
}
8689
},
8790
mounted() {
88-
this.setList()
91+
setTimeout(() => {
92+
this.setList()
93+
}, 50)
8994
setTimeout(() => {
9095
this.loaded = true
9196
}, 300);
9297
},
9398
methods: {
9499
setList() {
95-
let winHeight = uni.getSystemInfoSync().windowHeight
96-
this.itemHeight = winHeight / this.options.length
97-
this.winHeight = winHeight
100+
// #ifndef APP-NVUE
101+
uni.createSelectorQuery()
102+
.in(this)
103+
.select('#list')
104+
.boundingClientRect()
105+
.exec(ret => {
106+
this.winHeight = ret[0].height
107+
this.itemHeight = this.winHeight / this.options.length
108+
})
109+
// #endif
110+
// #ifdef APP-NVUE
111+
dom.getComponentRect(this.$refs['list'], (res) => {
112+
this.winHeight = res.size.height
113+
this.itemHeight = this.winHeight / this.options.length
114+
})
115+
// #endif
98116
let index = 0;
99117
this.lists = this.options.map(value => {
100118
// console.log(value)
@@ -184,6 +202,11 @@
184202
</script>
185203
<style scoped>
186204
.uni-indexed-list {
205+
position: absolute;
206+
left: 0;
207+
top: 0;
208+
right: 0;
209+
bottom: 0;
187210
/* #ifndef APP-NVUE */
188211
display: flex;
189212
/* #endif */

‎components/uni-load-more/uni-load-more.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,6 @@
4141

4242
<script>
4343
const platform = uni.getSystemInfoSync().platform
44-
// #ifdef APP-NVUE
45-
const animation = weex.requireModule('animation');
46-
// #endif
4744
export default {
4845
name: 'UniLoadMore',
4946
props: {

‎components/uni-section/uni-section.vue‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<template>
2+
<view :class="{sticky:sticky}" :style="{top:stickyTop+'px'}" class="uni-title">
3+
<view v-if="type" class="uni-title__head">
4+
<view :class="type" class="uni-title__head-tag" />
5+
</view>
6+
<view class="uni-title__content">
7+
<text :class="{'distraction':!subTitle}" class="uni-title__content-title">{{ title }}</text>
8+
<text v-if="subTitle" class="uni-title__content-sub">{{ subTitle }}</text>
9+
</view>
10+
<slot />
11+
</view>
12+
</template>
13+
14+
<script>
15+
export default {
16+
name: 'UniTitle',
17+
props: {
18+
type: {
19+
type: String,
20+
default: ''
21+
},
22+
title: {
23+
type: String,
24+
default: ''
25+
},
26+
subTitle: {
27+
type: String,
28+
default: ''
29+
},
30+
sticky: {
31+
type: Boolean,
32+
default: false
33+
},
34+
stickyTop: {
35+
type: Number,
36+
default: 0
37+
}
38+
},
39+
data() {
40+
return {}
41+
},
42+
watch: {
43+
title(newVal) {
44+
if (uni.report && newVal !== '') {
45+
uni.report('title', newVal)
46+
}
47+
}
48+
},
49+
methods: {
50+
onClick() {
51+
this.$emit('click')
52+
}
53+
}
54+
}
55+
</script>
56+
<style scoped>
57+
.uni-title {
58+
/* #ifndef APP-NVUE */
59+
display: flex;
60+
/* #endif */
61+
margin-top: 10px;
62+
flex-direction: row;
63+
align-items: center;
64+
padding: 5px 10px;
65+
height: 50px;
66+
background-color: #fdfdfd;
67+
border-bottom-color: #f5f5f5;
68+
border-bottom-style: solid;
69+
border-bottom-width: 1px;
70+
font-weight: normal;
71+
}
72+
73+
.sticky {
74+
position: sticky;
75+
/* top: 44px;
76+
*/
77+
}
78+
79+
.uni-title__head {
80+
flex-direction: row;
81+
justify-content: center;
82+
align-items: center;
83+
margin-right: 10px;
84+
}
85+
86+
.uni-title__head-tag {}
87+
88+
.line {
89+
height: 15px;
90+
background-color: #ccc;
91+
border-radius: 5px;
92+
width: 3px;
93+
}
94+
95+
.circle {
96+
width: 8px;
97+
height: 8px;
98+
/* border-radius: 50px;
99+
*/
100+
border-top-right-radius: 50px;
101+
border-top-left-radius: 50px;
102+
border-bottom-left-radius: 50px;
103+
border-bottom-right-radius: 50px;
104+
background-color: #ccc;
105+
}
106+
107+
.uni-title__content {
108+
flex: 1;
109+
color: #464e52;
110+
}
111+
112+
.uni-title__content-title {
113+
font-size: 15px;
114+
color: #464e52;
115+
}
116+
117+
.distraction {
118+
flex-direction: row;
119+
align-items: center;
120+
}
121+
122+
.uni-title__content-sub {
123+
font-size: 12px;
124+
color: #999;
125+
}
126+
</style>

0 commit comments

Comments
 (0)