基本使用
外层包裹一个 index-list 组件,内部锚点通过 index-anchor 组件传入,其余内容可以自定义
可以通过 index-list 参数自定义索引字符列表
需要监听页面的 onPageScroll 事件,将当前滚动条高度传入 index-list 组件
index.list.js下载地址
完整项目代码
<template>
<view class="message">
<view class="cityList">
<u-index-list :scrollTop="scrollTop" :index-list="indexList" active-color="#31C6A6">
<view class="box">
<view class="title">当前城市</view>
<view class="city">
<view class="item add">
<text class="u-line-1">郑州</text>
</view>
</view>
</view>
<view class="box">
<view class="title">常用城市</view>
<view class="city">
<view class="item u-line-1">北京</view>
<view class="item u-line-1">深圳</view>
<view class="item u-line-1">上海</view>
<view class="item u-line-1">广州</view>
<view class="item u-line-1">重庆</view>
<view class="item u-line-1">成都</view>
<view class="item u-line-1">杭州</view>
<view class="item u-line-1">郑州</view>
<view class="item u-line-1">武汉</view>
<view class="item u-line-1">南京</view>
<view class="item u-line-1">西安</view>
</view>
</view>
<view v-for="(item, index) in list" :key="index">
<u-index-anchor :index="item.letter" />
<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index">
{{item1.name}}
</view>
</view>
</u-index-list>
</view>
</view>
</template>
<script>
import indexList from "./index.list.js";
const letterArr = indexList.list.map(val => {
return val.letter;
})
export default {
components: {},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
data() {
return {
scrollTop: 0,
indexList: letterArr,
list: indexList.list,
}
},
}
</script>
<style>
page {
background: #f9f9f9;
}
</style>
<style scoped lang="scss">
.message {
.cityList {
.box {
margin: 40rpx 0 30rpx 30rpx;
.title {
font-size: 26rpx;
color: #A6ABB7;
}
.city {
display: flex;
flex-wrap: wrap;
.item {
margin-top: 24rpx;
margin-right: 18rpx;
text-align: center;
width: 210rpx;
height: 80rpx;
line-height: 80rpx;
background: #FFFFFF;
border-radius: 8rpx;
border: 1rpx solid #E5E5E5;
font-size: 30rpx;
padding: 0 10rpx;
}
.add {
display: flex;
align-items: center;
justify-content: center;
uni-image {
margin-right: 8rpx;
width: 28rpx;
height: 28rpx;
}
uni-text {
max-width: 145rpx;
}
}
}
}
.list-cell {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px 24rpx;
overflow: hidden;
color: #323233;
font-size: 14px;
line-height: 24px;
background-color: #fff;
}
.anchor-text {
color: red;
}
}
}
</style>
效果图