uniapp中利用scroll-view实现横向导航栏_uniapp横向可滑动菜单

1、需求

实现移动端的横向滚动的导航栏，选中的导航项需居中显示

2、效果图

3、代码实现

@scroll 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

scroll-view 开发文档地址

• 页面代码

<scroll-view class="bg-white nav fixed flex text-center"
			:style="[{top:CustomBar1 + 'px'},{paddingLeft: `15px`},{paddingRight:`15px`}]" scroll-x
			:scroll-left="scrollLeft" @scroll="scroll">
			<view class="cu-item text-sm" :class="item.label===TabCur?'text-black text-bold':''"
				v-for="(item,index) in titleList" :key="index" @tap="tabSelect" :data-id="item.label">
				{{item.value}}
			</view>
</scroll-view>
1
2
3
4
5
6
7
8

• js代码

export default {
data() {
        return {
                StatusBar: this.StatusBar,
                CustomBar: this.CustomBar,
                CustomBar1: 0,
                scrollLeft: 0,
                titleList: [{
                        label: 'all',
                        value: '全部任务'
                }, {
                        label: 'willExtended',
                        value: '将超期任务'
                }, {
                        label: 'execute',
                        value: '我执行的任务'
                }, {
                        label: 'firsttrial',
                        value: '我初审的任务'
                }, {
                        label: 'recheck',
                        value: '我复审的任务'
                }, {
                        label: 'all',
                        value: '我创建的任务'
                }, {
                        label: 'overdue',
                        value: '超期任务'
                }],
                left: 0
        };
},


methods: {
        scroll(e) {
                    // 获取滚动条滚动的距离
                    this.left = e.detail.scrollLeft
                   },
        tabSelect(e) {
                    // 当前点击元素的左边距离
                    const distanceL = e.target.x
                    // 点击元素的一半宽度
                    const elementHW = document.getElementsByClassName('cu-item text-bold')[0].clientWidth / 2
                    const screenW = document.body.clientWidth
                    // 屏幕宽度的一半
                    const screenHW = document.body.clientWidth / 2
                    // 元素右边距离
                    const distanceR = screenW - distanceL
                    setTimeout(() => {
                            // 重新计算滚动条滚动的距离
                            this.initScrollLeft(distanceL, elementHW, screenHW, distanceR)
				}, 100)
				
        },
        initScrollLeft(distanceL, elementHW, screenHW, distanceR) {
                // 当元素左边距离大于屏幕一半宽度  或者  右边距离大于屏幕一半距离的时候
                if (distanceL > (screenHW - elementHW) || distanceR > (screenHW - elementHW)) {
                        // 滚动条最终的滚动距离
                        this.scrollLeft = this.left + (distanceL - screenHW + elementHW)
                }
        }
    }
}
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64