list-view.uvue

<script>
  import { ItemType } from '@/components/enum-data/enum-data'
  export default {
    data() {
      return {
        refresher_triggered_boolean: false,
        refresher_enabled_boolean: false,
        scroll_with_animation_boolean: false,
        show_scrollbar_boolean: false,
        bounces_boolean: true,
        scroll_y_boolean: true,
        scroll_x_boolean: false,
        scroll_direction: "vertical",
        upper_threshold_input: 50,
        lower_threshold_input: 50,
        scroll_top_input: 0,
        scroll_left_input: 0,
        refresher_background_input: "#FFF",
        scrollData: [] as Array<string>,
        size_enum: [{ "value": 0, "name": "item---0" }, { "value": 3, "name": "item---3" }] as ItemType[],
        scrollIntoView: "",
        refresherrefresh: false,
        refresher_default_style_input: "black",
        text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', ""],
        state: 3,
        reset: true
      }
    },
    onLoad() {
      let lists : Array<string> = []
      for (let i = 0; i < 10; i++) {
        lists.push("item---" + i)
      }
      this.scrollData = lists
    },
    methods: {
      list_view_click() { console.log("组件被点击时触发") },
      list_view_touchstart() { console.log("手指触摸动作开始") },
      list_view_touchmove() { console.log("手指触摸后移动") },
      list_view_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
      list_view_touchend() { console.log("手指触摸动作结束") },
      list_view_tap() { console.log("手指触摸后马上离开") },
      list_view_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
      list_view_refresherpulling(e : RefresherEvent) {
        console.log("下拉刷新控件被下拉")
        if(this.reset) {
        	if(e.detail.dy > 45) {
        		this.state = 1
        	} else {
        		this.state = 0
        	}
        }
      },
      list_view_refresherrefresh() {
        console.log("下拉刷新被触发 ")
        this.refresherrefresh = true
        this.refresher_triggered_boolean = true
        this.state = 2
        this.reset = false;
        setTimeout(() => {
        	this.refresher_triggered_boolean = false
        }, 1500)
      },
      list_view_refresherrestore() {
        this.refresherrefresh = false
        this.state = 3
        this.reset = true
        console.log("下拉刷新被复位")
      },
      list_view_refresherabort() { console.log("下拉刷新被中止") },
      list_view_scrolltoupper(e:ScrollToUpperEvent) { console.log("滚动到顶部/左边，会触发 scrolltoupper 事件  direction="+e.detail.direction) },
      list_view_scrolltolower(e:ScrollToLowerEvent) { console.log("滚动到底部/右边，会触发 scrolltolower 事件  direction="+e.detail.direction) },
      list_view_scroll() { console.log("滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}") },
      list_item_click() { console.log("list-item组件被点击时触发") },
      list_item_touchstart() { console.log("手指触摸list-item组件动作开始") },
      list_item_touchmove() { console.log("手指触摸list-item组件后移动") },
      list_item_touchcancel() { console.log("手指触摸list-item组件动作被打断，如来电提醒，弹窗") },
      list_item_touchend() { console.log("手指触摸list-item组件动作结束") },
      list_item_tap() { console.log("手指触摸list-item组件后马上离开") },
      list_item_longpress() { console.log("list-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
      change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },
      change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },
      change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },
      change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },
      change_bounces_boolean(checked : boolean) { this.bounces_boolean = checked },
      change_scroll_y_boolean(checked : boolean) {
        this.scroll_y_boolean = checked
        this.change_scroll_direction()
      },
      change_scroll_x_boolean(checked : boolean) {
        this.scroll_x_boolean = checked
        this.change_scroll_direction()
      },
      change_scroll_direction() {
        if(this.scroll_y_boolean && this.scroll_x_boolean || this.scroll_y_boolean) {
          this.scroll_direction = "vertical"
        } else if(!this.scroll_y_boolean && !this.scroll_x_boolean) {
          this.scroll_direction = "none"
        } else if(!this.scroll_y_boolean && this.scroll_x_boolean){
          this.scroll_direction = "horizontal"
        }
      },
      confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },
      confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },
      confirm_scroll_top_input(value : number) { this.scroll_top_input = value },
      confirm_scroll_left_input(value : number) { this.scroll_left_input = value },
      confirm_refresher_background_input(value : string) { this.refresher_background_input = value },
      item_change_size_enum(index : number) { this.scrollIntoView = "item---"+index },
      //自动化测试例专用
      check_scroll_height(): Boolean {
        var listElement = this.$refs["listview"] as Element
        console.log("check_scroll_height--"+listElement.scrollHeight)
        if(listElement.scrollHeight > 2000) {
          return true
        }
        return false
      },
      //自动化测试例专用
      check_scroll_width(): Boolean {
        var listElement = this.$refs["listview"] as Element
        console.log("check_scroll_width"+listElement.scrollWidth)
        if(listElement.scrollWidth > 2000) {
          return true
        }
        return false
      },
      change_refresher_style_boolean(checked : boolean) {
        if(checked) {
          this.refresher_default_style_input = "none"
        } else {
          this.refresher_default_style_input = "black"
        }
      }
    }
  }
