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

• 组件化封装
• 高仿appstore交互方法
• 基本实现appstore的列表项布局
• 适用于商品展示场景

配置说明

wxml

<view class="container">
  <ui-list wx:if="{{appstoreList}}" list="{{appstoreList}}" />
</view>

js

const 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