底部弹出效果
一、样式效果
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: 20rpx;
margin-bottom: 30rpx;
}
/***弹出层**/
.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: 20rpx;
}
.handle-img {
width: 50rpx;
height: 50rpx;
padding-right: 20rpx;
}
.dish-item-count-text {
color: #808080;
float: left;
margin-right: 10px;
margin-top: 5rpx;
font-size: 28rpx;
text-align: center;
}
.bottom-btn {
width: 100%;
background-color: #3fbbfe;
border: 0;
color: white;
border-radius: 0px;
font-size: 36rpx;
}
.bottom-intro-text {
color: #333;
font-size: 32rpx;
}
.sku-item {
font-size: 22rpx;
background-color: #eee;
margin-left: 10rpx;
color: #333;
/* border:2rpx solid #333; */
padding-left: 20rpx;
padding-right: 20rpx;
padding-top: 10rpx;
margin-bottom: 20rpx;
padding-bottom: 10rpx;
border-radius: 10px;
}
.sku-item-selected {
font-size: 22rpx;
background-color: #3fbbfe;
margin-left: 10rpx;
color: #fff;
/* border:2rpx solid #333; */
padding-left: 20rpx;
padding-right: 20rpx;
padding-top: 10rpx;
margin-bottom: 20rpx;
padding-bottom: 10rpx;
border-radius: 10px;
}
.update-count-view {
display: flex;
margin-bottom: 20rpx;
margin-top: 20rpx;
position: absolute;
right: 20rpx;
}