AMP-List切换src时高度计算异常问题求助

问题背景 #

我用amp-list组件根据用户的初始选择加载不同的库存JSON文件：

• 选择「Select your machine type」时加载all.json
• 选择「Excavator（挖掘机）」时加载EX.json
• 选择「Wheel Loader（轮式装载机）」时加载WL.json

为了设置amp-list的高度，我采用了一个赶工期时的非常规方案：用PHP读取每日定时任务生成的count.txt文件中的循环计数最后值，乘以70作为初始高度；同时用AMP绑定语法[height]="inventory.listSrc.length*70"动态更新高度。核心代码如下：

<amp-list width="auto" height="<?php echo file_get_contents('json/count.txt')*70; ?>" [height]="inventory.listSrc.length*70" layout="fixed-height" src="json/all.json" [src]="inventory.listSrc">

异常现象 #

• 选择「挖掘机」时，高度计算完全正常；选择挖掘机品牌筛选时，高度也能正常更新
• 选择「轮式装载机」时，高度计算错误，显示异常；但选择轮式装载机的品牌筛选后，高度计算又恢复正常

挖掘机JSON示例（EX.json，部分内容） #

{"items": [
    {"SerialNo_SerialNumber":"T15030204","Part_PartNum":"248795-00","Part_PartDescription":"EXM-CWL-120-150-15.50 \r\nCATEX\/312E","Part_CommercialStyle":"EX120","Part_CommercialBrand":"CAT","Part_CommercialSubBrand":"312E","RowIdent":"7b057b59-53bb-4687-bc63-fcbfdc2f4f19","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T180400364","Part_PartNum":"16HD200-202011-07120-5","Part_PartDescription":"EXB-HD-542-1.250\/MWL\/200 \rBLK CAT TEETH","Part_CommercialStyle":"EX200","Part_CommercialBrand":"ANY_MAKE","Part_CommercialSubBrand":"EX200","RowIdent":"de867415-7ee4-49c3-9604-4f5e31e604d9","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T17010170","Part_PartNum":"216999-00","Part_PartDescription":"EXM-CWL-150-15.50\/DEEREEX\/160D","Part_CommercialStyle":"EX150","Part_CommercialBrand":"DEERE","Part_CommercialSubBrand":"160D","RowIdent":"c2219e1b-54cf-45cf-b0f5-697d6dd0a404","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T15060130","Part_PartNum":"245562-00","Part_PartDescription":"EXM-CWL-150-15.50\/HYUEX\/ \rR160LC-9","Part_CommercialStyle":"EX150","Part_CommercialBrand":"HYUNDAI","Part_CommercialSubBrand":"R160LC-9","RowIdent":"c6dba455-5ec2-448a-b9b6-7fe6dd70eedb","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T16060145","Part_PartNum":"245562-00","Part_PartDescription":"EXM-CWL-150-15.50\/HYUEX\/ \rR160LC-9","Part_CommercialStyle":"EX150","Part_CommercialBrand":"HYUNDAI","Part_CommercialSubBrand":"R160LC-9","RowIdent":"6378e33f-f1ee-4c99-b2b9-7f20187b2f76","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T14010014","Part_PartNum":"250184-00","Part_PartDescription":"OBS\/EXM-CWL-080-12.1875 \r\nCATEX\/308D","Part_CommercialStyle":"EX080","Part_CommercialBrand":"CAT","Part_CommercialSubBrand":"308D","RowIdent":"7f06f682-4159-482e-a778-3929d10b01e0","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T15040238","Part_PartNum":"250070-00","Part_PartDescription":"EXM-CWL-200-18.14\/CASEEX \r\nCX210C","Part_CommercialStyle":"EX200","Part_CommercialBrand":"CASE","Part_CommercialSubBrand":"CX210C","RowIdent":"c9d12600-c7f8-43c0-83ab-8375a1cd3e01","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T16050275 ","Part_PartNum":"248902-00","Part_PartDescription":"EXM-CWL-200-18.14\/CATEX \r\n320E\"B\" LINKAGE","Part_CommercialStyle":"EX200","Part_CommercialBrand":"CAT","Part_CommercialSubBrand":"320E \"B\"","RowIdent":"faaed800-e446-4f34-8392-e4cb1aad1ec0","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T16050276 ","Part_PartNum":"248902-00","Part_PartDescription":"EXM-CWL-200-18.14\/CATEX \r\n320E\"B\" LINKAGE","Part_CommercialStyle":"EX200","Part_CommercialBrand":"CAT","Part_CommercialSubBrand":"320E \"B\"","RowIdent":"29af32e1-4fec-4a34-8f56-5b5dcfeb4edd","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T14010006","Part_PartNum":"250019-00","Part_PartDescription":"EXM-CWL-200-18.14\/CATEX\/315D \r\nTO PICK UP 200 CLASS HOOKS","Part_CommercialStyle":"EX200","Part_CommercialBrand":"CAT","Part_CommercialSubBrand":"315D","RowIdent":"e0439609-ab6c-49a6-b7d5-e4a8401cfca4","Type":"Excavator","FilterName":"EX"},
    {"SerialNo_SerialNumber":"T13030022","Part_PartNum":"230677-00","Part_PartDescription":"EXM-CWL-250-18.25\/KOMEX\/PC240L\r\nOFFSET BOSSES","Part_CommercialStyle":"EX250","Part_CommercialBrand":"KOMATSU","Part_CommercialSubBrand":"PC240LC-10","RowIdent":"80a91d28-4bc8-4d32-844e-1823d43ba183","Type":"Excavator","FilterName":"EX"}
]}

问题排查与修复方案 #

Hey，咱们来一步步拆解这个问题：

1. 先检查WL.json的结构和语法 #

品牌筛选后高度恢复正常，说明筛选后的子集数据没问题，大概率是原始WL.json本身有结构问题：

• 确认WL.json的顶级键是否和EX.json一致（都是items），如果键名不同（比如写成inventory），inventory.listSrc.length会返回undefined，直接导致高度计算错误
• 检查WL.json是否有语法错误：比如 trailing comma（末尾多余逗号）、缺失括号、转义字符错误等，这些小问题会让AMP初始解析失败，但筛选后的子集可能被修正了格式

2. 验证AMP绑定逻辑是否正确 #

AMP的amp-list默认会把返回的JSON中items数组绑定到上下文变量items，你的绑定用了inventory.listSrc.length，这里要确认：

• 你自定义的状态变量inventory.listSrc是否正确指向了WL.json中的items数组？如果状态更新逻辑有问题，初始切换到WL.json时，这个变量可能没有拿到正确的数组长度
• 可以尝试把绑定改成[height]="items.length*70"，用AMP默认的变量来测试，排除自定义状态的问题

3. 修正初始高度的静态值 #

你的PHP初始高度来自count.txt，这个文件大概率是统计all.json或EX.json的条目数，而WL.json的条目数可能完全不同：

• 要么给每个JSON文件单独生成计数文件（比如count_WL.txt），PHP根据初始选择动态读取对应文件
• 要么直接设置一个足够大的默认高度（比如height="1200"），让AMP的动态绑定在JSON加载后自动修正，避免初始高度不匹配

4. 开启AMP调试模式找错误 #

在URL末尾加上#development=1开启AMP开发者模式，打开浏览器控制台，就能看到绑定失败、JSON解析错误等具体提示，这是定位问题最快的方法

如果试过这些还没解决，能分享WL.json的部分内容的话，咱们可以再深入排查！

内容的提问来源于stack exchange，提问作者Craig Scott