开发文档是好朋友,让我们再来看看。
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
中使用三目运算符判断获取日期与数据中的日期是否相同,从而达到高亮显示的效果。