微信小程序swiper组件 选项卡 自定义日历

开发文档是好朋友，让我们再来看看。

swiper组件在小程序中非常常见，它可在有限的区域展示更多内容，还能增加页面的视觉动态效果，总之就是好。（但，好东西也是有槽点的啦）

1） 滑动swiper可改变导航栏的状态，点击导航栏选项可切换swiper-item。这个实现较为简单，步骤如下：

• 在data中添加一个表示下标的变量curIndex；
• 将此变量绑定到导航栏各个选项，同时使用一个三目运算符进行wx:if条件渲染，若curIndex等于当前选项的下标，则在其底部添加一个伪元素表示选中；
• 将curIndex绑定到swiper的current属性中，通过选项卡的bindtap事件和swiper的bindchange事件实时切换swiper-item。

<view class="info_hd">
    <view class="headerMenu {{curIndex===index?'on':''}}" 
        wx:for="{{nbaMenu}}"
        data-index="{{index}}" 
        bindtap="switchSort">
        <view class="nbaSort">{{item.nbaSort}}</view>
    </view>
</view>
<view class="info_bd">
    <swiper current="{{curIndex}}" bindchange="bindswiper">
        ...
    </swiper>
</view>

bindswiper(e) {
    this.setData({
      curIndex: e.detail.current
    })
  },
switchSort(e) {
    console.log(e.currentTarget.dataset.index);
    this.setData({
      curIndex: e.currentTarget.dataset.index?e.currentTarget.dataset.index: 0
    })
}

2）有限个swiper-item来初步实现所需效果。

changeMatch(e) {
    const current = e.detail.current;   //获取当前位置
    const befInd = this.data.swiperCurIndex;  //获取滑动前的位置
    const index = current - befInd;
    if (index <= -1) {   //判断左滑右滑
      this.preDay();   //日期切换至前一天
    } else if (index >= 1) {
      this.nextDay();   //日期切换至后一天
    } else {
      return
    }
  }

---

// nextDay() 方法类似
preDay() {
    let day = this.data.day;
    let month = this.data.month;
    let week= this.data.week;
    let i = this.data.i;
    if (i<=0) {  //周一至周日的循环切换
      i = 6;
    }else {
      i--;
    }
    if(day<=1) {  //日期本月第一天时，将日期切换至上月最后一天
      month--;
      day = this.data.daysCountArr[month-1];
    }else {
      day--;  //否则切换至前一天
    }
    this.setData({
      swiperCurIndex: this.data.swiperCurIndex-1,
      month,
      day,
      i,
      week: this.data.weekArr[i],
      curDate: month+'月'+day+'日'+' '+this.data.weekArr[i]
    })
  }

自定义日历

<view class= "calendar_box" wx: for= "{{dateList}}" wx: for-item= "week" wx:key= "{{index}}" style= "{{index==0?'justify-content: flex-end;':''}}"> <view wx: for= "{{week}}" data-date= "{{item}}" class= "weekday_label {{item.value==selectedDate?'active_label':''}}" bindtap= "selectDate"> <view class= "date"> <text>{{item.date}}</text> </view> <view class= "gameNumBox"> <text class= "gameNum">{{item.gameNum}}</text> <text>场比赛</text> </view> </view></view>

• 默认高亮显示当天日期，点击具体日期高亮显示。这个实现起来较为简单，只需得到通过点击事件获取当前点击日期，在.wxml中使用三目运算符判断获取日期与数据中的日期是否相同，从而达到高亮显示的效果。