微信小程序单选框自定义赋值

2023-07-24 04:56:03 346

这里我们应用之前一篇写过的弹框效果，单选框我们运用伪元素自定义，不使用图片，这个例子可以运用到很多情况；

知识点：

1、理解wx:if作用
2、理解三元运算符的使用
3、利用伪元素after/before自定义内容
4、定时器setTimeout的使用

照例先上代码

wxml部分：


预计到店

{{item}}








房间整晚保留，14:00之前到店可能需要等房

18:00以前



20:00以前



23:59以前



次日凌晨6:00之前

wxss部分：

.input-list{
padding:40rpx;
border-bottom:1pxsolid#eee;
display:flex;
position:relative;
}

.list-l{
flex:2;
line-height:50rpx;
}

.list-r{
flex:5;
}

.arriveTime{
line-height:50rpx;
}

.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:100vw;
height:auto;
padding:0;
overflow:hidden;
position:fixed;
bottom:0;
left:0;
z-index:1001;
background:#fff;
}

.modalBox{
padding:040rpx;
font-size:30rpx;
}

.choosePush{
text-align:center;
padding:40rpx0;
border-bottom:1pxsolid#eee;
position:relative
}

.choosePush.t{
color:#1da0ee;
}

.checkbox{
position:absolute;
right:0;
top:38rpx;
height:40rpx;
width:40rpx;
border:1pxsolid#1da0ee;
}

.checkbox::after{
content:'';
position:absolute;
height:15rpx;
width:25rpx;
border-left:1pxsolid#1da0ee;
border-bottom:1pxsolid#1da0ee;
transform:rotate(-45deg);
top:6rpx;
right:6rpx;
}

js部分：

Page({

data:{
showModalStatus:false,
_num:null,
haveChoosed:false,
sta:null,
item:'18:00',
},

preventTouchMove(){},

powerDrawer:function(e){
console.log(e)
varcurrentStatu=e.currentTarget.dataset.statu;
this.util(currentStatu)
},
util:function(currentStatu){
/*动画部分*/
//第1步：创建动画实例
varanimation=wx.createAnimation({
duration:200,//动画时长
timingFunction:"linear",//线性
delay:0//0则不延迟
});

//第2步：这个动画实例赋给当前的动画实例
this.animation=animation;

//第3步：执行第一组动画
animation.opacity(0).translateY(500).step();

//第4步：导出动画对象赋给数据对象储存
this.setData({
animationData:animation.export()
})

//第5步：设置定时器到指定时候后，执行第二组动画
setTimeout(function(){
//执行第二组动画
animation.opacity(1).translateY(0).step();
//给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
this.setData({
animationData:animation
})

//关闭
if(currentStatu=="close"){
this.setData(
{
showModalStatus:false
}
);
}
}.bind(this),200)

//显示
if(currentStatu=="open"){
this.setData(
{
showModalStatus:true
}
);
}
},

chooseChecked:function(e){
console.log(e)//打印出来你会了解所设定参数的意义
this.setData({
_num:e.currentTarget.dataset.num,
item:e.currentTarget.dataset.txt,
})

setTimeout(function(){
this.setData(
{
showModalStatus:false
}
);
}.bind(this),2000)
},


/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){

},

/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){

},

/**
*生命周期函数--监听页面显示
*/
onShow:function(){

},

/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){

},

/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){

},

/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){

},

/**
*用户点击右上角分享
*/
onShareAppMessage:function(){

}
})

这是单选效果，复选效果获取其index（如wxml中属性设定为data-selectIndex=''{{index}}'',在js方法中打印出来对象的json数组，利用三元运算添加class属性完成），点击它自身时，改变其状态，最后setData已改变属性的json数组。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序单选框自定义赋值

热门推荐

随机推荐