【uniapp】小程序滚动tab

1
<template>
2
  <view class="content">
3
    <view class="scrollBox">
4
      <scroll-view class="scroll" scroll-x='true' scroll-with-animation :scroll-left='scrollLeft'>
5
        <view class="tabBox" v-for="(item,index) in tabsList" :key="index"
6
          :class="[{ active: currentIndex === index }, 'scroll-item']" @click="changeTab(index)">
7
          <view class="nanum" :class="currentIndex === index?'active':''">
8
            {{index+1}}
9
          </view>
10
        </view>
11
      </scroll-view>
12
    </view>
13
  </view>
14
</template>
15

16
<script>
17
  export default {
18
    data() {
19
      return {
20
        scrollWidth: 0,
21
        tabsList: [{
22
            id: 1,
23
            name: 'tab1',
24
          },
25
          {
26
            id: 2,
27
            name: 'tab2',
28
          },
29
          {
30
            id: 3,
31
            name: 'tab3',
32
          },
33
          {
34
            id: 4,
35
            name: 'tab4',
36
          },
37
          {
38
            id: 5,
39
            name: 'tab5',
40
          },
41
          {
42
            id: 6,
43
            name: 'tab6',
44
          },
45
          {
46
            id: 7,
47
            name: 'tab7',
48
          },
49
          {
50
            id: 8,
51
            name: 'tab8',
52
          },
53
          {
54
            id: 9,
55
            name: 'tab9',
56
          }
57
        ],
58
        currentIndex: 0,
59
        scrollLeft: 0,
60
      }
61
    },
62
    onLoad() {
63
      // 获取元素宽度
64
      const query = uni.createSelectorQuery().select('.scroll');
65
      query.boundingClientRect(res => {
66
        this.scrollWidth = res.width;
67
      }).exec()
68
    },
69

70
    methods: {
71
      // 切换Tab
72
      changeTab(index) {
73
        console.log(index, "文字tab");
74
        this.currentIndex = index;
75
        this.moveTo(index)
76
      },
77
      // 当前点击的元素移动到屏幕中间
78
      moveTo(index) {
79
        const query = uni.createSelectorQuery().in(this)
80
        query.selectAll('.scroll-item').boundingClientRect(rect => {
81
          const windowWidth = this.scrollWidth; // 获取到的屏幕宽度
82
          let width = 0
83
          // 计算当前点击的标签项距离左侧的距离
84
          for (let i = 0; i < index; i++) {
85
            width += rect[i].width
86
          }
87
          // 当大于屏幕一半的宽度则滚动，否则就设置左侧位置为0
88
          if (width > windowWidth / 2) {
89
            this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
90
          } else {
91
            this.scrollLeft = 0
92
          }
93
        }).exec()
94
      },
95

96
    }
97
  }
98
</script>
99

100
<style scoped>
101
  .scrollBox .tabBox {
102
    width: 150rpx;
103
    height: 100%;
104
    margin-right: 10rpx;
105
    padding: 4rpx;
106
    box-sizing: border-box;
107
    background-color: #fff;
108
    margin-top: 40rpx;
109
  }
110

111
  .scrollBox .tabBox .nanum {
112
    width: 100%;
113
    text-align: center;
114
    font-size: 24rpx;
115
    position: absolute;
116
    bottom: 0;
117
    left: 0;
118
    height: 60rpx;
119
    line-height: 60rpx;
120
    background: #fff;
121
  }
122

123
  .scroll {
124
    width: 100%;
125
    white-space: nowrap;
126
    height: 100%;
127
    background-color: #eee;
128
  }
129

130
  .scroll view {
131
    display: inline-block;
132
    font-size: 30rpx;
133
    color: #000;
134
    position: relative;
135
  }
136

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

1
<template>
2
  <view class="content">
3
    <view class="scrollBox">
4
      <scroll-view class="scroll" scroll-x='true' scroll-with-animation :scroll-left='scrollLeft'>
5
        <view class="imagbx" v-for="(item,index) in tabsList" :key="index"
6
          :class="[{ active: currentIndex === index }, 'scroll-item']" @click="changeTab(index)">
7
          <image :src="item.img" mode="widthFix"></image>
8
          <view class="nanum" :class="currentIndex === index?'active':''">
9
            {{index+1}}
10
          </view>
11
        </view>
12
      </scroll-view>
13
    </view>
14
  </view>
15
</template>
16

17
<script>
18
  export default {
19
    data() {
20
      return {
21
        scrollWidth: 0,
22
        tabsList: [{
23
            id: 1,
24
            name: 'img1',
25
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
26
          },
27
          {
28
            id: 2,
29
            name: 'img2',
30
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
31
          },
32
          {
33
            id: 3,
34
            name: 'img3',
35
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
36
          },
37
          {
38
            id: 4,
39
            name: 'img4',
40
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
41
          },
42
          {
43
            id: 5,
44
            name: 'img5',
45
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
46
          },
47
          {
48
            id: 6,
49
            name: 'img6',
50
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
51
          },
52
          {
53
            id: 7,
54
            name: 'img7',
55
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
56
          },
57
          {
58
            id: 8,
59
            name: 'img8',
60
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
61
          },
62
          {
63
            id: 9,
64
            name: 'img9',
65
            img: 'https://img.pconline.com.cn/images/product/1144409/201812/10/15444358345118610_800.png'
66
          }
67
        ],
68
        currentIndex: 0,
69
        scrollLeft: 0,
70
      }
71
    },
72
    onLoad() {
73
      // 获取元素宽度
74
      const query = uni.createSelectorQuery().select('.scroll');
75
      query.boundingClientRect(res => {
76
        this.scrollWidth = res.width;
77
      }).exec()
78
    },
79

80
    methods: {
81
      // 点击切换Tab
82
      changeTab(index) {
83
        console.log(index, "图片tab");
84
        this.currentIndex = index;
85
        this.moveTo(index)
86
      },
87
      // 点击元素移动到中间
88
      moveTo(index) {
89
        const query = uni.createSelectorQuery().in(this)
90
        query.selectAll(`.scroll-item`).boundingClientRect(rect => {
91
          const windowWidth = this.scrollWidth; // 屏幕宽度
92
          let width = 0
93
          // 计算当前点击的标签项距离左侧的距离
94
          for (let i = 0; i < index; i++) {
95
            width += rect[i].width
96
          }
97
          // 当大于屏幕一半的宽度则滚动，否则就设置左侧位置为0
98
          if (width > windowWidth / 2) {
99
            this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
100
          } else {
101
            this.scrollLeft = 0
102
          }
103
        }).exec()
104
      },
105

106
    }
107
  }
108
</script>
109

110
<style scoped>
111
  .scrollBox .imagbx {
112
    width: 150rpx;
113
    height: 100%;
114
    margin-right: 10rpx;
115
    padding: 4rpx;
116
    box-sizing: border-box;
117
    background-color: #fff;
118
  }
119

120
  .scrollBox .imagbx image {
121
    height: 160rpx;
122
    width: 100%;
123
    margin-bottom: 44rpx;
124
  }
125

126
  .scrollBox .imagbx .nanum {
127
    width: 100%;
128
    text-align: center;
129
    font-size: 24rpx;
130
    position: absolute;
131
    bottom: 0;
132
    left: 0;
133
    height: 40rpx;
134
    background: #fff;
135
  }
136

137
  .scroll {
138
    width: 100%;
139
    white-space: nowrap;
140
    height: 100%;
141
    background-color: #eee;
142
  }
143

144
  .scroll view {
145
    display: inline-block;
146
    font-size: 30upx;
147
    color: #000;
148
    position: relative;
149
  }
150

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