补充一点：因为城市选择的数据是从cloud下来的，如果想跑起来需要在配置文件（aotoo.config.js）把cloud设置为true,而且云数据那也要导入相应的数据

// saui
    {
      name: 'saui',
      type: 'mp',
      startup: true,
      src: path.join(ROOT, 'src/saui'),
      options: {
        cloud: true,
        appid: 'xxxxx'
      }
    },

这次的更新，主要是基于城市选择来扩展的。主要是上一次有人问过我，如果数据过大的话 我这个东西 还能用么~所以才有了这一次的更新，也欢迎大家，对我所做的东西 进行评分，及提意见，问题等…

1，把业务上的部分交互提取出来，封装成组件。分别写了两个页面，一汽车品牌（数据较多，存放本地）二城市选择（数据过大，需要请求cloud）目前实现了传对应的数据，就可以有基本的界面。例如

1）: 基础数据
    {
        "id": 117,
      	"cname": "AC Schnitzer",
     	"cfrl": "A",
      	"logo": "https://car3.autoimg.cn/cardfs/series/g27/M01/B0/62/40x40_f40_autohomecar__ChcCQFs9vBKAO3YSAAAW0WOWvRc555.png"
    },
    {
      	"id": 276,
      	"cname": "ALPINA",
      	"cfrl": "A",
      	"logo": "https://car3.autoimg.cn/cardfs/series/g27/M05/AB/2E/40x40_f40_autohomecar__wKgHHls8hiKADrqGAABK67H4HUI503.png"
    }
    ...
    
2）: 组件提供两种更新（update，updateItems），分别对应的两种数据结构，第一种是循环单个更新 ，第二种是一次性更新所有数据。
a: 单个更新，适用于数据过大，以下是**汽车品牌**的适配方法
const selectionAdapter = (data, imgsCache) => {
  let output = []
  let outputIdf = []
  data.map( (item, ii) => {
    let cfrl = item.cfrl.toUpperCase()
    if(JSON.stringify(outputIdf).indexOf(JSON.stringify(cfrl))==-1){
      outputIdf = {
        title: cfrl,
        itemClass: 'color-primary ss-block ss-sticky ptb-20-r bg-fff ml-20-r'
      }
    }
    output.push({
      title: [
        {
          img: item.logo,
          itemClass: 'pic-80-r'
        },
        {
          title: item.cname,
          itemClass: 'color-active size18 lhei-60-r ml-40-r'
        },
      ],
      titleClass: 'flex-row-start-center',
      idx: cfrl,        //此处的id只为了重新排序
      itemClass: 'ptb-20-r bb-default ',
    })
  })
  return {
    dot: [
      {
        title: outputIdf,
        li: output,
        liClass: 'pl-default-r'
      }
    ]
  }
}
b:全部更新
const selectionAllAdapter = (data, data2, imgsCache) => {
 //data 是菜单字母的数据，
 //data2 是所有数据
  return data.map(item => {
    const kk = data2.filter(itemx => {
      if (itemx.cfrl == item.title) {
        return itemx
      }
    })
    return {
      title: selectionAdapter(kk, imgsCache),
      id: item.title
    }
  })
}

在onload的时候 先把基础数据 ，转到组件需要的数据结构。在onready的时候，去更新这个组件。这是一种实现方法。还有一种类似的，基础数据是cloud请求过来的，但由于cloud的条数限制，我们可以先请求到表的总数量，再除于一次能请求的最高条件，通过for去全部请求我们需要的。

2，组件提供的交互分别有，a: 点击字母菜单，改变状态，及弹出提示框，并跳转到对应的数据上去。b:滚动时切换字母菜单的状态（目前这个功能是需要手动去开启的。主要是因为从cloud请求的数据过多，速度太慢，会影响整体的效果）

3，两个页面，我自己评分是60分吧。实现了基本功能，但是页面仍然存在着问题，在数据完全加载好之前，页面会出现卡顿，如果是请求回来的大量数据 会更慢。所以大家的看界面的时候，请留点耐心~~~

4，对于上面的问题，我也会在考试后进一步的去完善。哈哈 我是要考试的人~~~

持续的更新，完善是我所坚持的。谢谢大家~