小程序百变弹窗，收集项目实战中，我写的最多的几种弹窗

<view class="addEquipment" @click.stop="isCountCompany=true">
     <image src="../../../static/countCompanyIcon.png"></image>
</view>

export default {
    data() {
        return {
            isCountCompany: false,    // 是否显示弹窗
        }
    }
}

        <!-- 弹窗遮罩 -->
        <view class="maskView" v-if="isCountCompany"></view>　　// 自己写的一个遮罩层
        <!-- 弹窗代码 -->
        <view v-if="isCountCompany" class="popupStyle">
            <view class="popup">
                <view class="textTitle">弹窗</view>
                <view class="text">
                    <view class="details">
                        <view class="textDetails">1号</view>
                        <view class="textDetails">2号</view>
                        <view class="textDetails">3号</view>
                        <view class="textDetails">4号</view>
                    </view>
                    <view class="details">
                        <view class="textDetails">￥1</view>
                        <view class="textDetails">￥1</view>
                        <view class="textDetails">￥1</view>
                        <view class="textDetails">￥1</view>
                    </view>
                </view>
            </view>
            <view class="countAll">
                <view>总价</view>
                <view style="color: #F77544;">25元</view>
            </view>
            <view class="popupBtu">
                <view class="sureBtu" @click.stop="isCountCompany=false">确认</view>
            </view>
        </view>

 

// 弹窗
.popupStyle {
    width: 622upx;
    background-color: #FFFFFF;
    z-index: 100;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding-top: 30upx;
    border-radius: 20upx;
    >.popup {
        >.textTitle {
            font-size: 32upx;
            padding-bottom: 30upx;
            text-align: center;
            font-weight: 600;
            border-bottom: 2upx solid #DCDDE0;
        }
        >.text {
            display: flex;
            justify-content: space-between;
            >.details {
                padding: 30upx;
                >.textDetails {
                    line-height: 60upx;
                }
            }
        }
    }
    >.countAll {
        display: flex;
        justify-content: space-between;
        border-top: 2upx solid #DCDDE0;
        line-height: 100upx;
        padding-left: 30upx;
        padding-right: 30upx;
    }
    >.popupBtu {
        font-size: 32upx;
        font-weight: 600;
        >.sureBtu {
            border-top: 2upx solid #DCDDE0;
            width: 100%;
            line-height: 100upx;
            text-align: center;
            color: #2979ff;
            border-left: 2upx solid #DCDDE0;
        }
    }
}

 

代码运行效果：

 

 

 

第二种弹窗：

代码运行效果：

 

 

 没做动图简单描述一下，输入框可根据文字输入的数量，而变大或者缩小，弹窗也是根据输入的文字来变大或者缩小的

<view class="offIcon" @click.stop="isRepair=true">取消</view>

        <!-- 弹窗遮罩 -->
        <view class="maskView" v-if="isRepair"></view>
        <!-- 弹窗 -->
        <view v-if="isRepair" class="popupStyle">
            <view class="popup">
                <view class="textTitle">取消原因</view>
                <u-input v-model="popupValue" :type="type" :border="border" placeholder="例如:机器已恢复(200字以内)" :height="40" :maxlength="200" :autoHeight="autoHeight"/>
            </view>
            <view class="popupBtu">
                <view class="offBtu" @click.stop="isRepair=false">取消</view>
                <view class="sureBtu" @click.stop="sureRepair()">确认</view>
            </view>
        </view>

