评论

小程序-SAUI-首页改版-仿筛选功能

这一次算是一次重大更新,主要分为首页的改版,以及仿携程,同程的筛选功能。

在这,先谢谢某设计师的免费赞助设计~~~ 哈哈
先不说其它,直接上图先。

下面是仿携程,同程做的筛选部分。实现了基本功能,还在继续优化当中…

以上,算是最近的重大更新吧。

对于改版,用的时间不多,因为我的样式是通过配置样式表去整体控制的,大概如下。我希望做到的是,通过简单的配置文件,就可能改变整个网站的风格

在筛选的功能上,用的精力比较多。
筛选目前是用list组件来生成的,弹出层通过update来显示跟隐藏。目前弹出层做了两种形式,a 纯粹的列表组件 b tabs组件,简单的数据存储

const screenListData = [
  {
    title: {
      title: '筛选',
      itemClass: 'item-arrow'
    },
    dot: [{
    .........
      itemClass: 'ss-scrore-list-pop',
      aim: 'onClosePop?id=1'
    }],
    tap: 'onScrennItem?btn=true&id=1',
  },
  {
    title: '价格星级'
  },
  {
    title: {
      title: '智能排序',
      itemClass: 'item-arrow'
    },
    dot: [{
      '@list': {
        $$id: 'listx',
        data: [],
        itemClass: 'item-check',
        listClass: 'bg-fff ss-left'
      },
      itemClass: 'ss-scrore-list-pop',
      aim: 'onClosePop?id=3'
    }],
    tap: 'onScrennItem?id=3',
  }
]

Pager({
  data: {
    screenList: Pager.list({
      data: screenListData,
      listClass: 'ss-scrore-list color-333',
      itemClass: 'flex-1'
    })
  },
    onScrennItem: function (e, query, inst) {
    //点击筛选列表  头部
    const $screenList = this.getElementsById('screenList')
    const $screenPop = this.getElementsById('screenPop')
    const $id = query['id']
    $screenList.reset().findAndUpdate(e, function(res) {
      res.itemClass += ' active'
      res.dot[0].itemClass += ' active'
      return res
    })
    
    if ($id ==  1){
      const $testtabs = this.getElementsById('test-tabs')
      const $tabsbtn = this.getElementsById('tabs-btn')
      $testtabs.update({
        data: app.hooks.getItem('saveScreenData') != undefined
          ? adapter.tabsFunc(data.tabsData, app.hooks.getItem('saveScreenData')) : adapter.tabsFunc(data.tabsData)
      })
      $tabsbtn.removeClass('disN')
    }
    else {
      const $listx = this.getElementsById('listx')
      $listx.update({
        data: app.hooks.getItem('saveScreenListData') != undefined 
          ? adapter.listxFunc(data.listx, app.hooks.getItem('saveScreenListData'), 'radio')
          :adapter.listxFunc(data.listx, '', 'radio')
      })
    }
  },
 })

最后一次编辑于  09-05  (未经腾讯允许,不得转载)
点赞 1
收藏
评论

1 个评论