小程式百變彈窗，收集專案實戰中，我寫的最多的幾種彈窗
阿新 • • 發佈：2021-08-02
<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 // 彈窗 .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，本人也是剛進這一行不久，不是經驗豐富的前輩，寫的不好的地方請大家多多指教，暫時只有這麼多的彈窗，我會根據自己寫的程式碼不定時更新的，是筆記也是分享