前言
其实小程序模态框没有自带的组件 以下是我自己更改的效果希望对你有所帮助 菜鸟新手 求点赞收藏
一、使用步骤
1.wxml
代码如下:
<image id="banner" src="../img/2.png"></image>
<view class="body">
<view class="nav bc_white">
<view class="{{selected?'red':'default'}}" bindtap="selected">抽奖进行中</view>
<view class="{{selected1?'red':'default'}}" bindtap="selected1">往期中奖</view>
<view class="{{selected2?'red':'default'}}" bindtap="selected2">我的奖品</view>
</view>
<view class="{{selected?'show':'hidden'}}">
<!-- for activity -->
<view class="desc">
<image src="../img/bizhi2.jpg" style="width:200rpx;height:200rpx;margin-left:50rpx"></image>
<view class="wite">111</view>
<view class="wite">111</view>
</view>
<view class="desc">
<image src="../img/bizhi2.jpg" style="width:200rpx;height:200rpx;margin-left:50rpx"></image>
<view class="wite">111</view>
<view class="wite">111</view>
</view>
</view>
<view class="{{selected1?'show':'hidden'}}">
for activity
<button class="btn" bindtap="powerDrawer" data-statu="open" size="mini">button</button>
<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
<!--drawer content-->
<view class="drawer_title">请输入数量</view>
<view class="drawer_content">
<view class="stepper">
<!-- 减号 -->
<text class="sign {{num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>
<!-- 数值 -->
<input class="number" type="number" bindchange="bindManual" value="{{num}}" disabled="disabled" />
<!-- 加号 -->
<text class="sign {{num >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>
</view>
</view>
<view class="btn_ok" bindtap="powerDrawer" data-statu="close"><button bindtap="getCount">提交</button></view>
</view>
</view>
<view class="{{selected2?'show':'hidden'}}">
for other
</view>
</view>
2.js
代码如下:
data: {
selected:true,
selected1:false,
selected2:false,
num:1,
showModalStatus: false
},
/* 加数 */
addCount: function (e) {
console.log("刚刚您点击了加1");
var num = this.data.num;
// 总数量-1
if (num < 1000) {
this.data.num++;
}
// 将数值与状态写回
this.setData({
num: this.data.num
});
},
/* 减数 */
delCount: function (e) {
console.log("刚刚您点击了减1");
var num = this.data.num;
// 商品总数量-1
if (num > 1) {
this.data.num--;
}
// 将数值与状态写回
this.setData({
num: this.data.num
});
},
getCount: function (e) {
var num = this.data.num;
console.log(num);
wx.showToast({
title: "数量:" + num + "",
})
},
selected:function(e){
this.setData({
selected1:false,
selected2:false,
selected:true
})
},
selected1:function(e){
this.setData({
selected:false,
selected1:true,
selected2:false
})
},
selected2:function(e){
this.setData({
selected:false,
selected1:false,
selected2:true
})
},
powerDrawer: function (e) {
var currentStatu = e.currentTarget.dataset.statu;
this.util(currentStatu)
},
util: function(currentStatu){
/* 动画部分 */
// 第1步:创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
});
// 第2步:这个动画实例赋给当前的动画实例
this.animation = animation;
// 第3步:执行第一组动画
animation.opacity(0).rotateX(-100).step();
// 第4步:导出动画对象赋给数据对象储存
this.setData({
animationData: animation.export()
})
// 第5步:设置定时器到指定时候后,执行第二组动画
setTimeout(function () {
// 执行第二组动画
animation.opacity(1).rotateX(0).step();
// 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
this.setData({
animationData: animation
})
//关闭
if (currentStatu == "close") {
this.setData(
{
showModalStatus: false
}
);
}
}.bind(this), 200)
// 显示
if (currentStatu == "open") {
this.setData(
{
showModalStatus: true
}
);
}
},
2.wxss
代码如下:
#banner {
width: 100%;
height: 360rpx;
}
.nav {
width: 100%;
height: 100rpx;
display: flex;
flex-direction: row;
}
.default {
line-height: 100rpx;
text-align: center;
flex: 1;
border-right: 1px solid gainsboro;
color: #000;
font-weight: bold;
font-size: 28rpx;
}
.red {
line-height: 100rpx;
text-align: center;
color: #fc5558;
flex: 1;
border-right: 1px solid gainsboro;
font-weight: bold;
font-size: 28rpx;
}
.show {
display: block;
/* text-align: center; */
line-height: 200rpx;
}
.hidden {
display: none;
text-align: center;
line-height: 200px;
}
/*加减号*/
/*主容器*/
.stepper {
width:130px;
height: 40px;
/*给主容器设一个边框*/
border: 1rpx solid #818284;
border-radius: 3px;
margin:20px auto;
background: white;
}
/*加号和减号*/
.stepper .sign {
width: 40px;
line-height: 40px;
text-align: center;
float: left;
}
/*数值*/
.stepper .number {
width: 48px;
height: 40px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 16px;
color: #000000;
/*给中间的input设置左右边框即可*/
border-left: 1rpx solid #818284;
border-right: 1rpx solid #818284;
}
/*普通样式*/
.stepper .normal{
color: black;
}
/*禁用样式*/
.stepper .disabled{
color: #ccc;
}
button{
width: 90%;
color: white;
background:#DFB741;
margin:30px auto;
}
/*button*/
/* .btn {
width: 80%;
padding: 20rpx 0;
border-radius: 10rpx;
text-align: center;
margin: 40rpx 10%;
background: #000;
color: #fff;
} */
/*mask*/
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
/*content*/
.drawer_box {
width: 650rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 1001;
background: #FAFAFA;
margin: -150px 50rpx 0 50rpx;
border-radius: 3px;
}
.drawer_title{
padding:15px;
font: 20px "microsoft yahei";
text-align: center;
}
.drawer_content {
height: 150rpx;
overflow-y: scroll; /*超出父盒子高度可滚动*/
}
.btn_ok{
padding: 10px;
font: 20px "microsoft yahei";
text-align: center;
border-top: 1px solid #E8E8EA;
color: #3CC51F;
}
.top{
padding-top:8px;
}
.bottom {
padding-bottom:8px;
}
.title {
height: 30px;
line-height: 30px;
width: 160rpx;
text-align: center;
display: inline-block;
font: 300 28rpx/30px "microsoft yahei";
}
.input_base {
border: 2rpx solid #ccc;
padding-left: 10rpx;
margin-right: 50rpx;
}
.input_view{
font: 12px "microsoft yahei";
background: #fff;
color:#000;
line-height: 30px;
}
radio{
margin-right: 20px;
}
.desc{
display: flex;
margin: 50rpx;
}
.wite{
margin-left: 30rpx;
}