Skip to content

Commit 67fe37c

Browse files
hulinNeilhulinNeil
committed
优化swipe-action组件、grid组件
1 parent a8cd419 commit 67fe37c

5 files changed

Lines changed: 53 additions & 30 deletions

File tree

‎components/uni-swipe-action/uni-swipe-action.vue‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<view class="uni-swipe-action">
3-
<view class="uni-swipe-action__container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @touchcancel="touchEnd" @click="bindClickCont" :style="{'transform':transformX,'-webkit-transform':transformX}">
3+
<view class="uni-swipe-action__container" :class="{'uni-swipe-action--show':isShowBtn}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @touchcancel="touchEnd" @click="bindClickCont" :style="{'transform':transformX,'-webkit-transform':transformX}">
44
<view class="uni-swipe-action__content">
55
<slot></slot>
66
</view>
@@ -10,6 +10,7 @@
1010
</div>
1111
</view>
1212
</view>
13+
<view class="uni-swipe-action__mask" v-if="isShowBtn" @click="close" @touchmove.stop.prevent="close"></view>
1314
</view>
1415
</template>
1516

@@ -41,6 +42,7 @@
4142
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
4243
return {
4344
elId: elId,
45+
isShowBtn: false,
4446
transformX: 'translateX(0px)'
4547
}
4648
},
@@ -49,7 +51,6 @@
4951
this.startX = 0
5052
this.startY = 0
5153
this.btnGroupWidth = 0
52-
this.isShowBtn = false
5354
this.isMoving = false
5455
},
5556
// #ifdef H5
@@ -128,6 +129,10 @@
128129
this.$emit('closed');
129130
}
130131
this.direction = '';
132+
},
133+
close() {
134+
this.isShowBtn = false
135+
this.endMove()
131136
}
132137
}
133138
}
@@ -142,6 +147,7 @@
142147
}
143148
144149
.uni-swipe-action__container {
150+
position: relative;
145151
background-color: #fff;
146152
width: 200%;
147153
display: flex;
@@ -159,6 +165,11 @@
159165
flex-direction: row
160166
}
161167
168+
.uni-swipe-action--show {
169+
position: relative;
170+
z-index: 1000
171+
}
172+
162173
.uni-swipe-action--btn {
163174
padding: 0 32upx;
164175
color: #fff;
@@ -169,4 +180,15 @@
169180
flex-direction: row;
170181
align-items: center
171182
}
183+
184+
.uni-swipe-action__mask {
185+
display: block;
186+
opacity: 0;
187+
position: fixed;
188+
z-index: 999;
189+
top: 0;
190+
left: 0;
191+
width: 100%;
192+
height: 100%
193+
}
172194
</style>

