uniapp底部弹出框效果
生活随笔
收集整理的這篇文章主要介紹了
uniapp底部弹出框效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<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)題。
- 上一篇: 警惕开源代码库中的安全隐患
- 下一篇: 12个有趣的C语言面试题