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


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数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
浅谈JavaScript作用域
Dec 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中全局变量global的使用演示代码
2011/05/18 PHP
基于php-fpm的配置详解
2013/06/03 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
隐性调用php程序的方法
2015/06/13 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
深入了解NumPy 高级索引
2020/07/24 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
意向书范文
2014/03/31 职场文书
保证书范文大全
2014/04/28 职场文书
旅游活动总结
2014/08/27 职场文书
学雷锋广播稿大全
2015/08/19 职场文书