小程序?qū)崿F(xiàn)帶索引的城市列表
更新時(shí)間：2022年07月17日 15:18:51 作者：Song_Tutu
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)帶索引的城市列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)帶索引的城市列表的具體代碼，供大家參考，具體內(nèi)容如下
效果
網(wǎng)上找的很多的效果右邊的索引不會(huì)按左邊滑動(dòng)區(qū)域高亮處理所以自己寫(xiě)了個(gè)
代碼實(shí)現(xiàn)
因?yàn)槲业某鞘袛?shù)據(jù)沒(méi)有而項(xiàng)目里先有的是省市區(qū)代碼數(shù)據(jù)所以要先處理一下數(shù)據(jù)
用來(lái)獲取首字母：
//用來(lái)獲取首字母
import py from '../../utils/strChineseFirstPY'
checkCh(ch) {
? ? ? let uni = ch.charCodeAt(0);
? ? ? //如果不在漢字處理范圍之內(nèi),返回原字符,也可以調(diào)用自己的處理函數(shù)
? ? ? if (uni > 40869 || uni < 19968) {
? ? ? ? return ch;
? ? ? } //dealWithOthers(ch);
? ? ? //檢查是否是多音字,是按多音字處理,不是就直接在strChineseFirstPY字符串中找對(duì)應(yīng)的首字母
? ? ? return (py.oMultiDiff[uni] ? py.oMultiDiff[uni] : (py.strChineseFirstPY.charAt(uni - 19968)));
? ? }利用首字母講城市數(shù)據(jù)整理：
//用來(lái)獲取首字母
/**
? ? ?* @name:?
? ? ?* @test: test font
? ? ?* @msg:?
? ? ?* @param {*} data 數(shù)組
? ? ?* @param {*} field 依據(jù)那個(gè)字段排序
? ? ?* @return {*}
? ? ?*/
? ? data_letter_sort (data, field) {
? ? ? let list = new Array();
? ? ? let letter = ''
? ? ? for (let i = 0; i < data.length; i++) {
? ? ? ? // 首字母 轉(zhuǎn) 大寫(xiě)英文
? ? ? ? letter = (data[i][field]).substr(0, 1).toUpperCase();
? ? ? ? // 創(chuàng)建 字母 分組
? ? ? ? if (!(letter in list)) {
? ? ? ? ? list[letter] = new Array();
? ? ? ? }
? ? ? ? // 字母 分組 添加 數(shù)據(jù)
? ? ? ? list[letter].push(data[i]);
? ? ? }
? ? ? ?// 轉(zhuǎn)換 格式 進(jìn)行 排序；
? ? ? let resault = new Array();
? ? ? for (let key in list) {
? ? ? ? resault.push({
? ? ? ? ? letter: key,
? ? ? ? ? list: list[key]
? ? ? ? });
? ? ? }
? ? ? resault.sort(function (x, y) {
? ? ? ? return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
? ? ? });
? ? ? // 轉(zhuǎn)換 數(shù)據(jù) 格式
? ? ? let json_sort = {}
? ? ? for (let i = 0; i < resault.length; i++) {
? ? ? ? json_sort[resault[i].letter] = resault[i].list;
? ? ? }
? ? ? return json_sort;
? ? },處理過(guò)后的數(shù)據(jù)為按首字母排序的一個(gè)對(duì)象
然后難點(diǎn)就在右邊的索引怎么按照左邊的區(qū)域來(lái)進(jìn)行高亮顯示
首先我想的是獲取每個(gè)字母距離上邊的高度然后頁(yè)面滑動(dòng)時(shí)進(jìn)行高度判斷
//獲取城市數(shù)據(jù)的首字母列表
for (let key in this.cityList) {
? ? ? let obj = {
? ? ? ? py: key,
? ? ? ? active: false
? ? ? }
? ? ? if (obj.py == 'A') {
? ? ? ? obj.active = true
? ? ? }
? ? ? wx.createSelectorQuery().select('#'+ key).boundingClientRect(function(rect){
? ? ? ? obj.top = rect.top ? ? // 節(jié)點(diǎn)的上邊界坐標(biāo)
? ? ? }).exec()
? ? ? //pylist是用來(lái)渲染右邊索引列表的
? ? ? this.pyList.push(obj);
? ? }//滑動(dòng)時(shí)間
scroll(e) {
? ? ? let scrollTop = e.target.scrollTop
? ? ? this.pyList.map(item => {
? ? ? ? if ((scrollTop - item.top)>-76) {
? ? ? ? ? this.pyList.map(item => {
? ? ? ? ? //active是用來(lái)是否高亮顯示
? ? ? ? ? ? item.active = false
? ? ? ? ? })
? ? ? ? ? item.active = true
? ? ? ? ? return
? ? ? ? }
? ? ? })
? ? },整體代碼
<!--
?* @Descripttion:?
?* @version:?
?* @Author: Songtutu
?* @Date: 2021-04-06 10:30:36
?* @LastEditors: Songtutu
?* @LastEditTime: 2021-04-08 13:40:32
-->
<template>
? <div class="main">
? ? <div class="search">
? ? ? ? <div class="search-box">
? ? ? ? ? <img :src="imglist.map_search"/>
? ? ? ? ? <input placeholder="請(qǐng)輸入城市名稱" @focus="focus" :focus="true" v-model="search" type="digit" -splaceholdertyle="font-size:14px;color: rgba(0, 0, 0, 0.3);" confirm-type="search" @confirm='doSearch'/>
? ? ? ? </div>
? ? ? </div>
? ? <!-- 城市列表 -->
? ? <scroll-view scroll-y="true" scroll-with-animation="true" enable-back-to-top="true" class="city-list" @scroll="scroll" :scroll-top="scrollTop" v-show="searchList.length == 0">
? ? ??
? ? ? <div class="dw-box">
? ? ? ? <div>定位城市：{{city}}</div>
? ? ? ? <img :src="imglist.map_sx" @click="sx()"/>
? ? ? </div>
? ? ? <div :id='key' class="city-group" v-for="(value, key, index) in cityList" :key="index">
? ? ? ? <div ?class="city-group-title">{{key}}</div>
? ? ? ? <div class="city-item" :id="i == value.length -1?key:''" v-for="(item, i) in value" :key="i">
? ? ? ? ? {{item.cityName}}
? ? ? ? </div>
? ? ? </div>
? ? </scroll-view>
? ? <div class="search-list" v-show="searchList.length != 0">
? ? ? <div class="city-item" v-for="(item, i) in searchList" :key="i">
? ? ? ? {{item.cityName}}
? ? ? </div>
? ? </div>
? ? <div class="py-box" v-show="searchList.length == 0">
? ? ? <div class="py-item" :class="item.active?'active':''" v-for="(item, index) in pyList" :key="index" @click="clickPy(item, index)">{{item.py}}</div>
? ? </div>
? </div>
</template>
<script>
import py from '../../utils/strChineseFirstPY'
import area from '../../utils/area1'
export default {
? data() {
? ? return {
? ? ? cityList: [],
? ? ? imglist: [],
? ? ? search:'',
? ? ? city: '',
? ? ? pyList: [],
? ? ? scrollTop: 0,
? ? ? searchList: []
? ? }
? },
? created() {
? ? let title = "選擇城市"
? ? let frontColor = "#000000"
? ? let backgroundColor = "#ffffff"
? ? wx.setNavigationBarTitle({
? ? ? title
? ? })
? ? wx.setNavigationBarColor({
? ? ? frontColor, //前景顏色值，包括按鈕、標(biāo)題、狀態(tài)欄的顏色，僅支持 #ffffff 和 #000000,
? ? ? backgroundColor
? ? });
? ? const imgurl = "圖片根目錄"
? ? this.imglist = {
? ? ? map_search: `${imgurl}map_search.png`,
? ? ? map_sx: `${imgurl}map_sx.png`
? ? }
? ? area.region.map(item => {
? ? ? item.mallCityList.map(i => {
? ? ? ? this.cityList.push(i)
? ? ? })
? ? })
? ? this.cityList.map(item => {
? ? ? item.py = this.checkCh(item.cityName.charAt(0))
? ? })
? ? this.cityList = this.data_letter_sort(this.cityList, 'py')
? ? console.log(this.cityList)
? },
? mounted() {
? ? for (let key in this.cityList) {
? ? ? let obj = {
? ? ? ? py: key,
? ? ? ? active: false
? ? ? }
? ? ? if (obj.py == 'A') {
? ? ? ? obj.active = true
? ? ? }
? ? ? wx.createSelectorQuery().select('#'+ key).boundingClientRect(function(rect){
? ? ? ? obj.top = rect.top ? ? // 節(jié)點(diǎn)的上邊界坐標(biāo)
? ? ? }).exec()
? ? ? this.pyList.push(obj);
? ? }
? },
? methods: {
? ? focus() {
? ? ? if (!this.search) {
? ? ? ? this.searchList = []
? ? ? }
? ? },
? ? doSearch() {
? ? ? this.searchList = []
? ? ? for(let key in this.cityList) {
? ? ? ? this.cityList[key].map(item => {
? ? ? ? ? if (item.cityName.indexOf(this.search) != -1) {
? ? ? ? ? ? this.searchList.push(item)
? ? ? ? ? }
? ? ? ? })
? ? ? }
? ? },
? ? clickPy(item) {
? ? ? this.scrollTop = item.top - 44
? ? },
? ? scroll(e) {
? ? ? let scrollTop = e.target.scrollTop
? ? ? this.pyList.map(item => {
? ? ? ? if ((scrollTop - item.top)>-76) {
? ? ? ? ? this.pyList.map(item => {
? ? ? ? ? ? item.active = false
? ? ? ? ? })
? ? ? ? ? item.active = true
? ? ? ? ? return
? ? ? ? }
? ? ? })
? ? },
? ? sx() {
? ? ? this.getLocation()
? ? },
? ? /**
? ? ?* 定位授權(quán)
? ? ?*/
? ? getLocation() {
? ? ? const that = this;
? ? ? //調(diào)用自帶位置獲取
? ? ? wx.getSetting({
? ? ? ? success(res) {
? ? ? ? ? if (!res.authSetting["scope.userLocation"]) {
? ? ? ? ? ? wx.authorize({
? ? ? ? ? ? ? scope: "scope.userLocation",
? ? ? ? ? ? ? success() {
? ? ? ? ? ? ? ? that.localDetail();
? ? ? ? ? ? ? },
? ? ? ? ? ? ? fail() {
? ? ? ? ? ? ? ? wx.showModal({
? ? ? ? ? ? ? ? ? title: "提示",
? ? ? ? ? ? ? ? ? content: "獲取當(dāng)前位置需要授權(quán)哦~",
? ? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? if (res.confirm) {
? ? ? ? ? ? ? ? ? ? ? wx.openSetting({
? ? ? ? ? ? ? ? ? ? ? ? success: res => {
? ? ? ? ? ? ? ? ? ? ? ? ? if (res.authSetting["scope.userLocation"]) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.localDetail();
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? } else if (res.cancel) {
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? } else {
? ? ? ? ? ? that.localDetail();
? ? ? ? ? }
? ? ? ? }
? ? ? });
? ? },
? ? localDetail() {
? ? ? wx.getLocation({
? ? ? ? type: "gcj02", //返回可以用于wx.openLocation的經(jīng)緯度
? ? ? ? success: function(res) {
? ? ? ? ? console.log(res)
? ? ? ? }
? ? ? });
? ? },
? ? /**
? ? ?* @name:?
? ? ?* @test: test font
? ? ?* @msg:?
? ? ?* @param {*} data 數(shù)組
? ? ?* @param {*} field 依據(jù)那個(gè)字段排序
? ? ?* @return {*}
? ? ?*/
? ? data_letter_sort (data, field) {
? ? ? let list = new Array();
? ? ? let letter = ''
? ? ? for (let i = 0; i < data.length; i++) {
? ? ? ? // 首字母 轉(zhuǎn) 大寫(xiě)英文
? ? ? ? letter = (data[i][field]).substr(0, 1).toUpperCase();
? ? ? ? // 創(chuàng)建 字母 分組
? ? ? ? if (!(letter in list)) {
? ? ? ? ? list[letter] = new Array();
? ? ? ? }
? ? ? ? // 字母 分組 添加 數(shù)據(jù)
? ? ? ? list[letter].push(data[i]);
? ? ? }
? ? ? ?// 轉(zhuǎn)換 格式 進(jìn)行 排序；
? ? ? let resault = new Array();
? ? ? for (let key in list) {
? ? ? ? resault.push({
? ? ? ? ? letter: key,
? ? ? ? ? list: list[key]
? ? ? ? });
? ? ? }
? ? ? resault.sort(function (x, y) {
? ? ? ? return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
? ? ? });
? ? ? // 轉(zhuǎn)換 數(shù)據(jù) 格式
? ? ? let json_sort = {}
? ? ? for (let i = 0; i < resault.length; i++) {
? ? ? ? json_sort[resault[i].letter] = resault[i].list;
? ? ? }
? ? ? return json_sort;
? ? },
? ? checkCh(ch) {
? ? ? let uni = ch.charCodeAt(0);
? ? ? //如果不在漢字處理范圍之內(nèi),返回原字符,也可以調(diào)用自己的處理函數(shù)
? ? ? if (uni > 40869 || uni < 19968) {
? ? ? ? return ch;
? ? ? } //dealWithOthers(ch);
? ? ? //檢查是否是多音字,是按多音字處理,不是就直接在strChineseFirstPY字符串中找對(duì)應(yīng)的首字母
? ? ? return (py.oMultiDiff[uni] ? py.oMultiDiff[uni] : (py.strChineseFirstPY.charAt(uni - 19968)));
? ? }
? }
}
</script>
<style scoped>
.search-list {
? margin-top: 68rpx;
? background: white;
? width: 100%;
? height: auto;
}
.active {
? width: 16px;
? height: 16px;
? background: #005F28;
? line-height: 16px;
? border-radius: 50%;
? color: white;
? text-align: center;
}
.py-box {
? width: 16px;
? text-align: center;
? height: auto;
? position: fixed;
? top: 142px;
? font-weight: 400;
? color: rgba(0, 0, 0, 0.4);
? font-size: 14px;
? right:9px;
}
.search {
? position: fixed;
? top: 0;
? left: 0;
? width: 100%;
? z-index: 99;
? background: white;
? padding-bottom: 8px;
}
.city-item {
? margin: 0 32px 0px 16px;
? height: 40px;
? line-height: 40px;
? font-size: 14px;
? font-weight: 400;
? color: rgba(0, 0, 0, 0.9);
? border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.city-list {
? background: white;
? height: 100vh;
? position: relative;
}
.city-list .city-group-title {
? position: sticky;
? top: 33px;
? width: 100%;
? font-size: 14px;
? font-weight: 400;
? color: rgba(0, 0, 0, 0.4);
? padding: 0px 16px;
? height: 32px;
? line-height: 32px;
? background: #F5F5F5;
? box-sizing: border-box;
}
.main{
? min-height: 100vh;
? background: #F5F5F5;;
? padding-top: 6px;
}
.search-box {
? margin-top: 6px;
? margin: 0 auto;
? width: 343px;
? display: flex;
? height: auto;
? padding: 6px 8px;
? background: rgba(0, 0, 0, 0.05);
? border-radius: 4px;
}
.search-box img {
? width: 16px;
? height: 16px;
? margin-top: 2px;
? margin-right: 4px;
}
.search-box input {
? height: 20px;
? font-size: 14px;
? font-weight: 400;
? color: rgba(0, 0, 0, 0.9);
? line-height: 20px;
}
.dw-box {
? margin-top: 32px;
? height: 44px;
? display: flex;
? line-height: 44px;
? padding: 0 16px;
? font-size: 14px;
? font-weight: 400;
? color: #005F28;
}
.dw-box div {
? flex: 1;
? text-align: left;
}
.dw-box img {
? margin-top: 14px;
? width: 16px;
? height: 16px;
}
</style>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法 js實(shí)現(xiàn)多屏單張圖片延遲加載效果
這篇文章主要介紹了js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法，以及js實(shí)現(xiàn)多屏單張圖片延遲加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
原生js實(shí)現(xiàn)焦點(diǎn)輪播圖效果
本文主要分享了原生js實(shí)現(xiàn)焦點(diǎn)輪播圖效果的示例代碼，并解析了實(shí)例中的注意點(diǎn)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了js模仿java的Map集合的相關(guān)資料，Java中某些最常用的集合類是List和Map，感興趣的小伙伴們可以了解一下2016-01-01
bootstrap布局是應(yīng)用得很廣泛的一種網(wǎng)頁(yè)布局方法，下面通過(guò)本文給大家介紹bootstrap頁(yè)面縮小變形的快速解決辦法，需要的朋友參考下吧2017-02-02
這篇文章主要介紹了詳解小程序緩存插件(mrc)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例
這篇文章主要介紹了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法,結(jié)合具體實(shí)例形式分析了JS采用鏈?zhǔn)讲僮鞣椒ǚ庾Query中連綴操作實(shí)現(xiàn)css()方法的相關(guān)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了jsPDF導(dǎo)出PDF寬大于高異常處理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實(shí)現(xiàn)
鏈表是一種常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)。它是動(dòng)態(tài)地進(jìn)行存儲(chǔ)分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實(shí)現(xiàn)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript中內(nèi)存泄漏的幾種情況總結(jié)
在JavaScript中，內(nèi)存泄漏通常是由于變量、對(duì)象、閉包、事件監(jiān)聽(tīng)器等長(zhǎng)期存在而沒(méi)有被釋放引起的。本文就來(lái)和大家總結(jié)一下常見(jiàn)的幾種情況以及解決方法吧2023-05-05
Math.random() 這個(gè)方法相信大家都知道，是用來(lái)生成隨機(jī)數(shù)的。不過(guò)一般的參考手冊(cè)時(shí)卻沒(méi)有說(shuō)明如何用這個(gè)方法來(lái)生成指定范圍內(nèi)的隨機(jī)數(shù)。這次我就來(lái)詳細(xì)的介紹一下Math.random()，以及如何用它來(lái)生成制定范圍內(nèi)的隨機(jī)數(shù)。2015-04-04