section-list（1090+）

概述

分组列表容器。

使用限制

子组件

仅支持<section-group>和<section-item>组件。

属性

支持通用属性。

样式

支持通用样式。

事件

除了支持通用事件以外，还支持如下事件。

方法

scrollTo的参数说明：

示例代码

<template>
  <div class="wrapper">
    <section-list id="list" class="list" onscroll="scrollListener"
      onscrollbottom="scrollbottomlistener" onscrolltop="scrolltoplistener"
      onscrolltouchup="scrolltouchuplistener" onscrollend="scrollendlistener">

      <section-item class="{{styleFruit}}" for="fruitList">
        <text class="white-text">{{$item}}</text>
      </section-item>

      <section-group id="group-carnivores" expand={{isCarnivoresExpanded}}
        onchange=changeCarnivoresListener>
        <section-header class="header">
          <text class="black-text">Carnivores</text>
        </section-header>
        <section-item class="item-animal" for="carnivores">
          <text class="black-text">{{$item}}</text>
        </section-item>
      </section-group>

      <section-group id="group-herbivores" expand={{isHerbivoresExpanded}}
        onchange=changeHerbivoresListener>
        <section-header class="header">
          <text class="black-text">Herbivores</text>
        </section-header>
        <section-item class="item-animal" for="herbivores">
          <text class="black-text">{{$item}}</text>
        </section-item>
      </section-group>

    </section-list>

    <div class="container-buttons">
      <input type="number" placeholder="Enter index" class="edit-number" value="{{scrollIndex}}" onchange="updateValue"/>
      <input type="button" value="Smooth Scroll" class="button" onclick="smoothScroll"></input>
      <input type="button" value="Instant Scroll" class="button" onclick="instantScroll"></input>
    </div>

    <div class="container-buttons">
      <input type="number" placeholder="Enter index" class="edit-number" value="{{groupScrollIndex}}" onchange="updateGroupValue"/>
      <input type="button" value="Scroll in Carnivores" class="button" onclick="scrollInCarnivores"></input>
      <input type="button" value="Scroll in Herbivores" class="button" onclick="scrollInHerbivores"></input>
    </div>

    <div class="container-buttons">
      <input type="button" value="Expand Carnivores" class="button" onclick="expandCarnivores"></input>
      <input type="button" value="Expand Herbivores" class="button" onclick="expandHerbivores"></input>
    </div>

    <div class="container-buttons">
      <input type="button" value="Add Fruit" class="button" onclick="addFruit"></input>
      <input type="button" value="Remove Fruit" class="button" onclick="removeFruit"></input>
      <input type="button" value="Change Fruit Color" class="button" onclick="changeFruitColor"></input>
    </div>
  </div>
</template>

<script>
export default {
  private: {
    fruitList: ["Plum", "Grapes", "Orange", "Grapefruit", "Peach", "Apricot"],
    fruitsToAdd: ["Apple", "Pear", "Banana", "Grape", "Cranberry", "Kiwi"],
    carnivores: ["Lion", "Shark", "Crocodile", "Wolf"],
    herbivores: ["Sheep", "Tortoise", "Rabbit", "Camel"],
    isCarnivoresExpanded:false,
    isHerbivoresExpanded:false,
    styleFruit:'item-fruit',
    scrollIndex:0,
    groupScrollIndex:0
  },
  scrollListener:function (data) {
    console.log(
      "scrollX: " + data.scrollX +
      "\nscrollY: " + data.scrollY +
      "\nscrollState: " + data.scrollState
    );
  },
  scrollbottomlistener:function () {
    console.log("scrolled till bottom");
  },
  scrolltoplistener:function () {
    console.log("scrolled till top");
  },
  scrolltouchuplistener:function () {
    console.log("user lifted finger while scrolling");
  },
  scrollendlistener:function () {
    console.log("scrolling ended");
  },
  changeCarnivoresListener:function (data) {
    this.isCarnivoresExpanded = data.state === 1 ? false : true
    if (this.isCarnivoresExpanded) {
      console.log('Carnivores are expanded.')
    } else {
      console.log('Carnivores are collapsed.')
    }
  },
  changeHerbivoresListener:function (data) {
    this.isHerbivoresExpanded = data.state === 1 ? false : true
    if (this.isHerbivoresExpanded) {
      console.log('Herbivores are expanded.')
    } else {
      console.log('Herbivores are collapsed.')
    }
  },
  updateValue:function ({value}) {
    this.scrollIndex = Number(value);
  },
  updateGroupValue:function ({value}) {
    this.groupScrollIndex = Number(value);
  },
  smoothScroll() {
    this.$element("list").scrollTo({
      index:this.scrollIndex,
      behavior:"smooth"
    });
  },
  instantScroll() {
    this.$element("list").scrollTo({
      index:this.scrollIndex,
      behavior:"instant"
    });
  },
  scrollInCarnivores() {
    this.$element("group-carnivores").scrollTo({
      index:this.groupScrollIndex,
      behavior:"instant"
    })
  },
  scrollInHerbivores() {
    this.$element("group-herbivores").scrollTo({
      index:this.groupScrollIndex,
      behavior:"smooth"
    })
  },
  expandCarnivores() {
    let that = this
    this.$element("group-carnivores").expand({ expand: !that.isCarnivoresExpanded })
  },
  expandHerbivores() {
    let that = this
    this.$element("group-herbivores").expand({ expand: !that.isHerbivoresExpanded })
  },
  addFruit() {
    var fruit = this.fruitsToAdd[Math.floor(Math.random()*this.fruitsToAdd.length)]
    this.fruitList.push(fruit)
  },
  removeFruit() {
    this.fruitList.pop()
  },
  changeFruitColor() {
    this.styleFruit === 'item-fruit' ? this.styleFruit = 'item-fruit2' : this.styleFruit = 'item-fruit'
  }
}
</script>
<style>
  .wrapper {
    flex-direction: column;
    background-color: #808080;
    justify-content: center;
    align-items: center;
  }
  .list {
    width: 600px;
    height: 800px;
    padding: 8px;
    background-color: #f5deb3;
    border: 4px solid #000000;
    border-radius: 8px;
  }
  .header {
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
    background-color: #afeeee;
    border: 4px solid #000000;
  }
  .item-fruit {
    width: 100%;
    height: 150px;
    margin-bottom: 4px;
    justify-content: center;
    align-items: center;
    background-color: #000080;
  }
  .item-fruit2 {
    width: 100%;
    height: 150px;
    margin-bottom: 4px;
    justify-content: center;
    align-items: center;
    background-color: #90e0e0;
  }
  .item-animal {
    width: 100%;
    height: 150px;
    justify-content: center;
    align-items: center;
    background-color: #b880b8;
    border: 2px solid #004000;
    border-radius: 8px;
  }
  .container-buttons {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .black-text {
    color: #0f0800;
    font-weight: 500;
    font-size: 32px;
  }
  .white-text {
    color: #f0f8ff;
    font-weight: 500;
    font-size: 32px;
  }
  .edit-number {
    height: 64px;
    text-align: center;
    margin: 4px;
    background-color: #ffd700;
    font-size: 28px;
    font-weight: 500;
  }
  .button {
    width: 30%;
    height: 64px;
    margin: 8px;
    background-color: #ffdead;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
  }
</style>

版本更新说明