<template><view><view class="one-right" @click="sell"><text>賣(mài)出</text></view><view class="share"><view :class="{'box': share}" @click="display"></view><view class="share-item" :class="{'show': share}"><view class="share-con"><view class="shares" @click.stop="display">×</view><view class="sell"><text>賣(mài)出</text></view></view><view class="content"><text>總價(jià)：<text style="color:#333;font-size: 36rpx;font-weight: bold;">99.99￥</text> </text></view><view class="many"><text>單價(jià)：5.60￥</text><text>賣(mài)出數(shù)量：5 </text></view><view class="cancel" @click="places"><text>下單</text></view></view></view></view> </template><script>export default {data() {return {share: false}},methods: {sell() {this.share = true;},// 隱藏分享display() {this.share = false;}}} </script><style lang="scss">.share {width: 100%;height: 100%;background: #000000;position: relative;z-index: 1;}.box {width: 100%;height: 100%;position: fixed;top: 0rpx;left: 0rpx;bottom: 0rpx;right: 0rpx;background-color: rgba(0, 0, 0, 0.4);transition: .3s;z-index: 999;}// 進(jìn)入分享動(dòng)畫(huà).show {transition: all 0.3s ease;transform: translateY(0%) !important;}// 離開(kāi)分享動(dòng)畫(huà).share-item {position: fixed;left: 0;bottom: 0;width: 100%;height: auto;background-color: #fff;transition: all 0.3s ease;transform: translateY(100%);z-index: 1999;.share-con {width: 90%;height: 100rpx;display: flex;margin: auto;align-items: center;}.content {width: 90%;height: 90rpx;display: flex;align-items: center;margin: auto;text {color: #999999;font-size: 30rpx;}}.many {width: 90%;height: 70rpx;display: flex;align-items: center;justify-content: space-between;margin: auto;text {color: #999999;font-size: 30rpx;}}.cancel {width: 80%;height: 100rpx;display: flex;justify-content: center;align-items: center;background: #12C540;border-radius: 100rpx;margin: auto;color: #fff;}} </style>

總結(jié)

以上是生活随笔為你收集整理的uniapp底部弹出框效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。