【uniapp】小程序滚动tab

发表于 更新于 分类于 阅读次数： 本文字数： 765 阅读时长 ≈ 3 分钟
本文档详细介绍了如何使用 UniApp 实现一个滚动的 Tab 栏。滚动 Tab 栏在小程序中非常常见，适用于需要展示多个选项卡且每个选项卡内容较多的情况。本文将通过两个不同的实现方式（文字版和图片版）来展示如何实现这一功能。

文字版

效果图

图片

源码

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
  <view class="content">
    <view class="scrollBox">
      <scroll-view class="scroll" scroll-x='true' scroll-with-animation :scroll-left='scrollLeft'>
        <view class="tabBox" v-for="(item,index) in tabsList" :key="index"
          :class="[{ active: currentIndex === index }, 'scroll-item']" @click="changeTab(index)">
          <view class="nanum" :class="currentIndex === index?'active':''">
            {{index+1}}
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        scrollWidth: 0,
        tabsList: [{
            id: 1,
            name: 'tab1',
          },
          {
            id: 2,
            name: 'tab2',
          },
          {
            id: 3,
            name: 'tab3',
          },
          {
            id: 4,
            name: 'tab4',
          },
          {
            id: 5,
            name: 'tab5',
          },
          {
            id: 6,
            name: 'tab6',
          },
          {
            id: 7,
            name: 'tab7',
          },
          {
            id: 8,
            name: 'tab8',
          },
          {
            id: 9,
            name: 'tab9',
          }
        ],
        currentIndex: 0,
        scrollLeft: 0,
      }
    },
    onLoad() {
      // 获取元素宽度
      const query = uni.createSelectorQuery().select('.scroll');
      query.boundingClientRect(res => {
        this.scrollWidth = res.width;
      }).exec()
    },

    methods: {
      // 切换Tab
      changeTab(index) {
        console.log(index, "文字tab");
        this.currentIndex = index;
        this.moveTo(index)
      },
      // 当前点击的元素移动到屏幕中间
      moveTo(index) {
        const query = uni.createSelectorQuery().in(this)
        query.selectAll('.scroll-item').boundingClientRect(rect => {
          const windowWidth = this.scrollWidth; // 获取到的屏幕宽度
          let width = 0
          // 计算当前点击的标签项距离左侧的距离
          for (let i = 0; i < index; i++) {
            width += rect[i].width
          }
          // 当大于屏幕一半的宽度则滚动，否则就设置左侧位置为0
          if (width > windowWidth / 2) {
            this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
          } else {
            this.scrollLeft = 0
          }
        }).exec()
      },

    }
  }
</script>

<style scoped>
  .scrollBox .tabBox {
    width: 150rpx;
    height: 100%;
    margin-right: 10rpx;
    padding: 4rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 40rpx;
  }

  .scrollBox .tabBox .nanum {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60rpx;
    line-height: 60rpx;
    background: #fff;
  }

  .scroll {
    width: 100%;
    white-space: nowrap;
    height: 100%;
    background-color: #eee;
  }

  .scroll view {
    display: inline-block;
    font-size: 30rpx;
    color: #000;
    position: relative;
  }

  .scroll view.active {
    background-color: #000000 !important;
    color: #fff !important;
  }
</style>

图片版

效果图

图片

源码

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<template>
  <view class="content">
    <view class="scrollBox">
      <scroll-view class="scroll" scroll-x='true' scroll-with-animation :scroll-left='scrollLeft'>
        <view class="imagbx" v-for="(item,index) in tabsList" :key="index"
          :class="[{ active: currentIndex === index }, 'scroll-item']" @click="changeTab(index)">
          <image :src="item.img" mode="widthFix"></image>
          <view class="nanum" :class="currentIndex === index?'active':''">
            {{index+1}}
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        scrollWidth: 0,
        tabsList: [{
            id: 1,
            name: 'img1',
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
          },
          {
            id: 2,
            name: 'img2',
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
          },
          {
            id: 3,
            name: 'img3',
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
          },
          {
            id: 4,
            name: 'img4',
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
          },
          {
            id: 5,
            name: 'img5',
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
          },
          {
            id: 6,
            name: 'img6',
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
          },
          {
            id: 7,
            name: 'img7',
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
          },
          {
            id: 8,
            name: 'img8',
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
          },
          {
            id: 9,
            name: 'img9',
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
          }
        ],
        currentIndex: 0,
        scrollLeft: 0,
      }
    },
    onLoad() {
      // 获取元素宽度
      const query = uni.createSelectorQuery().select('.scroll');
      query.boundingClientRect(res => {
        this.scrollWidth = res.width;
      }).exec()
    },

    methods: {
      // 点击切换Tab
      changeTab(index) {
        console.log(index, "图片tab");
        this.currentIndex = index;
        this.moveTo(index)
      },
      // 点击元素移动到中间
      moveTo(index) {
        const query = uni.createSelectorQuery().in(this)
        query.selectAll(`.scroll-item`).boundingClientRect(rect => {
          const windowWidth = this.scrollWidth; // 屏幕宽度
          let width = 0
          // 计算当前点击的标签项距离左侧的距离
          for (let i = 0; i < index; i++) {
            width += rect[i].width
          }
          // 当大于屏幕一半的宽度则滚动，否则就设置左侧位置为0
          if (width > windowWidth / 2) {
            this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
          } else {
            this.scrollLeft = 0
          }
        }).exec()
      },

    }
  }
</script>

<style scoped>
  .scrollBox .imagbx {
    width: 150rpx;
    height: 100%;
    margin-right: 10rpx;
    padding: 4rpx;
    box-sizing: border-box;
    background-color: #fff;
  }

  .scrollBox .imagbx image {
    height: 160rpx;
    width: 100%;
    margin-bottom: 44rpx;
  }

  .scrollBox .imagbx .nanum {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 40rpx;
    background: #fff;
  }

  .scroll {
    width: 100%;
    white-space: nowrap;
    height: 100%;
    background-color: #eee;
  }

  .scroll view {
    display: inline-block;
    font-size: 30upx;
    color: #000;
    position: relative;
  }

  .scroll view.active {
    background-color: #000000 !important;
    color: #fff !important;
  }
</style>