优化calendar组件返回数据，新增侧边栏字母导航组件

app.json

@@ -4,7 +4,8 @@
     "pages/notices/notices",
     "pages/tdetail/tdetail",
     "pages/calendar/calendar",
-    "pages/coupon/coupon"
+    "pages/coupon/coupon",
+    "pages/alphabet/alphabet"
   ],
   "window":{
     "backgroundTextStyle":"light",

components/alphabet/alphabet.js

+// components/alphabet/alphabet.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    list:{
+      type:Array,
+      value:[]
+    }
+  },
+
+  lifetimes:{
+    attached:function(){
+      try{
+        var res=wx.getSystemInfoSync()
+        this.apHeight=16
+        this.offsetTop=80
+        this.setData({
+          windowHeight:res.windowHeight+'px'
+        })
+      }catch(e){}
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    alpha:'',
+    windowHeight:''
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    handlerAlphaTap(e){
+      let {ap} = e.target.dataset
+      if(this.properties.list[0].alphabet=="Top" && (ap=="Top" || ap=="top")){
+        ap=this.properties.list[1].alphabet
+      }
+      this.setData({
+        alpha:ap
+      })
+    },
+    handlerMove(e){
+      let {list}=this.properties
+      let moveY=e.touches[0].clientY
+      let rY=moveY-this.offsetTop
+      if(rY>=0){
+        let index=Math.ceil((rY-this.apHeight)/this.apHeight)
+        if(0<=index<list.length){
+          let nonwAp=list[index]
+          nonwAp && this.setData({alpha:nonwAp.alphabet})
+        }
+      }
+    },
+  }
+})

components/alphabet/alphabet.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

components/alphabet/alphabet.wxml

+<!-- 页面主要滚动区域 -->
+<scroll-view scroll-y style="height: {{windowHeight}}" scroll-into-view="{{alpha}}">
+  <view class="alphabet">
+    <view class="alphabet-list">
+      <view wx:for="{{list}}" wx:key="unique" id="{{item.alphabet}}" class="section-item" wx:if="{{index!=0}}">
+        <view class="section-item-header">
+          {{item.alphabet}}
+        </view>
+        <view wx:for="{{item.datas}}" wx:key="unique" wx:for-item="cell" wx:for-index="cellIndex" class="section-item-cells">
+          <view class="section-item-cell {{cellIndex!=(item.datas.length-1)?'border-bottom':''}}">
+            <text>{{cell}}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</scroll-view>
+
+<!-- 侧边栏字母导航 -->
+<view data-id="selector" catchtouchstart="handlerAlphaTap" catchtouchmove="handlerMove" class="alphanet-selector">
+  <view data-ap="{{item.alphabet}}" wx:for="{{list}}" wx:key="unique" class="selector-one">
+    {{item.alphabet}}
+  </view>
+</view>
\ No newline at end of file

components/alphabet/alphabet.wxss

+.alphabet-list .section-item .section-item-header{
+  display: flex;
+  align-items: center;
+  font-size: 22rpx;
+  color: #a8a8a8;
+  background-color: #f2f4f5;
+  padding: 4rpx 20rpx;
+}
+.alphabet-list .section-item .section-item-cells{
+  padding: 0 20rpx;
+}
+.alphabet-list .section-item .section-item-cells .section-item-cell{
+  font-size: 30rpx;
+  line-height: 1.0;
+  color: #333;
+  padding: 29rpx 0;
+}
+.border-bottom{
+  border-bottom: 1rpx solid #dbdbdb;
+}
+.alphanet-selector{
+  position: absolute;
+  top: 160rpx;
+  right: 0;
+  height: 864rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  box-sizing: border-box;
+}
+.alphanet-selector .selector-one{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24rpx;
+  color: #43c1f4;
+  padding: 6rpx 6rpx;
+  height: 24rpx;
+}
\ No newline at end of file

components/calendar/calendar.js

