ylrz_scrm_company_h5/pages/user/users/users.vue

<template>
	<view>
		<view class="top">
			<u-search placeholder="输入姓名搜索" v-model="searchContent" @custom="search()" @search="search()"></u-search>
		</view>
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh -  88rpx)'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true">
			<view v-for="(item,index) in list" :key="index">
				<view :class="'indexItem-' + item.firstLetter" :id="'indexes-' + item.firstLetter" :data-index="item.firstLetter">
					<view class="zm">{{item.firstLetter}}</view>
					<view class="user-list">
						<view class="user-item" v-for="(subitem) in item.list" @click="navTo(subitem)" >
							<view class="avatar" >
								<image class="img" :src="subitem.avatar?(baseUrl+subitem.avatar):avatar" mode="aspectFill"></image>
							</view> 
							<view class="content">
								<view class="name">
									{{subitem.nickName}}
								</view>
								<view class="dept">
									{{subitem.deptName}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="indexBar" :style="[{height:'calc(100vh - 88rpx)'}]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.firstLetter}}</view>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{listCur}}
		</view>
	</view>
</template>

<script>
	import {getAllUsers} from '@/api/user.js';
	export default {
		data() {
			return {
				baseUrl:uni.getStorageSync('requestPath'),
				avatar:"/static/images/default.png",
				CustomBar: 0,
				hidden: true,
				listCurID: '',
				list: [],
				listCur: '',
				searchContent:"",
			}
		},
		onLoad() {
			this.getUser();
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		methods: {
			getUser(){
				var data = {searchKey:this.searchContent};
				var that=this;
				getAllUsers(data).then(
					res => {
						if(res.code==200){
							 that.list=res.users;
						}
					},
					rej => {}
				);
			},
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].firstLetter;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					console.log(num);
					if(num<that.list.length){
						this.listCur = that.list[num].firstLetter
					}
				};
			},
			
			//触发全部开始选择
			tStart() {
				this.hidden = false
			},
			
			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].firstLetter;
						that.movableY = i * 20
						return false
					}
				}
			},
			navTo(subitem){
				uni.navigateTo({
					url: './userInfo?userId='+subitem.userId
				})
			},
			search(){
				this.getUser()
			}
			
		}
	}
</script>
<style  >
	 
	page {
		 
	}
	.top{
		height: 88rpx;
		background-color: #fff;
		padding: 0rpx 15rpx;
	}
	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
	.zm{
		height:50rpx;
		padding: 0rpx 20rpx;
	}
	.user-list{
		
		background-color: #fff;
		 
	}
	.user-item{
		padding: 15rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 1px solid #f7f7f7;
	}
	.user-item .avatar{
		width: 100upx;
		height: 100upx;
	}
	.user-item .avatar .img{
		border-radius: 50%;
		width: 100%;
		height: 100%;
	}
	.user-item .content{
		margin-left: 15rpx;
	}
	.user-item .content .name{
		font-size: 26rpx;
		color: #111;
	}
	.user-item .content .dept{
		font-size: 24rpx;
		color: #888;
		margin-top: 15rpx;
		
	}
</style>