用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-3-14 01:04:21 天下雪原创达人 造轮子 人生巅峰 楼主 375522
新款日历:
2.gif

代码示例:
[AppleScript] 纯文本查看 复制代码
//index.js
//获取应用实例
// var app = getApp()
var utils = require('../../utils/util.js')
Page({
  data: {
    loading: false, // 加载中

    activityOrBrand: true, // 正显示活动还是优惠 —— true 为活动
    list: {
      activity: {pageNo: 1, data: []},
      brand: {pageNo: 1, data: []},
    },

    dateList: [],   // 日历数据数组
    swiperCurrent: 0, // 日历轮播正处在哪个索引位置
    dateCurrent: new Date(),  // 正选择的当前日期
    dateCurrentStr: '', // 正选择日期的 id
    dateMonth: '1月',  // 正显示的月份
    dateListArray: ['日','一','二','三','四','五','六'],
  },
  onLoad (option) {
    var that = this;
    // this.loading();
    this.initDate(); // 日历组件程序
    this.initList(); // 列表程序
  },
  onShow: function( e ) {
    // this.loading('close');
    wx.getSystemInfo( {
      success: ( res ) => {
        this.setData( {
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth,
        });
      }
    });
  },

  // 下拉刷新
  onPullDownRefresh () {
    this.loadList(true);
  },
  onReachBottom () {
    this.loadList();
  },

  // 顶部 tab 部分
  // ----------------------------
  choose1 (e) {
    var that = this;
    this.setData({
      activityOrBrand: !that.data.activityOrBrand,
    });
    this.loadList();
  },

  // 日历组件部分
  // ----------------------------
  initDate () {
    var d = new Date();
    var month = utils.addZero(d.getMonth()+1),
        day = utils.addZero(d.getDate());
    for(var i=-3; i<=3; i++) {
      this.updateDate(utils.DateAddDay(d, i*7));
    }
    this.setData({
      swiperCurrent: 3,
      dateCurrent: d,
      dateCurrentStr: d.getFullYear() + '-' + month + '-' + day,
      dateMonth: month + '月',
    });
  },
  // 获取这周从周日到周六的日期
  calculateDate (_date) {
    var first = utils.FirstDayInThisWeek(_date);
    var d = {
      'month': first.getMonth() + 1,
      'days': [],
    };
    for(var i=0; i<7; i++) {
      var dd = utils.DateAddDay(first, i);
      var day = utils.addZero(dd.getDate()),
          month = utils.addZero(dd.getMonth()+1);
      d.days.push({
        'day': day,
        'id': dd.getFullYear()+'-'+month+'-'+day,
      });
    }
    return d;
  },
  // 更新日期数组数据
  updateDate (_date, atBefore) {
    var week = this.calculateDate(_date);
    if (atBefore) {
      this.setData({
        dateList: [week].concat(this.data.dateList),
      });
    } else {
      this.setData({
        dateList: this.data.dateList.concat(week),
      });
    }
  },
  // 日历组件轮播切换
  dateSwiperChange (e) {
    var index = e.detail.current;
    var d = this.data.dateList[index];
    this.setData({
      swiperCurrent: index,
      dateMonth: d.month + '月',
    });
  },
  // 获得日期字符串
  getDateStr: function(arg) {
    if (utils.type(arg) == 'array') {
      return arr[0] + '-' + arr[1] + '-' + arr[2] + ' 00:00:00';
    } else if (utils.type(arg) == 'date') {
      return arg.getFullYear() + '-' + (arg.getMonth()+1) + '-' + arg.getDate() + ' 00:00:00';
    } else if (utils.type(arg) == 'object') {
      return arg.year + '-' + arg.month + '-' + arg.day + ' 00:00:00';
    }
  },
  // 点击日历某日
  chooseDate (e) {
    var str = e.target.id;
    this.setData({dateCurrentStr: str,});
    this.loadList(true);
  },


  // 列表部分
  // ----------------------------
  // 初始化列表
  initList () {
    this.loadList(true);
  },
  // 下拉加载更多
  loadMore () {
    // this.loadList();
  },
  // 列表数据
  loadList (reFresh) {
    var dateStr = this.data.dateCurrentStr + ' 00:00:00',
        flag = this.data.activityOrBrand,
        _data = this.data.list,
        _list = (flag==true ? _data.activity : _data.brand),
        pageNo = reFresh ? 1 : ++_list.pageNo,
        list = reFresh ? [] : _list.data;
    // console.log(dateStr, flag, pageNo, list);
    
    // 请求数据接口
    var that = this;
    that.loading();
    console.log(flag, pageNo, dateStr);
    wx.request({
      url: "https://sum.kdcer.com/api/Applet/GetTest?dirFlag="+flag+"&pageNo="+pageNo+"&pageSize=10&dt="+dateStr,
      success (res) {
        console.log(res.data)
        that.loading('close');
 
        if (flag) {
          var _d = that.defaultTheData(res.data);
          _list.data = list.concat(_d);
        } else {
          var _d = [];
          for(var i in res.data) {
            _d.push(res.data[i]);
          }
          _list.data = list.concat(_d);
        }
        // console.log(_data.activity, _data.brand);
        // 上传供页面渲染
        that.setData({
          list: _data,
        });
      },
      fail (e) {
        console.log(e);
      }
    });
  },
  // 对返回的数据进行处理
  defaultTheData (data) {
    // for(var i in data) {
    //   var c = data[i].Content;
    //   if (!(c && c.BeginTime && c.EndTime)) {data[i].Time = ''; continue;} 
    //   data[i]['Time'] = c.BeginTime.replace(/-/g,'/') + ' - ' + c.EndTime.replace(/-/g,'/');
    // }
    return data;
  },
  loading (close) {
    if (!close) {
      wx.showToast({
        title: '加载中',
        icon: 'loading',
        duration: 10000,
      });
    } else {
      wx.hideToast();
    }
  },

  onShareAppMessage: function () {
    return {
      title: '优惠尽在青浦奥莱',
      path: 'index'
    }
  }
})

项目地址及下载:
https://github.com/foreverZ133/wxDEMO
wxDEMO-master.zip (15.02 KB, 下载次数: 274)
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
6666666666666
555
2017-3-23 10:32:25 cxb 诠释者
5#
优惠资讯:横版日历,tab栏
bucuobucuo
2017-3-30 13:58:05 LL^ath 架构狮
7#
学习
6666666666666666666666666666666666666666
感谢分享
微信小程序:随手礼记。
人情往来必备,个人社交关系管理专家。
kiuy
感谢
学习!
2017-4-16 19:21:58 yedehu开发者认证 诠释者
13#
...........
2017-4-17 18:12:43 W9. 诠释者
14#

少年,你的小程序做的怎么样了
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
123下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册