fix: 修复城市选择列表点击城市信息无法获取参数bug

This commit is contained in:
mayubo@gmail.com 2025-07-10 09:50:45 +08:00
parent ffe6f6239b
commit 424c1e8df7
14 changed files with 54 additions and 14 deletions

View File

@ -37,3 +37,26 @@ Git 提交规范
- list 列表区域
循环调用避坑指南:
- 页面: page/shopcity/index.vue 城市选择列表页
- 背景: 城市名称列表依赖于父级城市英文首字母简写例A、B、C 循环项下的list 进行循环展示
- 场景: 城市列表点击,需要获取点击的城市信息
- 问题: 触发点击事件函数无法接收入参item
- 解决方案: 改为箭头函数 @click="() => { headerSelectMapClick(item) }"
- 原因: 查询DeepSeek给出的解释是 箭头函数创建了一个闭包,保留了 item 的引用 即使列表重新渲染,也能保持对正确 item 的引用
- 该解释是否正确 不确定 有待考量
- 示例代码
<!--
<scroll-view class="list-scroll" scroll-y :scroll-into-view="activeId" @scroll="handleScroll">
<view v-for="(group, index) in groupedData" :key="index" class="white_container" :id="'group-' + group.letter">
<view class="letter-title">{{ group.letter }}</view>
<view v-for="(item, ind) in group.list"
:key="item.id"
:class="['list-item', ind === group.list.length - 1 && 'no_border']"
@click="headerSelectMapClick(item)" // TODO问题点 为什么无法获取点击的item参数
>
{{ item.name }}
</view>
</view>
</scroll-view>
-->

View File

@ -67,11 +67,12 @@
<!-- 字母标题 -->
<view class="letter-title">{{ group.letter }}</view>
<!-- 列表项 -->
<!-- TODO: 小程序编译避坑指南 -->
<view
v-for="(item, ind) in group.list"
:key="item.id"
:class="['list-item', ind === group.list.length - 1 && 'no_border']"
@click="headerSelectMapClick(item)"
@click="() => { headerSelectMapClick(item) }"
>
{{ item.name }}
</view>
@ -164,9 +165,10 @@ export default {
},
methods: {
headerSelectMapClick(item) {
console.log('1111 this', this);
console.log("地图选点", item);
const lat = Number(item.lat);
const long = Number(item.long);
const lat = Number(item.lat) || 0;
const long = Number(item.long) || 0;
uni.chooseLocation({
latitude: lat,
longitude: long,
@ -222,6 +224,7 @@ export default {
}, 500),
groupData(item) {
console.log('123. item', item);
const map = {};
this.letters.forEach((letter) => {
map[letter] = {
@ -235,6 +238,7 @@ export default {
map[items.letters].list.push(items);
}
});
console.log('11111111', map)
//
this.groupedData = Object.values(map).filter(

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3,5 +3,18 @@
"projectname": "uniapp-ZHSQ",
"setting": {
"compileHotReLoad": true
},
"condition": {
"miniprogram": {
"list": [
{
"name": "pages/shopcity/shopcity",
"pathName": "pages/shopcity/shopcity",
"query": "",
"scene": null,
"launchMode": "default"
}
]
}
}
}