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

 

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

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

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

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

    
        {{item.nbaSort}}
    


    
        ...
    

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]
    })
  }

自定义日历

{{item.date}} {{item.gameNum}} 场比赛

 

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