一、效果图
image.png
二、代码
wxml:
<view class="page">
<view class="content">
<!-- 左侧内容区 -->
<scroll-view class="person-list" enable-back-to-top style="height: {{oHeight}}px" scroll-into-view="{{toView}}" scroll-y="true" scroll-top="{{sctop}}" scroll-with-animation="true">
<view class="person" wx:for="{{personList}}" wx:key="index" id="{{ 'inToView'+item.id}}">
<view class="person-sign">{{item.sign}}</view>
<view class="person-content">
<view class="person-cont {{item.name.length > 1 ? 'border' : ''}}" bindtap="choose" data-item="{{it}}" wx:for="{{item.name}}" wx:key="id" wx:for-item="it">
<!-- <image class="person-head" src="{{it.head_img ? it.head_img : default_img}}"></image> -->
<text class="person-name">{{it.name}}</text>
</view>
</view>
</view>
</scroll-view>
<!-- 左侧字母栏 -->
<scroll-view class="letter-list">
<view class="letter" wx:for="{{personList}}" wx:key="index" catchtap="chooseLetter" data-item="{{item}}">{{item.sign}}</view>
</scroll-view>
</view>
</view>
js：
var pinyin = require("../../utils/pinyin.js")
Page({
data: {
list: [
{ name: "a阿拉善盟" },
{ name: "白山" },
{ name: "保定" },
{ name: "保安" }, { name: "保护" }, { name: "朝阳" }, { name: "晨光" }, { name: "城管" }, { name: "东光" }, { name: "导师" }, { name: "导员" }, { name: "鄂州" }, { name: "额贼" }, { name: "儿科" }, { name: "二哈" }, { name: "丰台" }, { name: "方言" }, { name: "房子" }, { name: "广州" }, { name: "广西" }, { name: "滚蛋" }, { name: "海-南" }, { name: "哈哈" }, { name: "哈士奇" }, { name: "河北" }, { name: "江苏" }, { name: "唧-唧" }, { name: "济南" }, { name: "矿-山" }, { name: "困难" }, { name: "抠门" }, { name: "兰花" }, { name: "篮子" }, { name: "芒果" }, { name: "妈的" },
{ name: "mongo" }, { name: "牛奶" }, { name: "南京" }, { name: "欧豪" }, { name: "派南" }, { name: "帕萨特" }, { name: "奇步" }, { name: "全部" }, { name: "人类" }, { name: "然而" }, { name: "孙尚香" }, { name: "送礼" }, { name: "通州" }, { name: "特别" }, { name: "unix" }, { name: "vv" }, { name: "外滩" }, { name: "网吧" },
{ name: "西西里" }, { name: "熊大" }, { name: "云南" }, { name: "有道" }, { name: "周公" }, { name: "这里" },
{ name: "apple" }, { name: "apply" }, { name: "back" }, { name: "cookie" }, { name: "dom" }, { name: "document" }, { name: "element" }, { name: "fuck" }, { name: "good" }, { name: "hello" }, { name: "hi" }, { name: "job" },
{ name: "just" }, { name: "keep" }, { name: "loop" }, { name: "look" }, { name: "moon" }, { name: "monkey" }, { name: "node" }, { name: "nice" }, { name: "opera" }, { name: "past" }, { name: "pass" }, { name: "question" }, { name: "red" },
{ name: "store" }, { name: "token" }, { name: "uni-app" }, { name: "version" }, { name: "work" }, { name: "x-ray" }, { name: "yellow" }, { name: "zoom" }, { name: "i拼音" }
, { name: "123" },{name:"a苹果"},{name:"appla"}
],
personList:[],
oHeight:'',
sctop:'',
},
onLoad: function () {
// 获取设备高度
wx.getSystemInfo({
success: (res) => {
this.setData({
oHeight: res.windowHeight
})
}
})
this.list()
},
// 数据处理函数
list(){
let personList = this.data.personList
console.log("personList",personList)
let i = 0
/**
* 1、调用外部js的方法ChineseToPinYin对数据进行分组
* 2、分组的结果存在排序有误的情况,例如I组,V组等没有汉字的分组
*/
this.data.list.forEach((item, index) => {
let bool = personList.some(ite => {
return ite.sign == pinyin.ChineseToPinYin(item.name).substr(0, 1)
})
if (personList.length == 0 || !bool) {
personList.push({
id: i,
sign: pinyin.ChineseToPinYin(item.name).substr(0, 1),
name: [item]
})
i++
} else if (bool) {
let a = pinyin.ChineseToPinYin(item.name).substr(0, 1)
for (let s in personList) {
if (a == personList[s].sign) {
personList[s].name.push(item)
}
}
}
})
this.setData({
personList,
})
console.log("personList1",personList)
/**
* 3、对分组好的数据进行排序
* 4、根据标志sign的ASCII码进行初次排序筛选
* 5、如果标志sign不在A到Z之间,则添加到#分组中
*/
this.data.personList.forEach((item, index) => {
if ((item.sign.charCodeAt() < 65 || item.sign.charCodeAt() > 90) && item.sign.charCodeAt() != 35) {
this.data.personList.splice(index, 1, "")
// 注:此处为防止splice分割后,数组索引index发生变化,故将需要剔除的元素替换为“”,后再将其剔除
let i = this.data.personList.findIndex(item => {
return item.sign == '#'
})
if (i != -1) {
item.name.forEach(it => {
this.data.personList[i].name.push(it)
})
} else {
this.data.personList.push({
id: 99,
sign: '#',
name: item.name
})
}
}
})
// 利用filter方法,剔除之前存在的空元素
personList = this.data.personList.filter(function (s) {
return s != ''; // 注：IE9(不包含IE9)以下的版本没有trim()方法
});
this.setData({
personList
})
// 利用sort方法进行排序
this.data.personList.sort(this.listSort('sign'))
// 一般情况下#分组在最下面,在此做以处理
if (this.data.personList[0].sign == '#') {
this.data.personList.splice(0, 1).forEach(item => {
this.data.personList.push(item)
})
}
this.setData({
personList
})
// console.log(personList)
},
// 排序
listSort(prop) {
return function (a, b) {
var value1 = a[prop].charCodeAt();
var value2 = b[prop].charCodeAt();
return value1 - value2
}
},
// 点击列表中的人员
choose(e){
console.log(e.currentTarget.dataset.item)
let name = e.currentTarget.dataset.item.name
wx.showToast({
title: name,
icon: 'none'
})
},
/**
* 点击右侧字母
* 这里使用的是scroll-view中的自身方法,在scroll-view中添加以下属性
* 1、enable-back-to-top,点击标题回弹
* 2、scroll-into-view="{{toView}}",滚动到id为toView的位置,动态设置该id即起到切换的左右
* 3、scroll-y="true",y轴方向滚动
* 4、scroll-with-animation="true",滚动动画
* 注:在使用scroll-view时:必须给当前盒子设置固定的高度,否则无法生效
*/
chooseLetter(e){
let currentItem = e.currentTarget.dataset.item;
console.log(currentItem);
this.data.personList.forEach(item => {
if (item.sign == currentItem.sign) {
this.setData({
toView: 'inToView' + currentItem.id //滚动条to指定view
})
}
})
},
// 点击回到顶部
clickHot: function(e){
this.setData({
sctop: 0
})
}
})
wxss:
.page .content .person-list .person {
margin-bottom: 18rpx;
background: #fff;
/* display: flex; */
}
.page .content .person-list .person .person-sign {
/* width: 80rpx; */
width: 100%;
/* text-align: center; */
/* margin-top: 46rpx; */
font-size: 32rpx;
font-family: Arial;
color: #313133;
padding: 20rpx 30rpx;
background: #f2f2f2;
}
.page .content .person-list .person .person-content {
width: calc(100% - 80rpx);
padding: 0 30rpx;
}
.page .content .person-list .person .person-content .person-cont {
display: flex;
align-items: center;
padding: 20rpx 0;
}
.page .content .person-list .person .person-content .person-cont .person-head {
width: 80rpx;
height: 80rpx;
background: #f7f7f7;
border-radius: 50%;
margin-right: 40rpx;
}
.page .content .person-list .person .person-content .person-cont .person-name {
font-size: 32rpx;
color: #313133;
}
.page .content .person-list .person .person-content .border {
border-bottom: 1rpx solid #f7f7f7;
}
.page .content .letter-list {
position: fixed;
/* top: 80rpx; */
top:6%;
right: 0;
z-index: 999;
width: 90rpx;
font-family: Arial;
font-size: 26rpx;
text-align: center;
}
.page .content .letter-list .letter {
/* margin-bottom: 10rpx;
padding: 10rpx 20rpx; */
margin-bottom: 0rpx;
padding: 0rpx 20rpx;
}
/* 热门城市 */
.hotList-tit{
width: 100%;
padding: 20rpx 30rpx;
background: #f2f2f2;
}
.hotList-cont{
padding: 10rpx 30rpx;
}
.hotList-cont view{
display: inline-block;
padding: 10rpx;
text-align: center;
font-size: 32rpx;
border:1px solid #f3f3f3;
margin-left: 5px;
}
下载 pinyin.js
网友评论