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

 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;
            }
        }

 

第一次使用组件写小程序的一些小功能，以前没有写过，写的不好的地方，欢迎留言交流讨论

posted @ 2021-01-19 12:17  温柔本肉  阅读(2237)  评论(0)  编辑  收藏  举报