uniapp 车型选择器：品牌索引列表实现
<template>
<view class='car-selector'>
<view class='brand-list'>
<!-- 品牌索引列表 -->
<scroll-view
class='index-list'
scroll-y
scroll-into-view='{{scrollIntoView}}'
scroll-with-animation
>
<view v-for='(item, index) in brandIndexList' :key='index'>
<text
class='index-item'
:class='{ active: activeIndex === index }'
@tap='scrollToBrand(index)'
>
{{ item }}
</text>
</view>
</scroll-view>
<!-- 品牌列表 -->
<scroll-view
class='brand-list'
scroll-y
@scroll='onBrandListScroll'
>
<view v-for='(item, index) in brandList' :key='index'>
<view class='brand-item' @tap='selectBrand(item)'>
<image :src='item.logo'></image>
<text>{{ item.name }}</text>
</view>
</view>
</scroll-view>
</view>
<!-- 车型列表 -->
<scroll-view class='car-list' scroll-y>
<view v-for='(item, index) in carList' :key='index'>
<view class='car-item' @tap='selectCar(item)'>
<text>{{ item.name }}</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
brandList: [], // 品牌列表
brandIndexList: [], // 品牌索引列表（A-Z）
activeIndex: 0, // 当前选中的品牌索引
scrollIntoView: '', // 品牌索引列表滚动位置
carList: [], // 车型列表
};
},
mounted() {
// 初始化数据
this.initData();
},
methods: {
// 初始化数据
initData() {
// TODO: 请求接口获取品牌列表及车型列表数据
// 示例数据：
this.brandList = [
{ name: '奥迪', logo: 'xxx' },
{ name: '宝马', logo: 'xxx' },
{ name: '奔驰', logo: 'xxx' },
{ name: '本田', logo: 'xxx' },
{ name: '别克', logo: 'xxx' },
{ name: '标致', logo: 'xxx' },
{ name: '大众', logo: 'xxx' },
{ name: '丰田', logo: 'xxx' },
{ name: '福特', logo: 'xxx' },
{ name: '捷豹', logo: 'xxx' },
{ name: '凯迪拉克', logo: 'xxx' },
{ name: '兰博基尼', logo: 'xxx' },
{ name: '雷克萨斯', logo: 'xxx' },
{ name: '路虎', logo: 'xxx' },
{ name: '玛莎拉蒂', logo: 'xxx' },
{ name: '马自达', logo: 'xxx' },
{ name: 'MINI', logo: 'xxx' },
{ name: '起亚', logo: 'xxx' },
{ name: '日产', logo: 'xxx' },
{ name: '斯柯达', logo: 'xxx' },
{ name: '沃尔沃', logo: 'xxx' },
{ name: '现代', logo: 'xxx' },
{ name: '雪佛兰', logo: 'xxx' },
{ name: '雪铁龙', logo: 'xxx' },
{ name: '英菲尼迪', logo: 'xxx' },
{ name: '中华', logo: 'xxx' },
{ name: '中兴', logo: 'xxx' },
];
// 构建品牌索引列表
this.brandIndexList = this.buildBrandIndexList(this.brandList);
// TODO: 请求接口获取车型列表数据
// 示例数据：
this.carList = [
{ name: 'A1', brand: '奥迪' },
{ name: 'A3', brand: '奥迪' },
{ name: 'A4', brand: '奥迪' },
{ name: 'A5', brand: '奥迪' },
{ name: 'A6', brand: '奥迪' },
{ name: 'Q2', brand: '奥迪' },
{ name: 'Q3', brand: '奥迪' },
{ name: 'Q5', brand: '奥迪' },
{ name: 'Q7', brand: '奥迪' },
{ name: 'Q8', brand: '奥迪' },
{ name: 'X1', brand: '宝马' },
{ name: 'X2', brand: '宝马' },
{ name: 'X3', brand: '宝马' },
{ name: 'X4', brand: '宝马' },
{ name: 'X5', brand: '宝马' },
{ name: 'X6', brand: '宝马' },
{ name: 'X7', brand: '宝马' },
{ name: 'C200L', brand: '奔驰' },
{ name: 'C260L', brand: '奔驰' },
{ name: 'E200L', brand: '奔驰' },
{ name: 'E260L', brand: '奔驰' },
{ name: 'S320L', brand: '奔驰' },
{ name: 'GLC', brand: '奔驰' },
{ name: 'GLE', brand: '奔驰' },
{ name: 'GLS', brand: '奔驰' },
{ name: 'CR-V', brand: '本田' },
{ name: '雅阁', brand: '本田' },
{ name: '思域', brand: '本田' },
{ name: '缤智', brand: '本田' },
{ name: 'XR-V', brand: '本田' },
{ name: '昂克赛拉', brand: '别克' },
{ name: '君威', brand: '别克' },
{ name: '君越', brand: '别克' },
{ name: 'GL8', brand: '别克' },
{ name: '标致408', brand: '标致' },
{ name: '标致508', brand: '标致' },
{ name: '标致3008', brand: '标致' },
{ name: '标致4008', brand: '标致' },
{ name: '标致5008', brand: '标致' },
{ name: '帕萨特', brand: '大众' },
{ name: '途观', brand: '大众' },
{ name: '迈腾', brand: '大众' },
{ name: '高尔夫', brand: '大众' },
{ name: '朗逸', brand: '大众' },
{ name: '速腾', brand: '大众' },
{ name: '途安', brand: '大众' },
{ name: '途锐', brand: '大众' },
{ name: '凯美瑞', brand: '丰田' },
{ name: '雷凌', brand: '丰田' },
{ name: '卡罗拉', brand: '丰田' },
{ name: '汉兰达', brand: '丰田' },
{ name: 'RAV4荣放', brand: '丰田' },
{ name: '致炫', brand: '丰田' },
{ name: '致享', brand: '丰田' },
{ name: '福克斯', brand: '福特' },
{ name: '蒙迪欧', brand: '福特' },
{ name: '金牛座', brand: '福特' },
{ name: '探险者', brand: '福特' },
{ name: '探险者ST', brand: '福特' },
{ name: '翼虎', brand: '福特' },
{ name: '捷豹E-PACE', brand: '捷豹' },
{ name: '捷豹F-PACE', brand: '捷豹' },
{ name: '捷豹XEL', brand: '捷豹' },
{ name: '捷豹XF', brand: '捷豹' },
{ name: '捷豹XJ', brand: '捷豹' },
{ name: '凯迪拉克CT6', brand: '凯迪拉克' },
{ name: '凯迪拉克XT4', brand: '凯迪拉克' },
{ name: '凯迪拉克XT5', brand: '凯迪拉克' },
{ name: '凯迪拉克XT6', brand: '凯迪拉克' },
{ name: 'Huracán', brand: '兰博基尼' },
{ name: 'Aventador', brand: '兰博基尼' },
{ name: 'Urus', brand: '兰博基尼' },
{ name: '雷克萨斯CT', brand: '雷克萨斯' },
{ name: '雷克萨斯ES', brand: '雷克萨斯' },
{ name: '雷克萨斯GS', brand: '雷克萨斯' },
{ name: '雷克萨斯IS', brand: '雷克萨斯' },
{ name: '雷克萨斯LX', brand: '雷克萨斯' },
{ name: '雷克萨斯NX', brand: '雷克萨斯' },
{ name: '雷克萨斯RX', brand: '雷克萨斯' },
{ name: '发现', brand: '路虎' },
{ name: '揽胜', brand: '路虎' },
{ name: '揽胜运动版', brand: '路虎' },
{ name: '揽胜极光', brand: '路虎' },
{ name: '揽胜星脉', brand: '路虎' },
{ name: '揽胜行政版', brand: '路虎' },
{ name: '揽胜行政版新能源', brand: '路虎' },
{ name: '玛莎拉蒂Ghibli', brand: '玛莎拉蒂' },
{ name: '玛莎拉蒂Levante', brand: '玛莎拉蒂' },
{ name: '玛莎拉蒂Quattroporte', brand: '玛莎拉蒂' },
{ name: '阿特兹', brand: '马自达' },
{ name: 'CX-4', brand: '马自达' },
{ name: 'CX-5', brand: '马自达' },
{ name: 'CX-8', brand: '马自达' },
{ name: 'MX-5', brand: '马自达' },
{ name: 'MINI Clubman', brand: 'MINI' },
{ name: 'MINI Convertible', brand: 'MINI' },
{ name: 'MINI Countryman', brand: 'MINI' },
{ name: 'MINI Hatch', brand: 'MINI' },
{ name: '智跑', brand: '起亚' },
{ name: '欧菲莱斯', brand: '起亚' },
{ name: '狮跑', brand: '起亚' },
{ name: '狮跑新能源', brand: '起亚' },
{ name: '秀尔', brand: '起亚' },
{ name: '赛拉图', brand: '起亚' },
{ name: '途锐', brand: '日产' },
{ name: '天籁', brand: '日产' },
{ name: '帕拉丁', brand: '日产' },
{ name: '奇骏', brand: '日产' },
{ name: '骐达', brand: '日产' },
{ name: '轩逸', brand: '日产' },
{ name: '速腾', brand: '斯柯达' },
{ name: '晶锐', brand: '斯柯达' },
{ name: '昕锐', brand: '斯柯达' },
{ name: '明锐', brand: '斯柯达' },
{ name: '明锐新能源', brand: '斯柯达' },
{ name: 'Kodiaq', brand: '斯柯达' },
{ name: '柯珞克', brand: '斯柯达' },
{ name: 'XC40', brand: '沃尔沃' },
{ name: 'XC60', brand: '沃尔沃' },
{ name: 'XC90', brand: '沃尔沃' },
{ name: 'S60L', brand: '沃尔沃' },
{ name: 'S90L', brand: '沃尔沃' },
{ name: '名图', brand: '现代' },
{ name: '悦动', brand: '现代' },
{ name: '朗动', brand: '现代' },
{ name: '索纳塔', brand: '现代' },
{ name: '途胜', brand: '现代' },
{ name: '科鲁兹', brand: '雪佛兰' },
{ name: '迈锐宝', brand: '雪佛兰' },
{ name: '创酷', brand: '雪佛兰' },
{ name: '探界者', brand: '雪佛兰' },
{ name: '科帕奇', brand: '雪佛兰' },
{ name: '科迈罗', brand: '雪佛兰' },
{ name: '赛欧', brand: '雪佛兰' },
{ name: '景程', brand: '雪铁龙' },
{ name: '凯旋', brand: '雪铁龙' },
{ name: '赛纳', brand: '雪铁龙' },
{ name: '世嘉', brand: '雪铁龙' },
{ name: 'C4世嘉', brand: '雪铁龙' },
{ name: 'C5', brand: '雪铁龙' },
{ name: 'DS3', brand: '雪铁龙' },
{ name: 'DS4', brand: '雪铁龙' },
{ name: 'DS5', brand: '雪铁龙' },
{ name: 'Q50L', brand: '英菲尼迪' },
{ name: 'QX50', brand: '英菲尼迪' },
{ name: 'QX60', brand: '英菲尼迪' },
{ name: 'QX80', brand: '英菲尼迪' },
{ name: 'V7', brand: '中华' },
{ name: 'V5', brand: '中华' },
{ name: 'V3', brand: '中华' },
{ name: 'Z7', brand: '中兴' },
{ name: '驰野', brand: '中兴' },
{ name: '领主', brand: '中兴' },
];
},
// 构建品牌索引列表
buildBrandIndexList(list) {
const indexList = [];
let firstLetter = '';
list.forEach((item) => {
const letter = item.name.charAt(0).toUpperCase();
if (letter !== firstLetter) {
firstLetter = letter;
indexList.push(firstLetter);
}
});
return indexList;
},
}
};
</scrip
原文地址: https://www.cveoy.top/t/topic/nJZq 著作权归作者所有。请勿转载和采集!