微信小程序爬坑记之导航栏选中高亮滚动条实现

loading

前言

导航选择高效果实现,该场景用的很广泛,简单写一下实现过程,实际项目中最好封装成组件,这里先不做封装,下一篇文章写一写如何自定义组件。


先看一下效果
loading...

需求

导航栏选中的项做高亮显示,这里假设导航栏有四项,分别为可接单,已接单,维修中,已完成。默认选中可接单,未选中的为灰色,选中为蓝色,字体加粗且字体下方有滑动条。

分析

为四个选项各自增加一个key值,这里用 state 表示当前状态,分别表示为 UNORDER, ALREADY, ORDERING, SUCCESS 。在wxml中给每一项通过 data-xxx 定义一个属性即是当前项的状态。在js中点击事件通过 e.currentTarget.dataset.xxx 来获取,再通过当前点击的state与四个选项匹配,匹配上的做高亮显示。下面看代码实现。

代码实现

wxml

1
2
3
4
5
6
7
8
<!-- 导航 -->
<view class="nav row-around bd-b">
<block wx:for="{{ navList }}" wx:key="{{ item.state }}">
<view class="item text-center">
<text class="{{ item.state === state ? 'select' : '' }}" data-state="{{ item.state }}" bind:tap="handleChoose">{{ item.name }}</text>
</view>
</block>
</view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.nav {
height: rpx(102);

.item {
width: 12.8%;
height: rpx(32);
color: #AEAEAE;
font-size: rpx(30);
position: relative;
z-index: 99;
}

.select {
font-size: rpx(32);
color: @color-primary;
font-weight: 600;

&::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
margin: auto;
margin-top: rpx(60);
width: 50%;
border-bottom: rpx(8) solid @color-primary;
border-radius: rpx(4);
}
}
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Page({
data: {
navList: [
{
name: '可接单',
state: 'UNORDER'
},
{
name: '已接单',
state: 'ALREADY'
},
{
name: '维修中',
state: 'ORDERING'
},
{
name: '已完成',
state: 'SUCCESS'
},
],
state: 'UNORDER', // 导航默认状态
},

// 接单状态选择
handleChoose: ({currentTarget}) => {
const {state} = currentTarget.dataset;
const { navList } = page.data;
page.setData({
navList,
state
});
}
}

总结

像这种常用的效果抽离成组件较好,在页面调用时只需要传一个导航数组列表即可,以后也不必重复写了,下一篇文章写如何自定义组件。

如果觉得文章不错,请我吃根辣条吧~~