</script>

<template>
  <view class="main">
    <list-view :direction="scroll_direction" :rebound="bounces_boolean"
      :upper-threshold="upper_threshold_input" :lower-threshold="lower_threshold_input" :scroll-top="scroll_top_input"
      :scroll-left="scroll_left_input" :show-scrollbar="show_scrollbar_boolean" :scroll-into-view="scrollIntoView"
      :scroll-with-animation="scroll_with_animation_boolean" :refresher-enabled="refresher_enabled_boolean"
      :refresher-background="refresher_background_input" :refresher-triggered="refresher_triggered_boolean"
      :refresher-default-style="refresher_default_style_input"
      @click="list_view_click" @touchstart="list_view_touchstart" @touchmove="list_view_touchmove"
      @touchcancel="list_view_touchcancel" @touchend="list_view_touchend" @tap="list_view_tap"
      @longpress="list_view_longpress" @refresherpulling="list_view_refresherpulling"
      @refresherrefresh="list_view_refresherrefresh" @refresherrestore="list_view_refresherrestore"
      @refresherabort="list_view_refresherabort" @scrolltoupper="list_view_scrolltoupper" ref="listview"
      @scrolltolower="list_view_scrolltolower" @scroll="list_view_scroll" style="width:100%;" id="listview">
      <list-item
        v-for="key in scrollData" :key="key" :id="key" @click="list_item_click" @touchstart="list_item_touchstart"
        @touchmove="list_item_touchmove" @touchcancel="list_item_touchcancel" @touchend="list_item_touchend"
        @tap="list_item_tap" @longpress="list_item_longpress"
        class="list-item">
        <text>{{key}}</text>
      </list-item>
      <list-item slot="refresher" class="refresh-box">
        <text class="tip-text">{{text[state]}}</text>
      </list-item>
    </list-view>
  </view>

  <scroll-view style="flex:1" direction="vertical">
    <view class="content">
      <boolean-data :defaultValue="false" title="设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发"
        @change="change_refresher_triggered_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="开启下拉刷新" @change="change_refresher_enabled_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="开启自定义样式" @change="change_refresher_style_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画"
        @change="change_scroll_with_animation_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="控制是否出现滚动条" @change="change_show_scrollbar_boolean"></boolean-data>
      <boolean-data :defaultValue="true" title="控制是否回弹效果" @change="change_bounces_boolean"></boolean-data>
      <boolean-data :defaultValue="true" title="允许纵向滚动" @change="change_scroll_y_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="允许横向滚动" @change="change_scroll_x_boolean"></boolean-data>
      <input-data defaultValue="50" title="距顶部/左边多远时（单位px），触发 scrolltoupper 事件" type="number"
        @confirm="confirm_upper_threshold_input"></input-data>
      <input-data defaultValue="50" title="距底部/右边多远时（单位px），触发 scrolltolower 事件" type="number"
        @confirm="confirm_lower_threshold_input"></input-data>
      <input-data defaultValue="0" title="设置竖向滚动条位置" type="number" @confirm="confirm_scroll_top_input"></input-data>
      <input-data defaultValue="0" title="设置横向滚动条位置" type="number" @confirm="confirm_scroll_left_input"></input-data>
      <input-data defaultValue="#FFF" title="设置下拉刷新区域背景颜色" type="text"
        @confirm="confirm_refresher_background_input"></input-data>
      <enum-data :items="size_enum" title="通过id位置跳转" @change="item_change_size_enum"></enum-data>


      <navigator url="/pages/component/list-view/list-view-multiplex" hover-class="none">
        <button type="primary" class="button">
          list-view 对list-item复用测试
        </button>
      </navigator>
    </view>
  </scroll-view>
</template>

<style>
  .main {
    max-height: 500rpx;
    padding: 10rpx 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    flex-direction: row;
    justify-content: center;
  }

  .main .list-item {
    width: 750rpx;
    height: 480rpx;
    border: 1px solid #666;
    background-color: #66ccff;
    align-items: center;
    justify-content: center;
  }

  .tip-text {
  	color: #888;
  	font-size: 12px;
  }

  .refresh-box {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 45px;
    width: 100%;
  }

  .button {
  	margin-top: 30rpx;
  }
</style>