‎pages.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@
8383
},
8484
// #ifndef MP-TOUTIAO
8585
{
86-
"path" : "pages/component/cover-view/cover-view",
87-
"style" : {
86+
"path": "pages/component/cover-view/cover-view",
87+
"style": {
8888
"navigationBarTitleText": "cover-view"
8989
}
9090
},
@@ -550,7 +550,7 @@
550550
"navigationBarTitleText": "震动"
551551
}
552552
}
553-
],
553+
],
554554
"subPackages": [{
555555
"root": "pages/extUI",
556556
"pages": [{

‎pages/extUI/grid/grid.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
<view class="example">
44
<view class="example-title">默认样式</view>
55
<uni-grid :options="data1" @click="onClick"></uni-grid>
6+
<view class="example-title">可滑动宫格组件</view>
7+
<swiper :indicator-dots="true" :style="{height:swiperGridHeight,width:swiperGridWidth}">
8+
<swiper-item>
9+
<view class="grid-view">
10+
<uni-grid :options="data1" @click="onClick"></uni-grid>
11+
</view>
12+
</swiper-item>
13+
<swiper-item>
14+
<uni-grid :options="data1" @click="onClick"></uni-grid>
15+
</swiper-item>
16+
</swiper>
617
<view class="example-title">无外边框</view>
718
<uni-grid :options="data3" show-out-border="false"></uni-grid>
819
<view class="example-title">无所有框</view>
@@ -24,6 +35,8 @@
2435
},
2536
data() {
2637
return {
38+
swiperGridHeight: '0px',
39+
swiperGridWidth: '100%',
2740
data1: [{
2841
image: '/static/c1.png',
2942
text: 'Grid'
@@ -121,6 +134,14 @@
121134
]
122135
}
123136
},
137+
onReady() {
138+
uni.createSelectorQuery().select('.grid-view').boundingClientRect().exec((ret) => {
139+
this.swiperGridHeight = ret[0].height + 1 + 'px'
140+
// #ifndef H5
141+
this.swiperGridWidth = ret[0].width + 1 + 'px'
142+
// #endif
143+
})
144+
},
124145
methods: {
125146
onClick(e) {
126147
console.log('点击grid:' + JSON.stringify(e));

‎pages/extUI/nav-bar/nav-bar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<view class="example-title">左右显示文字</view>
99
<uni-nav-bar left-icon="back" right-text="菜单" left-text="返回" @click-left="back" title="标题"></uni-nav-bar>
1010
<view class="example-title">插入slot</view>
11-
<uni-nav-bar color="#333333" background-color="#FFFFFF" fixed="false" right-icon="scan" @click-left="showCity" @click-right="scan">
11+
<uni-nav-bar color="#333333" background-color="#FFFFFF" :fixed="false" right-icon="scan" @click-left="showCity" @click-right="scan">
1212
<block slot="left">
1313
<view class="city">
1414
<view>{{city}}</view>

‎pages/extUI/swipe-action/swipe-action.vue‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,12 @@
88
<uni-swipe-action :disabled="true">
99
<view class='cont'>SwipeAction 禁止滑动展示</view>
1010
</uni-swipe-action>
11-
<view class="example-title">传递点击事件</view>
12-
<uni-swipe-action :options="options" @click="bindClick">
13-
<view class='cont'>点击选项时触发事件</view>
14-
</uni-swipe-action>
15-
<view class="example-title">开启或关闭事件</view>
16-
<uni-swipe-action :options="options" @opened="bindOpened" @closed="bindClosed">
17-
<view class='cont'>开启或关闭事件时触发事件</view>
18-
</uni-swipe-action>
1911
<view class="example-title">使用变量控制开关</view>
2012
<view class="button-view">
2113
<view class="button" @click="setOpened">当前状态：{{isOpened ? '开' : '关'}}</view>
2214
</view>
23-
<uni-swipe-action :options="options" :is-opened="isOpened" :auto-close="true" @opened="bindOpened2" @closed="bindClosed2">
24-
<view class='cont'>开启或关闭事件时触发事件</view>
15+
<uni-swipe-action :options="options" :is-opened="isOpened" :auto-close="true" @opened="bindOpened" @closed="bindClosed">
16+
<view class='cont'>使用变量控制SwipeAction的开启状态</view>
2517
</uni-swipe-action>
2618
<view class="example-title">与 List 组件一起使用</view>
2719
<!-- #ifndef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
@@ -103,25 +95,13 @@
10395
icon: 'none'
10496
})
10597
},
106-
bindOpened() {
107-
uni.showToast({
108-
title: `SwipeAction 开启`,
109-
icon: 'none'
110-
})
111-
},
112-
bindClosed() {
113-
uni.showToast({
114-
title: `SwipeAction 关闭`,
115-
icon: 'none'
116-
})
117-
},
11898
setOpened() {
11999
this.isOpened = !this.isOpened
120100
},
121-
bindOpened2() {
101+
bindOpened() {
122102
this.isOpened = true
123103
},
124-
bindClosed2() {
104+
bindClosed() {
125105
this.isOpened = false
126106
}
127107
}

0 commit comments

Comments
 (0)