|
@@ -3,14 +3,14 @@
|
|
|
<view :class="['DrawerClose_' + direction, show ? 'show' : '']" @tap="hideModal">
|
|
|
<text :class="'cuIcon-pull'+direction"></text>
|
|
|
</view>
|
|
|
- <scroll-view scroll-y :class="['DrawerWindow_' + direction, show ? 'show' : '']" :style="{width:width,padding:padding, zIndex:zIndex+1, background:slotBg}" @tap.stop="stopFun" @touchstart="start" @touchend="end" @scrolltolower="bottomCall">
|
|
|
+ <scroll-view scroll-y :class="['DrawerWindow_' + direction, show ? 'show' : '']" :style="{width:width,padding:padding, zIndex:zIndex+1, background:slotBg, height:'auto'}" @tap.stop="stopFun" @touchstart="start" @touchend="end" @scrolltolower="bottomCall">
|
|
|
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg" v-if="show">
|
|
|
<slot name="links"></slot>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
<script>
|
|
|
export default {
|
|
|
props: {
|
|
@@ -29,30 +29,30 @@ export default {
|
|
|
background:{
|
|
|
type : String,
|
|
|
default : 'rgba(0, 0, 0, 0.5)'
|
|
|
- },
|
|
|
- slotBg:{
|
|
|
- type : String,
|
|
|
- default : 'rgba(255, 255, 255, 1)'
|
|
|
- },
|
|
|
+ },
|
|
|
+ slotBg:{
|
|
|
+ type : String,
|
|
|
+ default : 'rgba(255, 255, 255, 1)'
|
|
|
+ },
|
|
|
padding :{
|
|
|
type : String,
|
|
|
default : '30rpx'
|
|
|
- },
|
|
|
+ },
|
|
|
zIndex : {
|
|
|
type : Number,
|
|
|
default : 10
|
|
|
- },
|
|
|
- // #ifdef H5
|
|
|
- top:{
|
|
|
- type : Number,
|
|
|
- default : 44
|
|
|
- },
|
|
|
- // #endif
|
|
|
- // #ifndef H5
|
|
|
- top:{
|
|
|
- type : Number,
|
|
|
- default : 0
|
|
|
- },
|
|
|
+ },
|
|
|
+ // #ifdef H5
|
|
|
+ top:{
|
|
|
+ type : Number,
|
|
|
+ default : 44
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ // #ifndef H5
|
|
|
+ top:{
|
|
|
+ type : Number,
|
|
|
+ default : 0
|
|
|
+ },
|
|
|
// #endif
|
|
|
type : {
|
|
|
type : String,
|
|
@@ -67,9 +67,9 @@ export default {
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
- methods:{
|
|
|
- bottomCall : function() {
|
|
|
- this.$emit('bottomFunc');
|
|
|
+ methods:{
|
|
|
+ bottomCall : function() {
|
|
|
+ this.$emit('bottomFunc');
|
|
|
},
|
|
|
closeDrawer : function(){
|
|
|
this.$emit('closeDrawer');
|
|
@@ -97,10 +97,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-.DrawerWindow_left {
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.uni-scroll-view-content {
|
|
|
+ height:auto;
|
|
|
+}
|
|
|
+.DrawerWindow_left {
|
|
|
position: absolute;
|
|
|
width: 85vw;
|
|
|
height: 100vh;
|
|
@@ -109,13 +112,13 @@ export default {
|
|
|
transform: scale(1, 1) translateX(-100%);
|
|
|
opacity: 1;
|
|
|
pointer-events: none;
|
|
|
- transition: all 0.4s;
|
|
|
-}
|
|
|
-
|
|
|
-.DrawerWindow_left.show {
|
|
|
- transform: scale(1, 1) translateX(0%);
|
|
|
- opacity: 1;
|
|
|
- pointer-events: all;
|
|
|
+ transition: all 0.4s;
|
|
|
+}
|
|
|
+
|
|
|
+.DrawerWindow_left.show {
|
|
|
+ transform: scale(1, 1) translateX(0%);
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: all;
|
|
|
}
|
|
|
|
|
|
.DrawerWindow_down {
|
|
@@ -127,70 +130,70 @@ export default {
|
|
|
transform: scale(1, 1) translateY(100%);
|
|
|
opacity: 1;
|
|
|
pointer-events: none;
|
|
|
- transition: all 0.4s;
|
|
|
+ transition: all 0.4s;
|
|
|
}
|
|
|
|
|
|
.DrawerWindow_down.show {
|
|
|
- height: 91vh;
|
|
|
- transform: scale(1, 1) translateY(10%);
|
|
|
- opacity: 1;
|
|
|
- pointer-events: all;
|
|
|
-}
|
|
|
-
|
|
|
-.DrawerClose_left {
|
|
|
- position: absolute;
|
|
|
- width: 40vw;
|
|
|
- height: 100vh;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- color: transparent;
|
|
|
- padding-bottom: 30upx;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: center;
|
|
|
- /*background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));*/
|
|
|
- letter-spacing: 5px;
|
|
|
- font-size: 50upx;
|
|
|
- opacity: 0;
|
|
|
- pointer-events: none;
|
|
|
- transition: all 0.4s;
|
|
|
-}
|
|
|
-
|
|
|
-.DrawerClose_left.show {
|
|
|
- opacity: 1;
|
|
|
- pointer-events: all;
|
|
|
- width: 15vw;
|
|
|
- color: #fff;
|
|
|
+ height: 91vh;
|
|
|
+ transform: scale(1, 1) translateY(10%);
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: all;
|
|
|
}
|
|
|
|
|
|
-.DrawerClose_down {
|
|
|
- position: absolute;
|
|
|
- width: 176vw;
|
|
|
- height: 30vh;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- color: transparent;
|
|
|
+.DrawerClose_left {
|
|
|
+ position: absolute;
|
|
|
+ width: 40vw;
|
|
|
+ height: 100vh;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ color: transparent;
|
|
|
padding-bottom: 30upx;
|
|
|
- padding-left: 60upx;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: center;
|
|
|
- /*background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));*/
|
|
|
- letter-spacing: 5px;
|
|
|
- font-size: 50upx;
|
|
|
- opacity: 0;
|
|
|
- pointer-events: none;
|
|
|
- transition: all 0.4s;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: center;
|
|
|
+ /*background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));*/
|
|
|
+ letter-spacing: 5px;
|
|
|
+ font-size: 50upx;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: all 0.4s;
|
|
|
}
|
|
|
|
|
|
-.DrawerClose_down.show {
|
|
|
+.DrawerClose_left.show {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: all;
|
|
|
+ width: 15vw;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.DrawerClose_down {
|
|
|
+ position: absolute;
|
|
|
+ width: 176vw;
|
|
|
+ height: 30vh;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ color: transparent;
|
|
|
+ padding-bottom: 30upx;
|
|
|
+ padding-left: 60upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: center;
|
|
|
+ /*background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));*/
|
|
|
+ letter-spacing: 5px;
|
|
|
+ font-size: 50upx;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: all 0.4s;
|
|
|
+}
|
|
|
+
|
|
|
+.DrawerClose_down.show {
|
|
|
opacity: 1;
|
|
|
pointer-events: all;
|
|
|
height: 10vh;
|
|
|
- color: #fff;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
.card-menu {
|
|
|
border-radius: 0px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+}
|
|
|
+</style>
|