时间表选择

1540阅读　0评论2019-05-10　拾忆1765207585
分类：其他平台


点击(此处)折叠或打开

  1. <!--pages/yue/yue.wxml-->
  2. <view class='gonggao'>
  3.   <view class='gonggao_con'>
  4.     <view class='gonggao_con_left'>
  5.       <view class='gonggao_con_left_img'><image src=''></image></view>
  6.       <view class='gonggao_con_left_word'>拖动或者点击时间轴选出你的空闲时间来！~</view>
  7.     </view>
  8.     <view class='gonggao_con_right'>
  9.       <view class='gonggao_con_left_img'><image src=''></image></view>
  10.     </view>
  11.   </view>
  12. </view>
  13. <view class='yueTime'>
  14.   <scroll-view scroll-x="{{gun}}">
  15.     <block wx:for="{{xinqi}}" wx:key="this" wx:for-index="icc">
  16.       <view class='yueTime_con_item'>
  17.         <view class="yueTime_con_item_left">
  18.           <view class='yueTime_con_item_left_top'><text>{{item.month}}/</text>{{item.rqi}}</view>
  19.           <view class='yueTime_con_item_left_top'>{{item.xq}}</view>
  20.         </view>
  21.         <view class='yueTime_con_item_right'>
  22.           <view class='yueTime_con_item_right_top'>
  23.             <block wx:for="{{item.zong}}" wx:key="id">
  24.               <view class="item_right_line {{(index+1)%2==0?'item2n':''}}}">
  25.                 <view wx:if="{{index%4==0}}" class='number'>{{index/4+8}}</view>
  26.               </view>
  27.             </block>
  28.           </view>
  29.           <view class='yueTime_con_item_right_top_bottom' data-width="900" bindtouchstart='start' bindtouchmove='move' bindtouchend='end'>
  30.             <block wx:for="{{item.lineKuai}}" wx:key="id" wx:for-item="cc">
  31.               <view class="line_kuai {{cc.choose==true?'active':'active1'}}" bindtouchstart='clickMe' data-x="{{icc}}" data-id="{{index}}" data-choose="{{cc.choose}}"></view>
  32.             </block>
  33.           </view>
  34.         </view>
  35.       </view>
  36.     </block>
  37.   </scroll-view>
  38. </view>
  39. <view class='submit' catchtap='{{queding}}'> 确定选择</view>


点击(此处)折叠或打开

  1. /* pages/yue/yue.wxss */
  2. .yueTime{
  3.   overflow: hidden;
  4.   padding: 0 20rpx ;
  5.   box-sizing: border-box;
  6. }

  8. scroll-view{
  9.   width: 100%;
  10.   height: 1400rpx;
  11.   box-sizing: border-box;
  12.   overflow: hidden;
  13. }
  14. .yueTime_con_item{
  15.   margin-top: 40rpx;
  16.   width:950px;
  17.   /* height: 100rpx; */
  18.   padding: 20rpx 0;
  19.   box-sizing: border-box;
  20.   display: flex;
  21.   align-items:center;
  22. }
  23. .yueTime_con_item_left{
  24.   width: 75rpx;
  25.   font-size: 28rpx;
  26.   color: #333333;
  27. }
  28. .yueTime_con_item_right{
  29.   width:900px;
  30. }
  31. .yueTime_con_item_right_top{
  32.    display: flex;
  33.   align-items: flex-end;
  34.   width:900px;
  35. }
  36. .yueTime_con_item_right_top_bottom{
  37.    width:898px;
  38.   height: 50rpx;
  39.   border-bottom:1px solid#999;
  40.   border-left:1px solid #999;
  41.   border-right:1px solid #999;
  42.   display: flex;
  43. }
  44. .item_right_line{
  45.   width:30rpx;
  46.   height: 30rpx;
  47.   border-left: 1px solid #999;
  48.   border-bottom: 1px solid #999;
  49.   position: relative;
  50. }
  51. .item2n{
  52.   height: 15rpx;
  53.   border-left: 1px solid #999;
  54. }
  55. .number{
  56.   width: 20rpx;
  57.   height: 20rpx;
  58.   position: absolute;
  59.   top: -40rpx;
  60.   left: -10rpx;
  61.   font-size: 26rpx;
  62.   color: #333333;
  63.   text-align: center;
  64. }
  65. .item_right_line:last-child {
  66.   width: 0px;
  67. }
  68. .line_kuai{
  69.   width: 15px;
  70.   height: 50rpx;
  71.   font-size:20rpx;
  72.   text-align: center;
  73. }
  74. .active{
  75.   background: #61B72B;
  76. }
  77. .active1{
  78.   background: none;
  79. }

  81. .yueTime_con_item_left_top{
  82.   font-size: 32rpx;
  83. }
  84. .yueTime_con_item_left_top text{
  85.   font-size: 26rpx;
  86. }

  88. .gonggao_con{
  89.   padding:20rpx;
  90.   background: rgba(254,204,71,0.12);
  91.   display: flex;
  92.   justify-content: space-between;
  93.   align-items: center;
  94. }
  95. .gonggao_con_left{
  96.   display: flex;
  97.   align-items: center;
  98. }
  99. .gonggao_con_left_img{
  100.   width: 42rpx;
  101.   height: 42rpx;
  102.   border-radius: 100%;
  103. }
  104. .gonggao_con_left_img image{
  105.   width: 100%;
  106.   height: 100%;
  107.   border-radius: 100%;
  108. }
  109. .gonggao_con_left_word{
  110.   margin-left: 10rpx;
  111.   font-size: 26rpx;
  112.   color: #FECC47;
  113. }
  114. .submit{
  115.   position: fixed;
  116.   bottom: 0rpx;
  117.   width: 100%;
  118.   padding: 30rpx;
  119.   background: #61B72B;
  120.   color: #fff;
  121.   font-size:30rpx;
  122.   text-align: center;
  123.   box-sizing: border-box;
  124. }

