Android仿appstore转场动画,小程序仿iOS应用Appstore首页today

比较喜欢IOS/APPSTORE首页列表及其转场动画交互，比较适合一些展示，设计类的场景。组件化封装

高仿appstore交互方法

基本实现appstore的列表项布局

适用于商品展示场景

配置说明

wxml

jsconst Pager = require('../../components/aotoo/core/index')

const mkAppstoreList = require('../../components/modules/appstorelist')

Pager({

data: {

appstoreList: mkAppstoreList({

id: '',

onOpen: null,

onClose: null,

data: []

}),

}

})

id{Array} 配置实例的Id

onOpen{Function} 弹开列表项时的回调方法

onClose{Function} 关闭列表项时的回调方法

data{Array} 设置列表内容

列表内容的属性

title{String|Array} 配置标题，副标题，描述

img{Object} 设置图片

IMG{Object} 设置封面页

banner{Object} 设置封面页的banner条

content{String|Object|Array} 设置详细类容

API

closePopView关闭当前打开的列表项

如何设置

如何获取实例data: {

appstoreList: mkAppstoreList({

id: 'asLikeList',

})

},

onReady(){

let instance = this.asLikeList  // 获取列表实例

}

设置列表项风格1(封面，上标题，上子标题)

mkAppstoreList({

id: 'id',

data: [

{

title: [

'Demo',  // 子标题

'仿appstore列表'  // 标题

],

IMG: { src: '/images/other/long.jpg'},  //封面图

}

]

}),

设置列表项风格2(深色封面，下标题，下子标题)

mkAppstoreList({

id: 'id',

data: [

{

IMG: { src: '/images/other/long.jpg', dark: true },  //封面图，深色模式(深色启用白字)

title: [

'Demo', // 子标题

'仿appstore列表'  // 表标题

],

},

]

}),

设置列表项风格3(深色封面，上标题，上子标题，下描述)

mkAppstoreList({

id: 'id',

data: [

{

title: [

'Demo',  // 子标题

'仿appstore列表', //标题

'好好学习，天天向上' // 标题描述

],

IMG: { src: '/images/other/long.jpg', dark: true },

},

]

}),

设置列表项风格4(图片，上标题，上子标题)

mkAppstoreList({

id: 'id',

data: [

{

title: [

'Demo',

'仿appstore列表'

],

img: { src: '/images/other/long.jpg' },

},

]

}),

设置列表项风格5(图片，下标题，下子标题，下标题描述)

mkAppstoreList({

id: 'id',

data: [

{

img: { src: 'http://www.agzgz.com/myimgs/other/long.jpg'},

title: [

'演示',

'仿appstore列表',

'一直很喜欢appstore的效果',

],

},

]

}),

设置列表项风格6(封面，下标题，下banner)

mkAppstoreList({

id: 'id',

data: [

{

IMG: { src: 'http://www.agzgz.com/myimgs/other/long.jpg'},

title: '仿appstore列表',

banner: {

img: { src: '/images/chat.png', itemStyle: 'width: 32px;' },

title: 'banner展示的demo',

}

},

]

}),

设置列表项风格7(上标题，上子标题，推荐列表)

mkAppstoreList({

id: 'id',

data: [

{

{title: [

'log',  // 子标题

'最近更新日志', // 标题

{"@icon": {type: 'success', size: 32, color: 'red'}, title: ['赞助开源', '新增手持弹幕组件']},

{"@icon": {type: 'info', size: 32, color: 'gray'}, title: ['bug修复', '修复导航面板显示错位的问题']},

{"@icon": {type: 'success', size: 32,}, title: ['评分组件', '快捷评分组件']}

]}

]

}),

如何设置展开内容

列表项展开后需要展示详细信息

mkAppstoreList({

id: 'id',

data: [

{

{

img: { src: 'http://www.agzgz.com/myimgs/other/long.jpg'},

title: [

'演示',

'仿appstore列表',

'一直很喜欢appstore的效果',

],

content: `使用markdown编辑所需要的内容，该内容将会在列表项展开后显示，是异步显示方式`

},

},

]

}),

DEMO