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