快应用

Appearance

ul/li ​

竖向ul ​

效果预览 ​

core_component_ul_portrait.gif

示例代码 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <title class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <ul ref="list_view"
          :clipChildren="true"
          class="es-portrait-list-view-css">
        <li v-for="(item, index) in list"
            :clipChildren="false"
            :key="index"
            :type="item.type">
          <es-li-text
            :ref="'es_li_item_' + index"
            :text="item.title"/>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {ESPage} from "@extscreen/es-core";
import es_li_text from './item/es-li-text'
import list from "@/components/es-base/list/data/ListData";

export default {
  name: "竖向ul",
  mixins: [ESPage],
  props: {
    list: {
      type: Array,
      default: list
    },
  },
  data() {
    return {};
  },
  components: {
    'es-li-text': es_li_text,
  }
}
</script>

<style>

.es-portrait-list-view-css {
  background-color: darkgray;
  height: 900px;
  align-items: center;
  justify-content: center;
}

</style>

横向ul ​

效果预览 ​

core_component_ul_landscape.gif

示例代码 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <title class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <ul ref="list_view"
          class="es-landscape-list-view-css"
          :clipChildren="false"
          :horizontal="true">
        <li v-for="(item, index) in list"
            :clipChildren="false"
            :key="index"
            :type="item.type">
          <es-li-text
            :ref="'es_li_item_' + index"
            :text="item.title"/>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {ESPage} from "@extscreen/es-core";
import es_li_text from './item/es-li-text'
import list from "@/components/es-base/list/data/ListData";

export default {
  name: "横向ul",
  mixins: [ESPage],
  props: {
    list: {
      type: Array,
      default: list
    },
  },
  data() {
    return {};
  },
  components: {
    'es-li-text': es_li_text,
  }
}
</script>

<style>

