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


Posted in Javascript onMay 26, 2020

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

知识点:

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

照例先上代码

wxml部分:

<view class='input-list'>
 <view class='list-l'>预计到店</view>
 <view class='list-r' bindtap='powerDrawer' data-statu="open">
 <view class='arriveTime'>{{item}}</view>
 </view>
</view>

<view class="drawer_screen" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close" catchtouchmove="preventTouchMove"></view> 
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}" catchtouchmove="preventTouchMove"> 
 <view class='modalBox'>
 <view class='choosePush grey9'>房间整晚保留,14:00之前到店可能需要等房</view>
 <view class="{{_num == 0 ? 'choosePush t' : 'choosePush'}}" bindtap='chooseChecked' data-num='0' data-txt='18:00以前'>
  18:00以前
  <view class='checkbox' wx:if="{{_num==0}}"></view>
 </view>
 <view class="{{_num == 1 ? 'choosePush t' : 'choosePush'}}" bindtap='chooseChecked' data-num='1' data-txt='20:00以前'>
  20:00以前
  <view class='checkbox' wx:if="{{_num==1}}"></view>
 </view>
 <view class="{{_num == 2 ? 'choosePush t' : 'choosePush'}}" bindtap='chooseChecked' data-num='2' data-txt='23:59以前'>
  23:59以前
  <view class='checkbox' wx:if="{{_num==2}}"></view>
 </view>
 <view class="{{_num == 3 ? 'choosePush t' : 'choosePush'}}" bindtap='chooseChecked' data-num='3' data-txt='次日凌晨6:00之前'>
  次日凌晨6:00之前
  <view class='checkbox' wx:if="{{_num==3}}"></view>
 </view>
 </view>
</view>

wxss部分:

.input-list {
 padding: 40rpx;
 border-bottom: 1px solid #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: 0 40rpx;
 font-size: 30rpx;
}

.choosePush {
 text-align: center;
 padding: 40rpx 0 ;
 border-bottom: 1px solid #eee;
 position: relative
}

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

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

.checkbox::after {
 content: '';
 position: absolute;
 height: 15rpx;
 width: 25rpx;
 border-left: 1px solid #1da0ee;
 border-bottom: 1px solid #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)
 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).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数组。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 #Javascript
jQuery弹框插件使用方法详解
May 26 #jQuery
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 #Javascript
微信小程序实现弹框效果
May 26 #Javascript
微信小程序自定义弹出层效果
May 26 #Javascript
详解JSON.stringify()的5个秘密特性
May 26 #Javascript
微信小程序实现简单文字跑马灯
May 26 #Javascript
You might like
php使用pack处理二进制文件的方法
2014/07/03 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
python 中split 和 strip的实例详解
2017/07/12 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
python程序变成软件的实操方法
2019/06/24 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
异步传递消息系统的作用
2016/05/01 面试题
国培远程培训感言
2014/03/08 职场文书
2014年客房部工作总结
2014/11/22 职场文书
语文教师个人工作总结
2015/02/06 职场文书
员工聘用合同范本
2015/09/21 职场文书
小学思想品德教学反思
2016/02/24 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
mysql主从复制的实现步骤
2021/10/24 MySQL
python 判断文件或文件夹是否存在
2022/03/18 Python
Java中API的使用方法详情
2022/04/06 Java/Android