sureRepair() {
    if(this.popupValue == '') {
        uni.showToast({
            title:'输入框不能为空！',
            icon:'none'
    })
    return
　　}

　　this.isRepair = false // 关闭弹窗
　　this.popupValue = ''　　// 关闭后清空输入框的数据

}

    export default {
        data() {
            return {
                // 弹窗输入框的样式设置
                popupValue: '',        // 富文本的内容
                type: 'textarea',        // 输入框的类型
                border: true,            // 默认有边框
                autoHeight: true,　　　　
                isRepair: false,        // 默认撤销报修单的弹窗
            }
        },           

// 遮罩层
.maskView {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 99;
    position: fixed;
    top: 0upx;
    left: 0upx;
}

// 弹窗
.popupStyle {
    width: 622upx;
    background-color: #FFFFFF;
    z-index: 100;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding-top: 30upx;
    border-radius: 20upx;
    >.popup {
        padding-left: 30upx;
        padding-right: 30upx;
        padding-bottom: 40upx;
        >.textTitle {
            font-size: 32upx;
            padding-bottom: 30upx;
            text-align: center;
            font-weight: 600;
        }
    }
    >.popupBtu {
        font-size: 32upx;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        >.offBtu,.sureBtu {
            border-top: 2upx solid #DCDDE0;
            width: 50%;
            line-height: 100upx;
            text-align: center;
        }
        >.sureBtu {
            color: #2979ff;
            border-left: 2upx solid #DCDDE0;
        }
    }
}
textarea {
    height: 40upx;
}

 

第三种：物流弹窗

代码运行效果如下：

 

 

 简单介绍一下效果，这里是配合使用的快递100做的，可以上下滑动查看物流，最新的物流信息显示在最上面，点击确定可关闭

<view class="info" @click.stop="logisticsInfo">查看物流</view>　　// 这里点击了一个方法是对物流做了一些配置和逻辑判断，以便拿到物流的信息

        <!-- 物流信息的弹窗 -->
        <view v-if="logisticsPopup" class="PopupStyle">
            <view class="order">物流单号:4442355564</view>
            <view class="lineInfo">
                <scroll-view class="scroll-view_H" scroll-y="true">
                    <view class="scrollBox">
                        <u-time-line>
                            <u-time-line-item nodeTop="2">
                                <template v-slot:node>
                                    <view class="u-node" style="background: #19be6b;">
                                        <u-icon name="checkmark" color="#fff" :size="24"></u-icon>
                                    </view>
                                </template>
                                <template v-slot:content>
                                    <view>
                                        <view class="u-order-title">{{value.status}}</view>
                                        <view class="u-order-desc">{{value.context}}</view>
                                        <view class="u-order-time">{{value.time}}</view>
                                    </view>
                                </template>
                            </u-time-line-item>
                        </u-time-line>
                    </view>
                </scroll-view>
                
            </view>
            <view @click="logisticsPopup = false" class="sureBtuStyle">确定</view>
        </view>
<view class="maskView" v-if="logisticsPopup"></view>　　// 遮罩层

// 物流信息的弹窗
.PopupStyle {
    width: 622upx;
    height: 720upx;
    background-color: #FFFFFF;
    z-index: 100;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    >.order {
        padding: 26upx 30upx;
        font-size: 32upx;
        border-bottom: 2upx solid #DBDBDB;
    }
    >.sureBtuStyle {
        width: 622upx;
        position: fixed;
        bottom: 0upx;
        text-align: center;
        color: #3388FF;
        font-size: 32upx;
        border-top: 2upx solid #EBEDF0;
        padding: 26upx 30upx;
    }
}

// 遮罩层
.maskView {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 99;
    position: fixed;
    top: 0upx;
    left: 0upx;
}

// 向下滑动
.lineInfo {
    width: 100%;
    height: 74%;
    >.scroll-view_H {
        height: 100%;
        z-index: 1;
    }
}

.scrollBox{
    padding: 50upx;
}
    
// 物流的时间轴
.u-node {
        width: 44upx;
        height: 44upx;
        border-radius: 100upx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #d0d0d0;
        &.finish{
            background: #409EFF;
        }
    }
        
    .u-order-title {
        color: #333333;
        font-weight: bold;
        font-size: 30upx;
        margin-bottom: 6upx;
    }
        
    .u-order-desc {
        color: rgb(150, 150, 150);
        font-size: 28upx;
        margin-bottom: 15upx;
        &.finish{
            color: #333;
        }
    }
        
    .u-order-time {
        color: rgb(200, 200, 200);
        font-size: 24upx;
        &.finish{
            color: #333;
        }
    }

 

总结：以上的代码弹窗，都是使用uni-app+u-view+vue 做的，不懂的同学，自己多看一下API，本人也是刚进这一行不久，不是经验丰富的前辈，写的不好的地方请大家多多指教，暂时只有这么多的弹窗，我会根据自己写的代码不定时更新的，是笔记也是分享