.es-landscape-list-view-css {
  background-color: darkgray;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

</style>

绑定事件 ​

效果预览 ​

core_component_ul_bind.gif

示例代码 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <title class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <ul ref="list_view"
          :clipChildren="true"
          @bindItem="onBindItem"
          @unbindItem="onUnBindItem"
          :listenBoundEvent="true"
          class="es-bind-list-view-css">
        <li v-for="(item, index) in list"
            :clipChildren="false"
            :key="index"
            :type="item.type">
          <es-li-bind
            :ref="'es_li_item_' + index"
            :text="item.title"/>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {ESPage} from "@extscreen/es-core";
import es_li_bind from './item/es-li-bind'
import list from "@/components/es-base/list/data/ListData";
import {ESLog} from "@extscreen/es-log";

const TAG = 'ListBindItem'

export default {
  name: "绑定事件",
  mixins: [ESPage],
  props: {
    list: {
      type: Array,
      default: list
    },
  },
  data() {
    return {};
  },
  methods: {
    onBindItem(e) {
      let i = e.position;
      if (ESLog.isLoggable(ESLog.DEBUG)) {
        ESLog.d(TAG, "-----onBindItem------>>>" + i)
      }
      let item = this.$refs['es_li_item_' + i]
      if (item && item[0]) {
        item[0].bindItem();
      }
    },
    onUnBindItem(e) {
      let i = e.position;
      if (ESLog.isLoggable(ESLog.DEBUG)) {
        ESLog.d(TAG, "-----onUnBindItem------>>>" + i)
      }
      let item = this.$refs['es_li_item_' + i]
      if (item && item[0]) {
        item[0].unbindItem();
      }
    },
  },
  components: {
    'es-li-bind': es_li_bind,
  }
}
</script>

<style>

.es-bind-list-view-css {
  background-color: darkgray;
  height: 900px;
  align-items: center;
  justify-content: center;
}

</style>

延迟绑定事件 ​

效果预览 ​

core_component_ul_lazy_bind.gif

示例代码 ​

es-li-lazy-bind.vue

点击查看源码
vue
<template>
  <div class="es-li-text-root-css"
       :focusable="true"
       :enableFocusBorder="true"
       :focusScale="1.1">
    <p v-if="isItemBind" duplicateParentState class="es-li-text-css">{{ itemText }}</p>
  </div>
</template>

<script>
export default {
  name: "es-li-lazy-bind",
  props: {
    text: {
      type: String,
      default: '',
    },
    lazyBindTime: {
      type: Number,
      default: 1000
    },
  },
  data() {
    return {
      isItemBind: false,
      count: 0,
      itemText: '',
      lazyBindItemTimer: null
    };
  },
  methods: {
    onFocus(e) {
      this.$emit("onItemFocused", e.isFocused);
    },
    onClick(e) {
      this.$emit("onItemClicked");
    },
    bindItem() {
      this.startLazyBindItemTimer();
    },
    unbindItem() {
      this.cancelLazyBindItemTimer();
      this.isItemBind = false;
    },
    startLazyBindItemTimer() {
      this.cancelLazyBindItemTimer();
      this.lazyBindItemTimer = setTimeout(() => {
        if (!this.isItemBind) {
          this.count++;
          this.itemText = this.text + '  绑定次数:' + this.count;
          this.isItemBind = true;
        }
      }, this.lazyBindTime)
    },
    cancelLazyBindItemTimer() {
      if (this.lazyBindItemTimer) {
        clearTimeout(this.lazyBindItemTimer)
      }
    }
  },
}
</script>

<style scoped>
.es-li-text-root-css {
  width: 250px;
  height: 80px;
  margin: 20px;
  border-style: solid;
  border-color: #40b883;
  border-width: 2px;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  focus-background-color: #40b883;
}

.es-li-text-css {
  width: 250px;
  height: 80px;
  font-size: 25px;
  color: #40b883;
  text-align: center;
  text-align-vertical: center;
  focus-color: #fff;
}
</style>

es-core-ul-lazy-bind-page.vue

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <title class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <ul ref="list_view"
          :clipChildren="true"
          @bindItem="onBindItem"
          @unbindItem="onUnBindItem"
          :listenBoundEvent="true"
          class="es-bind-list-view-css">
        <li v-for="(item, index) in list"
            :clipChildren="false"
            :key="index"
            :type="item.type">
          <es-li-lazy-bind
            :ref="'es_li_item_' + index"
            :text="item.title"
            :lazy-bind-time="(index * 200)"/>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {ESPage} from "@extscreen/es-core";
import es_li_lazy_bind from './item/es-li-lazy-bind'
import list from "@/components/es-base/list/data/ListData";
import {ESLog} from "@extscreen/es-log";

const TAG = 'ListBindItem'

export default {
  name: "延迟绑定事件",
  mixins: [ESPage],
  props: {
    list: {
      type: Array,
      default: list
    },
  },
  data() {
    return {};
  },
  methods: {
    onBindItem(e) {
      let i = e.position;
      if (ESLog.isLoggable(ESLog.DEBUG)) {
        ESLog.d(TAG, "-----onBindItem------>>>" + i)
      }
      let item = this.$refs['es_li_item_' + i]
      if (item && item[0]) {
        item[0].bindItem();
      }
    },
    onUnBindItem(e) {
      let i = e.position;
      if (ESLog.isLoggable(ESLog.DEBUG)) {
        ESLog.d(TAG, "-----onUnBindItem------>>>" + i)
      }
      let item = this.$refs['es_li_item_' + i]
      if (item && item[0]) {
        item[0].unbindItem();
      }
    },
  },
  components: {
    'es-li-lazy-bind': es_li_lazy_bind,
  }
}
</script>

<style>

.es-bind-list-view-css {
  background-color: darkgray;
  height: 900px;
  align-items: center;
  justify-content: center;
}

</style>

请求焦点 ​

效果预览 ​

core_component_ul_focus.gif

示例代码 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <title class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <text-button text="请求第二个item焦点" @onButtonClicked="requestItemFocus"/>
    </div>
    <div class="es-sdk-content-row-css">
      <ul ref="list_view"
          class="es-landscape-list-view-css"
          :clipChildren="false"
          :horizontal="true">
        <li v-for="(item, index) in list"
            :clipChildren="false"
            :key="index"
            :type="item.type">
          <es-li-text
            :ref="'es_li_item_' + index"
            :text="item.title"/>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {ESPage} from "@extscreen/es-core";
import es_li_text from './item/es-li-text'
import list from "@/components/es-base/list/data/ListData";
import Vue from "vue";

export default {
  name: "请求焦点",
  mixins: [ESPage],
  props: {
    list: {
      type: Array,
      default: list
    },
  },
  data() {
    return {};
  },
  methods: {
    requestItemFocus() {
      Vue.Native.callUIFunction(this.$refs.list_view, 'requestChildFocus', [1]);
    },
  },
  components: {
    'es-li-text': es_li_text,
  }
}
</script>

<style>

.es-landscape-list-view-css {
  background-color: darkgray;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

</style>

滚动 ​

效果预览 ​

core_component_ul_scroll.gif

示例代码 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <title class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-row-css">
      <text-button text="滚动到第八个item" @onButtonClicked="scrollItemToIndex"/>
    </div>
    <div class="es-sdk-content-row-css">
      <ul ref="list_view"
          class="es-landscape-list-view-css"
          :clipChildren="false"
          :horizontal="true">
        <li v-for="(item, index) in list"
            :clipChildren="false"
            :key="index"
            :type="item.type">
          <es-li-text
            :ref="'es_li_item_' + index"
            :text="item.title"/>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {ESPage} from "@extscreen/es-core";
import es_li_text from './item/es-li-text'
import list from "@/components/es-base/list/data/ListData";
import Vue from "vue";

export default {
  name: "滚动",
  mixins: [ESPage],
  props: {
    list: {
      type: Array,
      default: list
    },
  },
  data() {
    return {};
  },
  methods: {
    scrollItemToIndex() {
      Vue.Native.callUIFunction(this.$refs.list_view, 'scrollToIndex', [0, 7, false, 0, 0]);
    },
  },
  components: {
    'es-li-text': es_li_text,
  }
}
</script>

<style>

.es-landscape-list-view-css {
  background-color: darkgray;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

</style>