#

whycq

2022-09-22 90ca2535ec02663f87e13e8761295ff7e5e8781e

#

 components/y-popup/y-popup.vue

@@ -1,11 +1,18 @@
<template>
    <view v-if="showPopup">
        <uni-transition key="1" mode-class="fade" :styles="maskClass" :show="show" @click="onTop"/>
        <uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" >
            qqq<view style="width: 500rpx;height: 300rpx;background-color: aliceblue;position: absolute;top: 0;
            left: 0;"><slot /></view>
        </uni-transition>
    <view v-if="showPopup" class="y-popup-mask">
        <uni-transition key="1" mode-class="fade" :styles="maskClass" :show="show" @click="onTap"/>
        <uni-transition key="2" :styles="transClass" :show="showTrans">
        
            <view style="height: 70rpx;background-color: aliceblue;">title</view>
            <scroll-view scroll-y class="scroll-Y">
                <view style="width: 500rpx;height: 300rpx;background-color: aqua;">
                    <slot />
                </view>
            </scroll-view>
            <view>
                <button size="mini">按钮</button>
            </view>
        </uni-transition>
    </view>
</template>

@@ -29,8 +36,16 @@
                },
                transClass: {
                    position: 'fixed',
                    left: 0,
                    right: 0
                    // left: 0,
                    // right: 0,
                    minWidth:'300rpx',
                    minHeight: '400rpx',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    borderRadius: '20rpx',
                    justifyContent: 'center',
                    backgroundColor: 'rgba(0, 255, 0, 0.4)'
                },
                
            }
@@ -44,7 +59,7 @@
            close() {
                this.showPopup = false
            },
            onTop() {
            onTap() {
                this.showPopup = false
            }
        }
@@ -63,8 +78,9 @@
        bottom: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.4);
        /* background-color: rgba(0, 0, 0, 0.4); */
        z-index: 999;
        border-radius: 20rpx;
    }
    .center {
        display: flex;

 pages/user/user.vue

@@ -1,5 +1,6 @@
<template>
    <view class="">
        <scroll-view class="scroll-Y">
        <button @click="open">点击</button>
        <y-popup ref="yPopup">
            <!-- <view style="background-color: aqua;width: 100rpx;height: 100rpx;"></view>
@@ -74,6 +75,76 @@
            <view class="vv">1</view>
            <view class="vv">5</view>
        </y-popup>
        <view class="vv">100</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
		
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
		
        <view class="vv">100</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
		
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">5</view>
        <view class="vv">100</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
		
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">5</view>
        </scroll-view>
    </view>
</template>

@@ -81,7 +152,7 @@
    export default {
        data () {
            return {
				
                scrollY:true
            }
        },
        methods: {
@@ -96,5 +167,14 @@
<style>
    .vv {
        width: 100%;height: 100rpx;
		
    }
    .bb {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>