LIST元件

list是item的数组集合,它为item集合提供了一个容器,并能够为该集合统一设置一些属性参数

参数属性

key type descript
data {Array[item, item...]} item的配置请参考
type {Object}默认list 列表类型scroll/swiper/list
listClass {String} 列表容器的样式类
itemClass {String} 列表子项样式类
listStyle {String} 列表容器样式
itemStyle {String} 列表子项样式

type指定该list组件的类型为scroll,swiper, list, list类型可不指定

scroll列表类型

更多设置参考这里

  const app = getApp()
  const Pager = require('components/aotoo/core')  // 引入我们封装的Page库
  Pager({
    data: {
      motto: Pager.list({
        type: {
          is: 'scroll',
          "scroll-y": false
        },
        data: [
          {title: '文本描述内容1'},
          {title: '文本描述内容2'},
          ...
          ...
        ],
        itemClass: 'list-class'
      }),
    },

swiper列表类型

更多设置参考这里

  const app = getApp()
  const Pager = require('components/aotoo/core')  // 引入我们封装的Page库
  Pager({
    data: {
      motto: Pager.list({
        type: {
          is: 'swiper',
          "autoplay": true
        },
        data: [
          {title: '文本描述内容1'},
          {title: '文本描述内容2'},
          ...
          ...
        ],
        itemClass: 'list-class'
      }),
    },

实例方法

key 参数 descript
reset () 重置list为原始数据
update ( {Object}, callback ) 更新list的数据
findIndex ( {Object/String} ) 查找list.data某项的下标
find ( {Object/String} ) 查找list.data的某项数据
findAndUpdate ( {Object/String}, callback ) 查找并更新某些数据
attr ( {String} ) 查找该项数据的attr属性
append ( {Object/Array} ) 追加子项
prepend ( {Object/Array} ) 前置追加一个子项
delete ( {String} ) 删除指定项
insert ( {string}, {Object} ) 插入某项

treeid

list组件/tree组件会为每一项数据自动设置一个treeid属性
该属性会成为ITEM结构的data-treeid属性,通过该属性,我们能够精确的定位数据项,并修改相应的数据。实例方法的增删改查都依赖此属性

代码示例

初始数据部分

  const app = getApp()
  const Pager = require('components/aotoo/core')  // 引入我们封装的Page库
  Pager({
    data: {
      motto: Pager.list({
        data: [
          {title: '文本描述内容1', tap: 'myaction', queryId: "1"},  // 会被自动补上treeid-1
          {title: '文本描述内容2', queryId: "2", attr: {id: "101", productId: '201'}},  // 会被自动补上treeid-2
          {title: '文本描述内容3', queryId: "3"},  // 会被自动补上treeid-3
          ...
          ...
        ],
        itemClass: 'list-class'
      }),
    },

    myaction: function(e, param){
      const currentTarget = e.currentTarger
      const dataset = currentTarget.dataset
      const treeid = dataset.treeid
      /* 其他操作 */
    }
  })

update

  const motto = Pager.getElementsById('motto')

  // 更新某项数据
  motto.update({
    'data[1].title': '新的描述内容1'
  })

  // 更新class
  motto.update({
    itemClass: 'new-list-class'
  })

  // 更新整个data数据
  motto.update([
    {title: 'data描述内容1'},
    {title: 'data描述内容2'},
    {title: 'data描述内容3'},
  ])

数据更新时,结构会同时更新

reset

接上例, motto数据已经被修改过,我们将数据恢复到初始状态

  motto.reset()

findIndex

  const index = motto.findIndex({queryId: '2'})
  log(index) // 1

find

  const data = motto.find({queryId: '2'})
  log(data) // {title: '文本描述内容2', queryId: "2"},

findAndUpdate

  motto.find({queryId: '2'}, function(data){
    // {title: '文本描述内容2', queryId: "2", __index: 1}
    data.title = "it's a text descript 2"
    return data  // 返回数据即完成了数据更新,不返回不更新
  })

attr

  const attr = motto.attr({queryId: '2'})
  log(attr)  // {id: "101", productId: '201'}

append

  motto.append({title: '文本描述内容4'})

prepend

  motto.prepend({title: '文本描述内容4', queryId: '4'})

delete

  motto.delete({queryId: '2'})

insert

  motto.insert({queryId: '2'}, {title: '插入数据-1', queryId: '7'})