<template> <view class=""> <view class="top"> <view class="search-box mt10 flex alcenter"> <view class="search-input"><u-search :showAction="false" placeholder="请输入想要搜索的城市" v-model="search"></u-search></view> <view class="filter ft16 " @click="onSearch">搜索</text></view> </view> </view> <view class="ft14 pd12_10 "> 当前:{{locationInfo.city}} </view> <view style="width: 90%; height: 2rpx; background-color: #bcbcbc; margin-left: 20rpx;"> </view> <view class="pd12_10"> <view class="ft14"> 热门城市 </view> <view class="flex wrap "> <view class="ft14 hot_city border" v-for="(item,index) in hot" @click="hotItem(item)" > {{item.name}} </view> </view> </view> <u-index-list :index-list="indexList"> <template v-for="(item, index) in itemArr"> <!-- #ifdef APP-NVUE --> <u-index-anchor :text="indexList[index]"></u-index-anchor> <!-- #endif --> <u-index-item> <!-- #ifndef APP-NVUE --> <u-index-anchor :text="indexList[index]"></u-index-anchor> <!-- #endif --> <view class="list-cell" v-for="(it, index) in item" @click="cityItem(it)"> {{it.name}} </view> </u-index-item> </template> </u-index-list> </view> </template> <script> export default { data() { return { search: '', allList: [], hot: [], indexList: [], itemArr: [], } }, onl oad() { this.getCity() }, methods: { onSearch(){ this.getCity() }, // 获取定位城市 getCity() { this.$http.api('stores/miniapp/getCity', { search: this.search }).then(res => { this.hot = res.hot this.allList = res.list this.setIndex() this.allcity() }) }, hotItem(item){ this.$store.commit('setLocation', { city: item.name, lng: item.lng, lat: item.lat, }); uni.switchTab({ url: '/pages/home/index/index' }); }, cityItem(item){ this.$store.commit('setLocation', { city: item.name, lng: item.lng, lat: item.lat, }); uni.switchTab({ url: '/pages/home/index/index' }); }, // // 右侧索引去重 setIndex() { let iniIndex = []; //定义数组 this.allList.map((item) => { //遍历当前的数组对象 iniIndex.push(item.initials); //将当前某个值productPushCode取出来放入数组中 }) iniIndex = Array.from(new Set(iniIndex)) this.indexList = iniIndex.sort() }, // 城市列表重组 allcity() { var tmp = []; for (var i = 0; i < this.indexList.length; i++) { var item = this.indexList[i]; for (var j = 0; j < this.allList.length; j++) { var py = this.allList[j].initials; if (py == item) { if (tmp.indexOf(item) == -1) { this.itemArr[i] = [this.allList[j]]; tmp.push(item); } else { this.itemArr[i].push(this.allList[j]); } } } } } } } </script> <style lang="scss" scoped> .top { // background: #fff; padding: 10rpx 30rpx 20rpx; position: relative; z-index: 10; margin-bottom: 20rpx; .search-input { flex: 1; } .filter { margin-left: 8rpx; background-color: red; color: #fff; padding: 10rpx 30rpx; border-radius: 40rpx; } } .list-cell { display: flex; box-sizing: border-box; width: 100%; padding: 10px 24rpx; overflow: hidden; color: #323233; font-size: 14px; line-height: 24px; } .hot_city{ padding: 10rpx 15rpx; margin: 10rpx; } </style>
标签:uniapp,indexList,index,iniIndex,uview,allList,item,var From: https://www.cnblogs.com/hs20011205/p/17461498.html