原生小程序中? ? ?自定義? ? ?實現(xiàn)從底部彈出內(nèi)容框效果? 根據(jù)不同的場景可以自行修改。
效果圖如下：
<view bindtap="showmodify ==true">點我實現(xiàn)從底部彈出內(nèi)容框</view>
------------------html---------------
<view wx:if="{{showmodify}}" class="mask" bindtap="closemask"></view>
這是從底部彈出的內(nèi)容框 content
? <view class="content {{showmodify?'rollslowly':''}}">
? ? ? ? 內(nèi)容框的 頭部
? ? ? <view class="top">
? ? ? ? ?<text class="modify_top_left" bindtap="closemask" data-name="cancel">取消</text>
? ? ? ? ?<text class="modify_top_right" bindtap="closemask" data-name="confirm">完成</text>
? ? ? </view>?
? ? ? ?<view class="bottom">這里寫你的內(nèi)容</view>
? ?</view>
</view>? ?這是最外面的盒子? mask? 主要是實現(xiàn)蒙層的效果
css 樣式如下
/* 全屏遮罩層 */
.mask {
? position: fixed;
? width: 100%;
? height: 100%;
? background: rgba(0, 0, 0, 0.6);
? top: 0;
? left: 0;
? z-index: 90;
}
/*內(nèi)容框*/
.content {
? width: 100%;
? position: fixed;
? bottom: -694rpx; /*定位讓其隱藏起來*/
? z-index: 91;
? background: white;
? border-top-left-radius: 16rpx;
? border-top-right-radius: 16rpx;
? overflow: hidden;
? height: 304rpx;
}
.rollslowly? ?/*這個樣式 主要是實現(xiàn)從底部緩慢 彈出的效果冠绢。使用過渡屬性transition
?{
? /* 從-694rpx距離過渡到0rpx */
? bottom: 0;
? transition: bottom 0.5s ease;
}
/*下面是對內(nèi)容框 頂部 樣式的書寫----小伙伴們自己可以根據(jù)自己的業(yè)務(wù)需求進行改動*/
.top {
? height: 98rpx;
? background:rgba(244,244,244,1);
? display: flex;
? justify-content: space-between;
? align-items: center;
? padding: 0 24rpx;
? box-sizing: border-box;
}
.modify_top_left {
? font-weight:400;
? color:rgba(153,153,153,1);
}
.modify_top_right {
? font-weight:500;
? color:rgba(51,51,51,1);
}
js
data: {
?showmodify:false? //開始默認(rèn)不展示 底部彈出內(nèi)容框效果
? }
closemask （） {
//點擊蒙層要關(guān)閉? 該彈出框
//點擊取消 按鈕? 需要關(guān)閉?
//點擊 完成按鈕? ?需要關(guān)閉
//這里我 傳遞參數(shù) 來區(qū)別點擊的是取消? 還是完成
var name = e.currentTarget.dataset.name
if (name =='cancel'){
點擊了取消按鈕??
進行業(yè)務(wù)邏輯~~~~~~
}
if (name =='confirm') {
點擊了完成按鈕??
進行業(yè)務(wù)邏輯~~~~~~
}
//最后 三者都執(zhí)行 關(guān)閉操作功能
this.setData({
? ? ? showmodify: !this.data.showmodify
? ? })
}