@@ -22,7 +22,8 @@ Component({
     daysCountArr:[31,28,31,30,31,30,31,31,30,31,30,31],
     weekArr:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
     // dateTimes:[{day:'10-1',target:'国庆节'},{day:'10-2',target:'中秋节'}],
-    dateList:[]
+    dateList:[],
+    now_event:""
   },
 
   lifetimes:{
@@ -33,16 +34,18 @@ Component({
       var d=today.getDate();
       var i=today.getDay();
       var selectedDate=curYear+'-'+curMonth+'-'+d;
+      var now_date=curMonth+'-'+d;
       var selectedWeek=this.data.weekArr[i];
       this.setData({
         curYear,
         curMonth,
         selectedDate,
         now_selectedDate:selectedDate,
-        selectedWeek
+        selectedWeek,
+        now_date
       })
-      this.getDateList(curYear,curMonth-1);
-      this.triggerEvent('timeload',{selectedDate,selectedWeek})
+      this.getDateList(curYear,curMonth-1,now_date);
+      this.triggerEvent('timeload',{selectedDate,selectedWeek,event:this.data.now_event})
     }
   },
 
@@ -50,7 +53,7 @@ Component({
    * 组件的方法列表
    */
   methods: {
-    getDateList(y,mon){
+    getDateList(y,mon,now_date){
       var vm=this;
       var daysCountArr=this.data.daysCountArr;
       if(y%4===0 && y%100!=0){
@@ -76,6 +79,11 @@ Component({
             if(dateList[weekIndex][j].dateTime==vm.properties.dateTimes[k].day){
               dateList[weekIndex][j].event=vm.properties.dateTimes[k].target
             }
+            if(now_date==vm.properties.dateTimes[k].day){
+              vm.setData({
+                now_event:vm.properties.dateTimes[k].target
+              })
+            }
           }
         }
         if(week==6){
@@ -96,7 +104,8 @@ Component({
       })
       this.triggerEvent('timechanged',{
         selectedDate:e.currentTarget.dataset.date.value,
-        selectedWeek:vm.data.weekArr[e.currentTarget.dataset.date.week]
+        selectedWeek:vm.data.weekArr[e.currentTarget.dataset.date.week],
+        event:(e.currentTarget.dataset.date.event?e.currentTarget.dataset.date.event:"")
       })
     },
     preMonth(){
@@ -109,7 +118,7 @@ Component({
         curYear,
         curMonth
       });
-      vm.getDateList(curYear,curMonth-1);
+      vm.getDateList(curYear,curMonth-1,this.data.now_date);
     },
     nextMonth(){
       var vm=this;
@@ -121,7 +130,7 @@ Component({
         curYear,
         curMonth
       });
-      vm.getDateList(curYear,curMonth-1);
+      vm.getDateList(curYear,curMonth-1,this.data.now_date);
     }
   }
 })

components/calendar/calendar.wxss

@@ -68,7 +68,7 @@
 .active_dates::before{
   content: "今天";
   position: absolute;
-  top: 0;
+  top: 3rpx;
   left: 50%;
   transform: translateX(-50%);
   color: blue;

pages/alphabet/alphabet.js

+// pages/alphabet/alphabet.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    list:[
+      {alphabet:'Top',datas:['a','a1']},
+      {alphabet:'A',datas:['a','a1']},
+      {alphabet:'B',datas:['a','a1','a2']},
+      {alphabet:'C',datas:['a','a1','a2']},
+      {alphabet:'D',datas:['a','a1','a2']},
+      {alphabet:'E',datas:['a','a1','a2']},
+      {alphabet:'F',datas:['a','a1','a2']},
+      {alphabet:'G',datas:['a','a1','a2']},
+      {alphabet:'H',datas:['a','a1','a2']},
+      {alphabet:'I',datas:['a','a1','a2']},
+      {alphabet:'J',datas:['a','a1','a2']},
+      {alphabet:'K',datas:['a','a1','a2']},
+      {alphabet:'L',datas:['a','a1','a2']},
+      {alphabet:'M',datas:['a','a1','a2']},
+      {alphabet:'N',datas:['a','a1','a2']},
+      {alphabet:'O',datas:['a','a1','a2']},
+      {alphabet:'P',datas:['a','a1','a2']},
+      {alphabet:'Q',datas:['a','a1','a2']},
+      {alphabet:'R',datas:['a','a1','a2']},
+      {alphabet:'S',datas:['a','a1','a2']},
+      {alphabet:'T',datas:['a','a1','a2']},
+      {alphabet:'U',datas:['a','a1','a2']},
+      {alphabet:'V',datas:['a','a1','a2']},
+      {alphabet:'W',datas:['a','a1','a2']},
+      {alphabet:'X',datas:['a','a1','a2']},
+      {alphabet:'Y',datas:['a','a1','a2']},
+      {alphabet:'Z',datas:['a','a1','a2']}
+    ],
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    // try{
+    //   var res=wx.getSystemInfoSync()
+    //   this.apHeight=16
+    //   this.offsetTop=80
+    //   this.setData({
+    //     windowHeight:res.windowHeight+'px'
+    //   })
+    // }catch(e){}
+  },
+  
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

pages/alphabet/alphabet.json

+{
+  "usingComponents": {
+    "y-alphabet":"../../components/alphabet/alphabet"
+  }
+}
\ No newline at end of file

pages/alphabet/alphabet.wxml

+<y-alphabet list="{{list}}"></y-alphabet>
\ No newline at end of file

pages/index/index.js

@@ -26,6 +26,12 @@ Page({
     })
   },
 
+  alphabetshow(){
+    wx.navigateTo({
+      url: '../alphabet/alphabet',
+    })
+  },
+
   /**
    * 生命周期函数--监听页面加载
    */

pages/index/index.wxml

 <view class="mxc0" bindtap="gonotice">
-  <text>去康康“日期组件扩展组件”——高自定义程度、可精确到分、秒</text>
+  <text>去康康“自定义日期组件扩展组件”——高自定义程度、可精确到分、秒</text>
 </view>
 <view class="mxc1" bindtap="gocoupon">
-  <text>去康康“优惠券组件”——左右布局，支持slot，可自定义文字</text>
+  <text>去康康“自定义优惠券组件”——左右布局，支持slot，可自定义文字</text>
 </view>
 <view class="mxc2" bindtap="gotime">
-  <text>去康康“日历组件”吧！</text>
+  <text>去康康“自定义日历组件”吧！</text>
+</view>
+<view class="mxc3" bindtap="alphabetshow">
+  <text>去康康“自定义侧边栏字母导航组件”吧！</text>
 </view>
\ No newline at end of file

pages/index/index.wxss

@@ -12,4 +12,7 @@ view{
   height: 96rpx;
   background-color: rgba(0,0,0,.2);
   overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
\ No newline at end of file