Chinaunix首页 | 论坛 | 博客
  • 博客访问: 569125
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: 其他平台

2019-05-10 14:04:30


点击(此处)折叠或打开

  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='http://webcdn.kaisaile.org/gonggao.png'></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='http://webcdn.kaisaile.org/wenhao.png'></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. }

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

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

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

点击(此处)折叠或打开

  1. Page({

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

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

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

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


阅读(891) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册