使用u-view框架做小程序的彈窗效果

本文轉載自查看原文 2021-01-19 12:17 948

 1 <view class="details" @click="openPrice">點擊查看詳情</view>
 2                 <!-- 彈窗 -->
 3                 <u-modal v-model="show1" title="維修費用明細">
 4                     <view class="priveInformation">
 5                         <view class="priceText borderPrice">
 6                             <view class="textTc">檢測費</view>
 7                             <view class="tcPrice">250元</view>
 8                         </view>
 9                         <view class="priceText">
10                             <view class="textTc">上門費</view>
11                             <view class="tcPrice">260元</view>
12                         </view>
13                         <view class="priceText">
14                             <view class="textTc">耗材費</view>
15                             <view class="tcPrice">240元</view>
16                         </view>
17                         <view class="priceText">
18                             <view class="textTc">人工費</view>
19                             <view class="tcPrice">250元</view>
20                         </view>
21                         <view class="priceText borderPrice">
22                             <view class="textTc">總金額</view>
23                             <view class="tcPrice priceColor"><u-icon name="rmb" color="#F77544" size="28"></u-icon>1000</view>
24                         </view>
25                     </view>
26                 </u-modal>

.priveInformation {
        position: relative;
        >.priceText {
            height: 40px;
            >.textTc {
                padding-left: 20px;
            }
            >.tcPrice {
                position: absolute;
                right: 20px;
            }
            >.textTc,.tcPrice {
                line-height: 40px;
                display: inline-block;
            }
            >.priceColor {
                color: #F77544;
            }
        }
        >.borderPrice {
            margin-top: 15px;
            border-top: 1px solid #F1F1F1;
        }
    }

效果：點擊后彈出后的效果

第二種彈窗：

<view class="details" @click="openConsumables">點擊查看詳情</view>
                <!-- 彈窗 -->
                <u-modal v-model="show2" title="消耗耗材">
                    <view class="haocaiList">
                        <view class="item">耗材名稱1</view>
                        <view class="item">機型型號</view>
                        <view class="item">耗材名稱1</view>
                        <view class="item">耗材名稱1</view>
                        <view class="item">機型型號</view>
                        <view class="item">耗材名稱1</view>
                    </view>
                </u-modal>

效果：點擊后彈出的效果

要寫一個布爾值的變量還有一個彈窗的方法：show 來控制彈窗的出現和消失，方法觸發點擊事件

　　　　return {      
                show1: false,
                show2: false,
            }
        },
        methods: {
            openPrice() {
                this.show1 = true;
            },
            openConsumables() {
                this.show2 = true;
            }
        }

第一次使用組件寫小程序的一些小功能，以前沒有寫過，寫的不好的地方，歡迎留言交流討論

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用u-view框架給小程序做圖片輪播效果 uni-app UI庫 u-view 使用easywechat和THINKPHP6做小程序支付 u-View之u-select組件多級聯動(實現自定義時間選擇器) 微信小程序實現彈窗效果使用movable-view制作可拖拽的微信小程序彈出層效果。做了公眾號為什么還要做小程序微信小程序實現彈窗毛玻璃效果 mpvue框架使用小程序swiper和scroll-view制作tabbar 小程序彈窗，使用catchtouchmove的問題