点击(此处)折叠或打开

  1. Page({

  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     queding:"submit", // 点事件防止多次点击，预留时间2秒
  8.     gun:true,//是否滚动
  9.     xinqi:[ //选择 提交 //渲染的页面
  10.       { id: 0, xq: '周一', month: "4", rqi: '10', zong: [], lineKuai: [] },
  11.       { id: 1, xq: '周二', month: "4", rqi: '11', zong: [], lineKuai: [] },
  12.       { id: 2, xq: '周三', month: "4", rqi: '12', zong: [], lineKuai: [] },
  13.       { id: 3, xq: '周四', month: "4", rqi: '13', zong: [], lineKuai: [] },
  14.       { id: 4, xq: '周五', month: "4", rqi: '14', zong: [], lineKuai: [] },
  15.       { id: 5, xq: '周六', month: "4", rqi: '15', zong: [], lineKuai: [] },
  16.       { id: 6, xq: '周日', month: "4", rqi: '16', zong: [], lineKuai: [] },
  17.     ]
  18.   },

  20.   /**
  21.    * 生命周期函数--监听页面加载
  22.    */
  23.   onLoad: function (options) {
  24.     var that =this
  25.     console.log(that.data.zong)
  26.     that.data.xinqi.map((item,index)=>{
  27.       item.zong.length = 61;
  28.     })
  29.     for (var i = 0; i < that.data.xinqi.length;i++){
  30.       for (var j = 0; j < 60; j++) {
  31.         that.data.xinqi[i].lineKuai[j] = new Object();
  32.         that.data.xinqi[i].lineKuai[j].choose = false
  33.       }
  34.     }
  35.     console.log("创建的数组", that.data.xinqi)
  36.     that.setData({
  37.     
  38.       xinqi: that.data.xinqi
  39.     })
  40.   },

  42.   /**
  43.    * 开始点击
  44.   */
  45.   start:function(e){
  46.     var _this = this, id = e.currentTarget.dataset.id, zongkuan = e.currentTarget.dataset.width, index = this.clickIndex;
  47.     console.log("开始获点的坐标",e,e.changedTouches[0].clientX);
  48.     _this.setData({
  49.       sx: e.changedTouches[0].clientX,
  50.       gun: false
  51.     })
  52.   },
  53.   /*移动的点坐标*/
  54.   move:function(e){
  55.     this.setData({
  56.       gun:false
  57.     })
  58.   },
  59.   /*结束点的坐标*/
  60.   end: function (e) {
  61.     var jilu =Math.ceil((e.changedTouches[0].clientX - this.data.sx) / 15)
  62.     let moveClickNum = this.clickIndex;
  63.     let id = this.mdcid;
  64.     if (jilu>0){
  65.       console.log("选择为true")
  66.       for (var i = 0; i <this.data.xinqi[id].lineKuai.length; i++) {
  67.         if (i == moveClickNum && moveClickNum < this.clickIndex + jilu) {
  68.           this.data.xinqi[id].lineKuai[moveClickNum].choose = true;
  69.           moveClickNum = moveClickNum + 1
  70.         }
  71.       }
  72.     }
  73.     if (jilu < 0){
  74.       console.log("选择为false")
  75.       for (var i = this.data.xinqi[id].lineKuai.length; i > 0; i--) {
  76.         if (i == moveClickNum && moveClickNum > this.clickIndex + jilu) {
  77.           this.data.xinqi[id].lineKuai[moveClickNum].choose = false;
  78.           moveClickNum = moveClickNum - 1;
  79.         }
  80.       }
  81.     }
  82.       this.setData({
  83.         xinqi: this.data.xinqi,
  84.         gun: true
  85.       })

  87.   },
  88.   /**
  89.    * 点击事件 获取当前的点击的索引index 传给start函数使用
  90.    */
  91.   clickMe:function(e){
  92.     var _this = this, index = e.currentTarget.dataset.id, zongkuan = e.currentTarget.dataset.width, choose = e.currentTarget.dataset.choose, id = e.currentTarget.dataset.x;
  93.     this.clickIndex = index;
  94.     this.mdcid = id;
  95.     if (_this.data.xinqi[id].lineKuai[index].choose == true){
  96.       _this.data.xinqi[id].lineKuai[index].choose= false
  97.     }else{
  98.       _this.data.xinqi[id].lineKuai[index].choose = true
  99.     }
  100.     _this.setData({
  101.       xinqi: _this.data.xinqi,
  102.       gun: false
  103.     })
  104.   },
  105.   /**
  106.    * 保存
  107.    */
  108.   submit:function(e){
  109.     var _this =this;
  110.     wx.showModal({
  111.       title: '确定保存',
  112.       success:function(res){
  113.         if(res.confirm){
  114.           console.log("asdfafafasf",)
  115.           _this.setData({
  116.             queding:'' //防止按钮多次点击
  117.           })
  118.           setTimeout(function(){
  119.             _this.setData({
  120.               queding: 'submit'
  121.             })
  122.           },2000) //2秒后再次点击
  123.         }
  124.       }
  125.     })
  126.   }
  127. })
效果图：


上一篇：小程序自定义导航条
下一篇：Canvas 文字换行，设定超出的部分 省略号代替