<template>
<view class="outer">
<view class="search">
<view>
<input type="text" placeholder="请输入搜索内容" v-model="search_text" @input="search_change" />
</view>
</view>
<view class="list">
<view class="con" v-for="item,index in search_list">
<view :class="['title', 'pinyin_' + item.letter]">{{item.letter}}</view>
<view class="value" v-for="item1,index1 in item.list" @click="select(item1)">{{item1[value]}}</view>
</view>
<view class="position_right">
<view v-for="item in search_list" @touchstart="right_cut(item)">
<text>{{item.letter}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import {
ConvertPinyin
} from '../../common/hanzi-to-pinyin.js'
// https://blog.csdn.net/xcl522/article/details/41896297
// js内容参考这个博客 我是用的他的js部分,相似度太高发不出来。
export default {
navigate: ['navigateTo'],
data() {
return {
value: 'genreName',
list: [],
search_list: [],
search_text: '',
}
},
methods: {
search_change() { //搜索方法
if (this.search_text == "" || this.search_text == undefined) {
this.search_list = this.list;
return;
}
let list = [];
this.list.map(item => {
let z_list = [];
item.list.map(item1 => {
if (item1[this.value].indexOf(this.search_text) != -1) {
z_list.push(item1);
}
})
if (z_list.length) {
list.push({
letter: item.letter,
list: z_list,
})
}
})
this.search_list = list;
},
bindClick(e) {
console.log(e);
},
right_cut(e) { // 点击右侧按钮页面滚动到相应位置
console.log(e.letter);
uni.createSelectorQuery().select(".pinyin_" + e.letter).boundingClientRect(data => { //目标节点
uni.createSelectorQuery().select(".outer").boundingClientRect((res) => { //最外层盒子节点
console.log(res.top);
console.log(data);
uni.pageScrollTo({
scrollTop: data.top - res.top - 50, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
})
}).exec()
}).exec();
},
init(params) { //初始化操作
let suffix = '_pinyin'
params.arr.map((item) => { //将文字转换成拼音并放到另一个属性下
let value = item[this.value];
item[this.value + suffix] = ConvertPinyin(value);
})
params.arr = params.arr.sort((a, b) => { // 根据拼音首字母进行排序
return a[this.value + suffix].charCodeAt(0) - b[this.value + suffix].charCodeAt(0);
})
this.list = [];
params.arr.map((item, index) => { // 转换成列表展示所需的格式
let first = item[this.value + suffix][0];
if (!this.list.length || (this.list.length && (this.list[this.list.length - 1].letter !=
first))) {
this.list.push({
letter: first,
list: [],
})
}
this.list[this.list.length - 1].list.push(item);
})
this.search_list = this.list; //这里单独赋值给另一个对象 搜索时使用
// console.log(params.arr);
},
select(item) { // 选中时返回上一个页面并传参
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //上一个页面
prevPage.$vm.***(item); //调用上一个页面的方法
uni.navigateBack({ //返回
delta: 1
})
}
},
onLoad(params) {
params = JSON.parse(params.params);
params.arr = this.$store.state.***; //这里接收了一个store里面的内容 因为我发现在转JSON的时候加号符号消失了。
this.value = params.value; // 要展示字段的字段名
this.init(params);
}
}
</script>
<style lang="less" scoped>
.outer {
padding-top: 50px;
// height: 100vh;
overflow: auto;
display: flex;
flex-direction: column;
.search {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
padding: 10px 10px;
background-color: #fff;
box-sizing: border-box;
z-index: 10px;
input {
width: 100%;
height: 100%;
line-height: 30px;
}
>view {
border-radius: 30px;
background-color: #eee;
padding: 0 10px;
height: 100%;
box-sizing: border-box;
}
}
.list {
flex: 1;
// position: relative;
.position_right {
z-index: 10;
position: fixed;
top: 50px;
right: 0;
bottom: 0;
margin: auto;
background-color: #fff;
color: #ccc;
line-height: 20px;
border: 10px 0 0 10px;
min-height: 10px;
width: 1.5em;
display: flex;
flex-direction: column;
text-align: center;
view {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #eee;
text {
flex: 1;
}
}
view:last-child {
border: none;
}
}
.con {
background-color: #fff;
.title {
background-color: #eee;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
padding: 0 10px;
line-height: 30px;
}
.title:first-child {
border-top: none;
}
.value {
line-height: 40px;
border-bottom: 1px solid #eee;
padding: 0 10px;
margin-left: 10px;
font-size: 14px;
}
>.value:last-child {
border: none;
}
}
}
}
</style>
参考文章
链接:https://blog.csdn.net/xcl522/article/details/41896297
博主:xcl522