<template><!-- 選擇游戲 --><div class="game" :class="{'game__spacing': selectedGame.length > 0}"><!-- 搜索 --><div @click="searchGame" class="game__search"><div class="game__search-box"><span class="game__search-icon"></span><input@keyup="searchGame"ref="searchInput"v-focusclass="game__search-input"type="text"placeholder="搜索"v-model="searchGameName"></div></div><!-- 游戲名稱(chēng)列表 --><ul><li @click="handleOtherGame" class="game__block"><div class="game__item">其他游戲</div></li><!-- 熱門(mén)游戲 --><li class="game__block"><div @click="handleGame(item)"v-for="(item,index) in hotGameList":key="'hot'+index"class="game__item":class="{'selected' : judgSelectedGame(item)}">{{item.app_name}}</div></li><li v-for="(item,key,idx) in gameList":key="idx"class="game__block"><div class="game__head" :class="{'selected': selectGameIndex === idx}">{{key}}</div><div @click="handleGame(member)"v-for="(member,index) in item":key="index"class="game__item":class="{'selected' : judgSelectedGame(member)}">{{member.app_name}}</div></li></ul><!-- 懸浮字符 --><ul class="game__pop-key"><li @click="handleKey(0, 'search')" class="game__pop-key-con"><i class="game__pop-key-search"></i></li><li @click="handleKey(1, 'hot')" class="game__pop-key-con"><i class="game__pop-key-hot"></i></li><li @click="handleKey(idx, 'list')"v-for="(item,key,idx) in gameList":key="'key'+idx"class="game__pop-key-con":class="{'selected':selectGameIndex === idx}"><div class="game__pop-key-box">{{key}}</div></li></ul><!-- 懸浮底部按鈕 --><div v-if="selectedGame.length > 0" class="game__footer bottom-container"><ui-button @click="handleCancel" class="demo-button__small" :inline="true" :primary="false">取消</ui-button><ui-button @click="handelDefine" class="demo-button__small" :inline="true">確認(rèn)</ui-button></div></div> </template><script> import { makePy } from "../assets/js/pinying"//導(dǎo)入插件獲取所有城市中文的大寫(xiě)首字母 export default {name: 'SelectGame',components: {},data() {return{pageStatus: 'loading', //初始載入searchGameName: '', // 搜索名稱(chēng)games: [], //游戲數(shù)據(jù)gameList: [], //游戲列表hotGameList: [], //熱門(mén)游戲selectGameIndex: 0, //當(dāng)前游戲列表字符索引offsetTopArr: [], //所有字符head的offsetTopselectedGame: [], //}},computed: {},directives: {focus: {// 指令的定義inserted: function(el) {el.focus();}}},created() {this.initData();},mounted() {this.initGameData();window.addEventListener("scroll", this.pageScroll);},methods: {/*** 初始化頁(yè)面數(shù)據(jù)*/initData() {let data = {gameList: [{id: "0", app_name: "愛(ài)心覺(jué)羅"},{id: "1", app_name: "地下城與勇士"},{id: "2", app_name: "穿越火線(xiàn)"},{id: "17", app_name: "QQ飛車(chē)"},{id: "1261", app_name: "QQ飛車(chē)手游"},{id: "214", app_name: "使命召喚"},{id: "232", app_name: "炫舞時(shí)代"},{id: "236", app_name: "流放之路"},{id: "237", app_name: "靈山奇緣"},{id: "1124", app_name: "歡樂(lè)麻將"},{id: "1183", app_name: "奇跡暖暖"},{id: "1104", app_name: "天天愛(ài)消除"},{id: "1194", app_name: "穿越火線(xiàn)（手游）"},{id: "1243", app_name: "魂斗羅"},{id: "1266", app_name: "拳皇命運(yùn)"},{id: "10006", app_name: "部落沖突"},{id: "20063", app_name: "FIFAonline3"},],hotGame: [{id: "3", app_name: "穿越火線(xiàn)"},{id: "4", app_name: "王者榮耀"},{id: "5", app_name: "和平精英"}]}this.pageStatus = 'normal';this.games = data.gameList;this.picGameData(data.gameList);this.hotGameList = data.hotGame;this.selectedGame = this.$storage.get(this.$storage.keys.SELECT_GAME) ? this.$storage.get(this.$storage.keys.SELECT_GAME) : [];},/*** 格式化游戲字母排序* @param data 后臺(tái)獲取的游戲列表*/picGameData(data) {let gameList = [];data.map((item) => {//遍歷數(shù)組,拿到城市名稱(chēng)let fristName = makePy(item.app_name)[0].substring(0, 1); //這里截取首字母的第一位//取全部城市的首字母if (!gameList[fristName]) {gameList[fristName] = [];}gameList[fristName].push(item)});this.gameList = Utils.kSort(gameList); //根據(jù)首字母鍵值對(duì)給原數(shù)據(jù)按首字母分類(lèi)},/*** 獲取所有錨點(diǎn)元素的 offsetTop*/initGameData() {let headContent = document.querySelectorAll('.game__head'); // 獲取所有字符錨點(diǎn)元素let offsetTopArr = [];headContent.forEach(item => {this.offsetTopArr.push(item.offsetTop);})},/*** 點(diǎn)擊開(kāi)始搜索游戲*/searchGame () {this.$nextTick( () => {this.$refs.searchInput.focus();})let gameList = this.games;if (this.searchGameName !== '') {gameList = this.games.filter((item) => {return item.app_name.indexOf(this.searchGameName) !== -1})}this.picGameData(gameList);},/*** 點(diǎn)擊其他游戲搜索*/handleOtherGame() {this.dialog = this.$createDialog({type: 'comment',showClose: true,title: '填寫(xiě)游戲名稱(chēng)',prompt: {value: '',placeholder: '請(qǐng)輸入游戲名稱(chēng)，游戲名之間用"，"隔開(kāi)...',maxlength: 200,indicator: 'indicator',autoExpand: true},confirmBtn: {text: '提交',active: true,disabled: true,href: 'javascript:;'},onConfirm: (e, promptValue) => {let list = [];list = promptValue.toString().split(',');this.$storage.set(this.$storage.keys.SELECT_GAME, list); // this.$router.go(-1);}});this.dialog.show();},/*** 點(diǎn)擊選擇游戲* @param item 游戲名稱(chēng)item*/handleGame(item) {if (this.judgSelectedGame(item)) {return}this.selectedGame.push(item.app_name);},/*** 判斷是否選擇了游戲* @param item 游戲名稱(chēng)item*/judgSelectedGame(item) {console.log('judg')let count = 0;this.selectedGame.map(it => {if (it === item.app_name) {count = 1;}})return count > 0 ? true : false;},/*** 頁(yè)面滾動(dòng)監(jiān)聽(tīng)*/pageScroll() {// let scrollTop = $(window).scrollTop(); // 獲取當(dāng)前文檔流的 scrollTop// // 定義當(dāng)前點(diǎn)亮的導(dǎo)航下標(biāo)// let keyIndex = 0;// this.offsetTopArr.map((item, index) => {// if (scrollTop >= item - 100) {// keyIndex = index// }// })// this.selectGameIndex = keyIndex;},/*** 點(diǎn)擊字符搜索游戲* @param index 字母序列索引* @param type 區(qū)分字母和圖標(biāo)*/handleKey(index, type) {if (type == 'search'){console.log('search')this.selectGameIndex = 0;$(window).scrollTop(0);this.$nextTick( () => {this.$refs.searchInput.focus();})return}if (type == 'search'){this.selectGameIndex = 0;$(window).scrollTop(0);return} let scrollTop = $(window).scrollTop(); // 獲取當(dāng)前文檔流的 scrollTopthis.selectGameIndex = index;let targetOffsetTop = this.offsetTopArr[index];$(window).scrollTop(targetOffsetTop);},/*** 點(diǎn)擊取消*/handleCancel() {this.selectedGame = [];},/*** 點(diǎn)擊確認(rèn)*/handelDefine() {this.$storage.set(this.$storage.keys.SELECT_GAME, this.selectedGame);this.$router.go(-1);}},beforeDestroy() {window.removeEventListener("scroll", this.pageScroll);} } </script><style lang="less" scoped> @import "~@/assets/css/mixin.less"; @import "~@/assets/css/varibles.less"; @imgUrl: "../assets/img"; input {outline: none;caret-color: #2caf7d;outline-color: invert;outline-style: none;outline-width: 0px;border: none;border-style: none;text-shadow: none;-webkit-appearance: none;-webkit-user-select: text;outline-color: transparent;box-shadow: none; } input::-webkit-input-placeholder {color: #989898; } /deep/ .ui-cell::before {left: 0rem; } .game{min-height: 100vh;padding-bottom: 0.2rem; } .game__spacing{padding-bottom: 1.5rem; } .game__search{background: #fff;padding: 0.2rem 0.36rem; } .game__search-box{height: 0.6rem;background-color: #f0f5f6;border-radius: 0.3rem;.flex-second;padding: 0 0.3rem; } .game__search-icon{width: 0.31rem;height: 0.3rem;background: url('@{imgUrl}/search.png') no-repeat center center;background-size: 0.31rem 0.3rem;margin-right: 0.2rem; } .game__search-input{flex: 1;height: 0.6rem;background-color: #f0f5f6;border-radius: 0.3rem; } .game__block{background: #fff; } .game__head{height: 0.64rem;background-color: #f0f5f6;padding: 0 0.38rem;font-size: @fz28;color: #888888;.flex-second; } .game__head.selected{color: #01d5d8; } .game__item{height: 1rem;.flex-second;padding: 0 0.38rem;font-size: @fz28;color: #000;.line-one(top); } .game__item.selected{position: relative;&::before{content: '';width: 0.3rem;height: 0.22rem;background: url('@{imgUrl}/select.png') no-repeat center center;background-size: 0.3rem 0.22rem;position: absolute;top: 50%;right: 1rem;transform: translateY(-50%);} } .game__pop-key{position: fixed;top: 50%;right: 0rem;transform: translateY(-50%); } .game__pop-key-search{width: 0.3rem;height: 0.3rem;background: url('@{imgUrl}/pop-search.png') no-repeat center center;background-size: 0.16rem 0.16rem; } .game__pop-key-hot{width: 0.3rem;height: 0.3rem;background: url('@{imgUrl}/pop-start.png') no-repeat center center;background-size: 0.16rem 0.16rem; } .game__pop-key-con{.flex-center;width: 1rem;height: 0.46rem; } .game__pop-key-box{width: 0.3rem;height: 0.3rem;font-size: 0.18rem;color: #333;.flex-center;padding-top: 0.04rem; } .selected .game__pop-key-box{background-image: linear-gradient(0deg, #47d998 0%, #01d5d8 100%);color: #fff;border-radius: 50%; } .game__footer{position: fixed;bottom: 0;left: 0;width: 100%;background-color: #ffffff;box-shadow: 0px -10px 16px 0px rgba(174, 174, 192, 0.1);padding: 0.31rem 0.36rem;.flex-second;justify-content: space-between; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {.game__spacing{padding-bottom: 1.9rem;} } </style> utils.jsfunction kSort (obj) {let keys = Object.keys(obj).sort(),sortedObj = {};for (var i in keys) {sortedObj[keys[i]] = obj[keys[i]];}return sortedObj; }export default {kSort }

pinying：https://gitee.com/dou_i_jiang/file_download

Mint UI實(shí)現(xiàn)A-Z字母排序的城市選擇列表：http://www.uxys.com/html/Vue/20191228/26616.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue 按A-Z字母排序数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。