底部弹出效果

一、样式效果

                                                                                                                          

wxml

< view style= 'float:right;margin-right:40rpx;margin-top:20rpx;display: flex;'>

< text class= 'h-text' bindtap= "showModal" data-liveid= '{{item.liveid}}'>我要 </ text >

< button class= 'forward-btn h-text' open-type= "share" data-liveid= '{{item.liveid}}' data-imgurl= '{{item.pinpaiurl}}' data-title= '{{item.pinpaiming}}' catchtap= 'onShareAppMessage' style= 'margin-right:30rpx;'>转发 </ button >

</ view >

< view class= "commodity_screen" bindtap= "hideModal" wx:if= "{{showModalStatus}}"></ view >

< view animation= "{{animationData}}" class= "commodity_attr_box" wx:if= "{{showModalStatus}}">

< view >

< view style= 'display:flex;margin-left:20rpx;'>

< image class= "logo" src= '{{goodsInfo.pinpaiURL}}'></ image >

< view style= 'margin-left:20rpx;'>

< view class= "brandname" style= 'margin-top:10rpx;'>{{goodsInfo.pinpai}} </ view >

< view class= 'bottom-intro-text'>选择 尺码 数量 </ view >

</ view >

</ view >

< view class= 'line' style= 'margin-top:20rpx;margin-bottom:20rpx;'></ view >

< view >

< text class= 'bottom-intro-text' style= 'margin-left:20rpx;'>尺码 </ text >

< view >

< view style= "display:flex" wx:for= '{{suks}}' wx:for-item= 'item' wx:key= 'item'>

< view wx:for= '{{item}}' wx:for-item= 'obj' wx:key= 'obj' style= 'margin:10rpx;'>

< text class= "{{obj.check? 'sku-item-selected': 'sku-item'}}" catchtap= 'updateSelectedSku' data-uid= '{{obj.id}}'>{{obj.text}} </ text >

</ view >

</ view >

</ view >

</ view >

< view class= 'line' style= 'margin-top:20rpx;margin-bottom:20rpx;'></ view >

< view style= 'display:flex'>

< text class= 'bottom-intro-text' style= 'margin-left:20rpx;line-height:100rpx;'>购买数量 </ text >

< view class= 'update-count-view'>

< image class= "handle-img" src= "../../../images/icon_reduce.png" data-type= '1' style= "float:left;margin-left:20rpx" catchtap= 'handle' / >

< text class= "dish-item-count-text">{{amount}} </ text >

< image class= "handle-img" data-type= '2' catchtap= 'handle' style= "float:left;" src= "../../../images/icon_increase.png" / >

</ view >

</ view >

</ view >

< view style= 'margin-top:20rpx'>

< button class= 'bottom-btn'>确定 </ button >

</ view >

</ view >

js里面

/**

* 图片预览

*/

previewImage: function (e) {

var that = this

var indexUrls = this.data.goodsInfo.imgList

//获取当前图片的下表

var indexUrl = e.currentTarget.dataset.url

wx.previewImage({

//当前显示下表

current: indexUrl,

//数据源

urls: indexUrls

})

},

clickArea: function () {

this.setData({

showModalStatus: ! this.data.showModalStatus

})

},

showModal: function () {

// 显示遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.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 = animation

animation.translateY( 300).step()

this.setData({

animationData: animation.export(),

})

setTimeout( function () {

animation.translateY( 0).step()

this.setData({

animationData: animation.export(),

showModalStatus: false

})

}.bind( this), 200)

},

handle: function (e) {

var htype = e.currentTarget.dataset.type

if (htype == 1) {

//减少

if ( this.data.amount == 0) {

return

} else {

this.setData({

amount: -- this.data.amount

})

}

} else {

//增加

this.setData({

amount: ++ this.data.amount

})

}

},

/**

* 修改选中的sku

*/

updateSelectedSku: function (res) {

var id = res.currentTarget.dataset.uid

var list = this.data.suks

for ( var i = 0, size = list.length; i < size; i++) {

var obj = list[i]

for ( var j = 0, len = obj.length; j < len; j++) {

if (obj[j].id == id) {

obj[j].check = true

} else obj[j].check = false

}

}

this.setData({

suks: list

})

},

wxss

.h-text {

margin-right: 20 rpx;

margin-bottom: 30 rpx;

}

/***弹出层**/

.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 {

width: 100%;

overflow: hidden;

position: fixed;

bottom: 0;

left: 0;

z-index: 2000;

background: #fff;

padding-top: 20 rpx;

}

.handle-img {

width: 50 rpx;

height: 50 rpx;

padding-right: 20 rpx;

}

.dish-item-count-text {

color: #808080;

float: left;

margin-right: 10px;

margin-top: 5 rpx;

font-size: 28 rpx;

text-align: center;

}

.bottom-btn {

width: 100%;

background-color: #3fbbfe;

border: 0;

color: white;

border-radius: 0px;

font-size: 36 rpx;

}

.bottom-intro-text {

color: #333;

font-size: 32 rpx;

}

.sku-item {

font-size: 22 rpx;

background-color: #eee;

margin-left: 10 rpx;

color: #333;

/* border:2rpx solid #333; */

padding-left: 20 rpx;

padding-right: 20 rpx;

padding-top: 10 rpx;

margin-bottom: 20 rpx;

padding-bottom: 10 rpx;

border-radius: 10px;

}

.sku-item-selected {

font-size: 22 rpx;

background-color: #3fbbfe;

margin-left: 10 rpx;

color: #fff;

/* border:2rpx solid #333; */

padding-left: 20 rpx;

padding-right: 20 rpx;

padding-top: 10 rpx;

margin-bottom: 20 rpx;

padding-bottom: 10 rpx;

border-radius: 10px;

}

.update-count-view {

display: flex;

margin-bottom: 20 rpx;

margin-top: 20 rpx;

position: absolute;

right: 20 rpx;

}