微信小程序弹出框样式
生活随笔
收集整理的這篇文章主要介紹了
微信小程序弹出框样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!-- 彈出購買詳情 --><view bindtap='showModal'>
click me
</view><code class="language-html"><!--屏幕背景變暗的背景 -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view><!--彈出框 -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"><view class='commImg'><image src='{{imghref}}{{goods_img[0].img}}' mode="aspectFit"></image></view><view class='column'><text class="sku-price">￥{{gg_price}}</text><text class="sku-title"><block wx:if="{{gg_txt==''}}">請選擇規格</block><block wx:else>已選擇:{{gg_txt}}ml</block></text></view><text class="line"></text><view class='guige'><text class="gg-title">規格</text><view class='gg'><text wx:for="{{guigeList}}" wx:key="gg" wx:for-item="item" class="{{gg_id==item.guige?'active':''}}" data-id="{{item.guige}}" data-txt="{{item.guige}}" data-price='{{item.price}}' bindtap="filter">{{item.guige}}ml</text></view></view><text class="line"></text><view class="row"><text class='quantity-title'>數量</text><view class="quantity-position"><view class="stepper"><!-- 減號 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text><!-- 數值 --> <input type="number" bindinput='bindManual' value="{{num}}" /><!-- 加號 --> <text class="normal" bindtap="bindPlus">+</text></view></view></view><text class="line"></text><view class='btn'><button class="button-add" bindtap="addCart">加入購物車</button><button class="button-buy">立即購買</button></view>
</view></code>
// pages/demo/alert/alert.js
Page({// 價格變化onChange: function (e){// 獲取輸入框的值console.log(e.detail)var num=e.detailvar p=this.data.pricethis.setData({price:199*num })returnconsole.log()},// 型號size(e) {let index = e.currentTarget.dataset.indexvar bool = this.data.size[index].checkedvar f = this.data.size[index].disabledthis.setData({['size[' + index + '].checked']: !bool,// ['color[11].disabled']:true})// if(){// console.log(123)// }console.log(index, bool, ['size[' + index + '].checked'], f)},// 顏色choose(e) {let index = e.currentTarget.dataset.indexvar bool = this.data.color[index].checkedvar f = this.data.color[index].disabledthis.setData({['color[' + index + '].checked']:!bool,// ['color[11].disabled']:true})// if(){// console.log(123)// }console.log(index, bool, ['color[' + index + '].checked'], f)},//點擊我顯示底部彈出框clickme: function () {this.showModal();},//顯示對話框showModal: function () {// 顯示遮罩層var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),showModalStatus: true})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export()})}.bind(this), 200)},//隱藏對話框hideModal: function () {// 隱藏遮罩層var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export(),showModalStatus: false})}.bind(this), 200)},/*** 頁面的初始數據*/data: {// 價格price:199,// 型號size:[{size:"sm",disabled:false,checked:false},{size:"s",disabled: false,checked: false},{size:"s",disabled: false,checked: false},{size:"l",disabled: false,checked: false},{size: "xl",disabled: true,checked: false},],// 顏色color:[{color:"紅色",checked:false,disabled:false },{color:"黃色",checked:false,disabled:false },{color:"白色",checked:false,disabled:false },{color:"綠色",checked:false,disabled:false },{color:"綠色",checked:false,disabled:false },{color:"紫色",checked:false,disabled:false },{color:"灰色",checked:false,disabled:false },{color:"橘色",checked:false,disabled:false },{color:"彩色",checked:false,disabled:false },{color:"紫色",checked:false,disabled:false },{color:"紫色",checked:false,disabled:false },{color:"紫色",checked:false,disabled:true },]},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {
console.log(options)},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {}
})
/* 彈出框 */.commodity_screen {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.2;overflow: hidden;z-index: 1000;color: #fff;
}
/*對話框 */
.commodity_attr_box {height: 920rpx;width: 100%;overflow: hidden;position: fixed;bottom: 0;left: 0;z-index: 2000;background: #fff;padding-top: 29rpx;
}
/* 商品圖片 */
.product{margin-left:30rpx;
}
.product-img{width:200rpx;
height:200rpx;
border-radius:10rpx;
}
/* 價格 */
.cart-price{margin-top:116rpx;margin-left:20rpx;
}
.cart-price :first-child{font-size:34rpx;
font-family:PingFang SC;
font-weight:500;
color:rgba(245,121,0,1);
}
.cart-price :last-child{font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
}
/* 顏色 */
.color{margin-top:60rpx;
}
.color :first-child{font-size:28rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
}
/* 顏色選擇 */
.color-btn{width:722rpx;flex-wrap:wrap;margin-left:19rpx;}
/* 未選中狀態 */
.btns{/* width:100rpx; */
height:50rpx;
background:rgba(242,242,242,1);
border-radius:10rpx;
text-align: center;
line-height:50rpx;
font-size:28rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
margin-right:8rpx;margin-top:20rpx;
}
/* 選中狀態 */
.btnsactives{/* width:100rpx!important; */
height:50rpx!important;
background:rgba(118,212,198,1)!important;
border-radius:10rpx!important;
font-size:28rpx!important;
font-family:PingFang SC!important;
font-weight:400!important;
color:rgba(255,255,255,1)!important;
text-align: center!important;
line-height:50rpx!important;
margin-right:8rpx;margin-top:20rpx;
}
/* 型號 */
.size{margin-top:40rpx;
}
.size :first-child{font-size:28rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
margin-left:30rpx;
}
.size-btn{width:497rpx;
}
/* 未選中狀態 */
.sizes{/* width:50rpx; */
height:50rpx!important;
background:rgba(242,242,242,1)!important;
border-radius:10rpx!important;
text-align: center!important;
line-height: 50rpx!important;
font-size:28rpx!important;
font-family:PingFang SC!important;
font-weight:400!important;
color:rgba(51,51,51,1)!important;
margin-top:20rpx;}
.sizesactives{/* width:50rpx; */
height:50rpx!important;
background:rgba(118,212,198,1)!important;
border-radius:10rpx!important;
text-align: center!important;
line-height: 50rpx!important;
font-size:28rpx!important;
font-family:PingFang SC!important;
font-weight:400!important;
color:rgba(255,255,255,1)!important;
margin-top:20rpx;
}
?
總結
以上是生活随笔為你收集整理的微信小程序弹出框样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 王道计算机网络学习笔记
- 下一篇： DWM1000DISCOVERY开发板简