网站改版 内容排序(仿携程,同程做的免费赞助设计~~哈哈先不说 )
优采云 发布时间: 2021-09-08 04:15网站改版 内容排序(仿携程,同程做的免费赞助设计~~哈哈先不说
)
在此,感谢设计师免费赞助设计~~~哈哈
其他不说了,先上图吧。
以下是携程和同程模仿的筛选部分。基本功能已经实现,还在优化中...
以上是最近的主要更新。
修改,花不了多少时间,因为我的风格是通过配置样式表来整体控制的,大概如下。我希望实现的是,通过一个简单的配置文件,就可以改变整个网站
的风格
在筛选功能中,使用了更多的能量。
过滤当前由列表组件生成,通过更新显示和隐藏弹出层。目前弹出层有两种形式,一个是纯列表组件,一个是标签组件,简单的数据存储
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')
})
}
},
})