HIPS-UNI-UI

# IndexList 索引列表

# 使用指南

import IndexList from '@hips/uni-ui/lib/index-list';
import IndexAnchor from '@hips/uni-ui/lib/index-anchor';

export default {
  components: {
    'hips-index-list': IndexList,
    'hips-index-anchor': IndexAnchor,
  },
};
1
2
3
4
5
6
7
8
9

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-index-list :indexes="indexes" :scroll-top="scrollTop">
  <view v-for="(list, index) in data" :key="index">
    <hips-index-anchor :index="list.index" />
    <hips-cell
      v-for="(item, idx) in list.list"
      :key="idx"
      :title="item.title"
      :value="item.value"
    />
  </view>
</hips-index-list>
1
2
3
4
5
6
7
8
9
10
11
export default {
  data() {
    return {
      data: [],
      indexes: [],
      scrollTop: 0,
    };
  },
  created() {
    const charCodeOfA = 'A'.charCodeAt(0);

    for (let i = 0; i < 26; i++) {
      let index = String.fromCharCode(charCodeOfA + i);
      let tmp = {
        index,
        list: [],
      };
      this.indexes.push(index);
      for (let j = 0; j <= MAX; j++) {
        tmp.list.push({
          title: 'title',
          value: `value ${index}-${j}`,
        });
      }
      this.data.push(tmp);
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
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

# 修改颜色

<hips-index-list
  :indexes="indexes"
  :scroll-top="scrollTop"
  active-color="red"
  inactive-color="white"
  anchor-active-color="white"
  anchor-inactive-color="gray"
>
  <view v-for="(list, index) in data" :key="index">
    <hips-index-anchor :index="list.index" />
    <hips-cell
      v-for="(item, idx) in list.list"
      :key="idx"
      :title="item.title"
      :value="item.value"
    />
  </view>
</hips-index-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 滑动不吸附

<hips-index-list :indexes="indexes" :scroll-top="scrollTop" :sticky="false">
  <view v-for="(list, index) in data" :key="index">
    <hips-index-anchor :index="list.index" />
    <hips-cell
      v-for="(item, idx) in list.list"
      :key="idx"
      :title="item.title"
      :value="item.value"
    />
  </view>
</hips-index-list>
1
2
3
4
5
6
7
8
9
10
11

# 设定吸附顶部的距离

<hips-index-list :indexes="indexes" :scroll-top="scrollTop" :offset-top="50">
  <view v-for="(list, index) in data" :key="index">
    <hips-index-anchor :index="list.index" />
    <hips-cell
      v-for="(item, idx) in list.list"
      :key="idx"
      :title="item.title"
      :value="item.value"
    />
  </view>
</hips-index-list>
1
2
3
4
5
6
7
8
9
10
11

# APIs

# IndexList

参数 说明 类型 可选值 默认值
sticky 是否吸附 Boolean - true
scroll-top 滚动距离 Number - 0
offset-top 吸附距离顶部距离 Number - 0
indexes 索引值数组 Array - []
active-color 吸附状态下锚及右侧文字颜色 String - #1F8CEB
inactive-color 不吸附状态下锚及右侧文字颜色 String - black
anchor-active-color 吸附状态下锚背景颜色 String - white
anchor-inactive-color 不吸附状态下锚背景颜色 String - #eeeeee

注意

  • scroll-top 数据获取
  1. 监听 onPageScroll 事件，即页面滑动事件获取






 
 
 


export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
1
2
3
4
5
6
7
8
9
10
  1. 监听 scroll-view 滑动事件
<scroll-view @scroll="scroll"> </scroll-view>
1
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  methods: {
    scroll(e) {
      this.scrollTop = e.scrollTop;
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

# IndexAnchor

参数 说明 类型 可选值 默认值
index 当前序列值 String - -

# 样式变量

变量名 说明 默认值
index-list-side-bar-item-font-size 侧边栏单元文字大小 20rpx
index-list-side-bar-item-padding 侧边栏单元 padding 2rpx 8rpx 2rpx 20rpx
index-list-side-bar-item-font-weight 侧边栏单元 font weight 500
index-list-side-bar-item-color 侧边栏单元文字颜色 #4A4A4A
index-list-anchor-font-size 锚文字大小 28rpx
index-list-anchor-bg-color 锚背景颜色 white
index-list-anchor-height 锚高度 56rpx

注意

Overlay 遮罩层