评论

小程序- SaUi 之左右选择器

上一次发布的城市选择器,如果数据少的话,是很顺畅,但是数据过多呢??

补充一点:因为城市选择的数据是从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,对于上面的问题,我也会在考试后进一步的去完善。哈哈 我是要考试的人~~~

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

最后一次编辑于  10-28  
点赞 4
收藏
评论

1 个评论

  • Jhinnn
    Jhinnn
    10-10

    不错

    10-10
    赞同
    回复 1
    • 🌙
      🌙
      10-11
      谢谢~
      10-11
      回复