uni-app 索引列表

uview2.0组件给的结构并不是后台给的那种二维数组对象结构,并且右侧A-Z索引不想要I、O、U、V字母

效果图

<u-index-list :indexList="indexList" activeColor="#12BE7B"> <template v-for="(item, index) in itemArr"> <!-- #ifdef APP-NVUE --> <u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor> <!-- #endif --> <u-index-item :key="index"> <!-- #ifndef APP-NVUE --> <u-index-anchor :text="indexList[index]"></u-index-anchor> <!-- #endif --> <view class="list" v-for="(item1, index1) in item" :key="index1" @click="onClickSearch(item1.yj_title)"> <view class="list__item"> <text class="list__item__user-name">{{item1.yj_title}}</text> </view> <u-line></u-line> </view> </u-index-item> </template> </u-index-list>

const indexList = () => { const indexList = []; const charCodeOfA = 'A'.charCodeAt(0); for (let i = 0; i < 26; i++) { indexList.push(String.fromCharCode(charCodeOfA + i)); } // indexList.push('#') indexList.splice(indexList.indexOf('I'), 1); indexList.splice(indexList.indexOf('O'), 1); indexList.splice(indexList.indexOf('U'), 1); indexList.splice(indexList.indexOf('V'), 1); return indexList; }

dataLists() { // 请求接口 this.Req(' 请求接口 ', {}, 'POST') .then(res => { console.log('res', res) if (res.code == 200) { let cityArr = {}; res.data.data.forEach(item => { if (!cityArr[item.yj_pinyin]) { cityArr[item.yj_pinyin] = []; } cityArr[item.yj_pinyin].push(item); }); this.itemArr = Object.values(cityArr);  } else { console.log('请求失败') } }).catch(err => { console.log('请求失败', err) }) },

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容