小程序百变弹窗，收集项目实战中，我写的最多的几种弹窗
<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，本人也是刚进这一行不久，不是经验丰富的前辈，写的不好的地方请大家多多指教，暂时只有这么多的弹窗，我会根据自己写的代码不定时更新的，是笔记也是分享
