EveryLike/pages/component/waterflow/waterflow.uvue

<script>
  type ScrollEventTest = {
    type : string;
    target : UniElement | null;
    currentTarget : UniElement | null;
    direction ?: string
  }
  type flowItemData = {
    height : number,
    text : string
  }
  import { ItemType } from '@/components/enum-data/enum-data-types'
  export default {
    data() {
      return {
        refresher_triggered_boolean: false,
        refresher_enabled_boolean: false,
        scroll_with_animation_boolean: false,
        show_scrollbar_boolean: false,
        bounces_boolean: true,
        upper_threshold_input: 50,
        lower_threshold_input: 50,
        scroll_top_input: 0,
        scroll_left_input: 0,
        refresher_background_input: "#FFF",
        scrollData: [] as Array<flowItemData>,
        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,
        // 自动化测试
        isScrollTest: '',
        isScrolltolowerTest: '',
        isScrolltoupperTest: '',
        scrollDetailTest: null as UniScrollEventDetail | null,
        scrollEndDetailTest: null as UniScrollEventDetail | null,
        cross_axis_count: 2,
        main_axis_gap: 2,
        cross_axis_gap: 2,
        waterflowPadding: [10, 5, 10, 5] as Array<number>,
        loadMore: true,
        isLoadMore: true,
        waterflow: null as UniElement | null
      }
    },
    onLoad() {
      //静态瀑布流数据
      this.scrollData = [
        { height: 300, text: "item---0" },
        { height: 150, text: "item---1" },
        { height: 120, text: "item---2" },
        { height: 100, text: "item---3" },
        { height: 100, text: "item---4" },
        { height: 150, text: "item---5" },
        { height: 140, text: "item---6" },
        { height: 190, text: "item---7" },
        { height: 160, text: "item---8" },
        { height: 120, text: "item---9" },
        { height: 109, text: "item---10" },
        { height: 102, text: "item---11" },
        { height: 123, text: "item---12" },
        { height: 156, text: "item---13" },
        { height: 177, text: "item---14" },
        { height: 105, text: "item---15" },
        { height: 110, text: "item---16" },
        { height: 90, text: "item---17" },
        { height: 130, text: "item---18" },
        { height: 140, text: "item---19" },
      ] as Array<flowItemData>
    },
    onReady() {
      // 组件ready时，获取组件实例
      this.waterflow = this.$refs["waterflow"] as UniElement
    },
    methods: {
      waterflow_click() { console.log("组件被点击时触发") },
      waterflow_touchstart() { console.log("手指触摸动作开始") },
      waterflow_touchmove() { console.log("手指触摸后移动") },
      waterflow_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
      waterflow_touchend() { console.log("手指触摸动作结束") },
      waterflow_tap() { console.log("手指触摸后马上离开") },
      waterflow_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
      waterflow_refresherpulling(e : RefresherEvent) {
        console.log("下拉刷新控件被下拉")
        if (this.reset) {
          if (e.detail.dy > 45) {
            this.state = 1
          } else {
            this.state = 0
          }
        }
      },
      waterflow_refresherrefresh() {
        console.log("下拉刷新被触发 ")
        this.refresherrefresh = true
        this.refresher_triggered_boolean = true
        this.state = 2
        this.reset = false;
        setTimeout(() => {
          this.refresher_triggered_boolean = false
        }, 1500)
      },
      waterflow_refresherrestore() {
        this.refresherrefresh = false
        this.state = 3
        this.reset = true
        console.log("下拉刷新被复位")
      },
      waterflow_refresherabort() { console.log("下拉刷新被中止") },
      waterflow_scrolltoupper(e : UniScrollToUpperEvent) {
        console.log("滚动到顶部/左边，会触发 scrolltoupper 事件  direction=" + e.detail.direction)
        this.checkEventTest({
          type: e.type,
          target: e.target,
          currentTarget: e.currentTarget,
          direction: e.detail.direction,
        } as ScrollEventTest, 'scrolltoupper')
      },
      waterflow_scrolltolower(e : UniScrollToLowerEvent) {
        console.log("滚动到底部/右边，会触发 scrolltolower 事件  direction=" + e.detail.direction)
        this.checkEventTest({
          type: e.type,
          target: e.target,
          currentTarget: e.currentTarget,
          direction: e.detail.direction,
        } as ScrollEventTest, 'scrolltolower')
      },
      waterflow_scroll(e : UniScrollEvent) {
        console.log("滚动时触发，event.detail = ", e.detail)
        this.scrollDetailTest = e.detail
        this.checkEventTest({
          type: e.type,
          target: e.target,
          currentTarget: e.currentTarget
        } as ScrollEventTest, 'scroll')
      },
      waterflow_scrollend(e : UniScrollEvent) {
        console.log("滚动结束时触发", e.detail)
        this.scrollEndDetailTest = e.detail
        this.checkEventTest({
          type: e.type,
          target: e.target,
          currentTarget: e.currentTarget
        } as ScrollEventTest, 'scrollend')
      },
      flow_item_click() { console.log("flow-item组件被点击时触发") },
      flow_item_touchstart() { console.log("手指触摸flow-item组件动作开始") },
      flow_item_touchmove() { console.log("手指触摸flow-item组件后移动") },
      flow_item_touchcancel() { console.log("手指触摸flow-item组件动作被打断，如来电提醒，弹窗") },
      flow_item_touchend() { console.log("手指触摸flow-item组件动作结束") },
      flow_item_tap() { console.log("手指触摸flow-item组件后马上离开") },
      flow_item_longpress() { console.log("flow-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 },
      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 },
      //自动化测试专用
      setScrollIntoView(id : string) { this.scrollIntoView = id },
      // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）
      checkEventTest(e : ScrollEventTest, eventName : String) {
        const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;
        const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;
        switch (eventName) {
          case 'scroll':
            this.isScrollTest = result
            break;
          case 'scrolltolower':
            this.isScrolltolowerTest = result + `-${e.direction}`
            break;
          case 'scrolltoupper':
            this.isScrolltoupperTest = result + `-${e.direction}`
            break;
          default:
            break;
        }
      },
      //自动化测试例专用
      check_scroll_height() : Boolean {
        var listElement = this.$refs["waterflow"] as UniElement
        console.log("check_scroll_height--" + listElement.scrollHeight)
        if (listElement.scrollHeight > 1400) {
          return true
        }
        return false
      },
      getScrollTop() : number {
        var ret = this.waterflow?.scrollTop ?? 0
        console.log(ret)
        return ret
      },
      change_refresher_style_boolean(checked : boolean) {
        if (checked) {
          this.refresher_default_style_input = "none"
        } else {
          this.refresher_default_style_input = "black"
        }
      },
      change_load_more_boolean(checked : boolean) {
        this.isLoadMore = checked
      },
      handleChangeCrossAxisCount(value : number) {
        if (value < 1) {
          uni.showToast({ title: "cross-axis-count 最小值为 1 请重新设置" })
          return
        }
        this.cross_axis_count = value
      },
      handleChangeCrossAxisGap(e : UniSliderChangeEvent) {
        this.cross_axis_gap = e.detail.value
      },
      handleChangeMainAxisGap(e : UniSliderChangeEvent) {
        this.main_axis_gap = e.detail.value
      },
      //仅自动化测试调用
      testModifyWaterflowProps() {
        this.cross_axis_count = 4
        this.main_axis_gap = 6
        this.cross_axis_gap = 6
        this.waterflowPadding = [5, 10, 5, 10] as Array<number>
      },
      //仅自动化测试调用
      testModifyWaterflowSingleRow() {
        this.cross_axis_count = 1
        this.main_axis_gap = 6
        this.cross_axis_gap = 6
      }

    }
  }
</script>

<template>
  <view class="main">
    <waterflow :cross-axis-count="cross_axis_count" :main-axis-gap="main_axis_gap" :cross-axis-gap="cross_axis_gap"
      :bounces="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="waterflow_click" @touchstart="waterflow_touchstart" @touchmove="waterflow_touchmove"
      @touchcancel="waterflow_touchcancel" @touchend="waterflow_touchend" @tap="waterflow_tap"
      @longpress="waterflow_longpress" @refresherpulling="waterflow_refresherpulling"
      @refresherrefresh="waterflow_refresherrefresh" @refresherrestore="waterflow_refresherrestore"
      @refresherabort="waterflow_refresherabort" @scrolltoupper="waterflow_scrolltoupper" ref="waterflow"
      @scrolltolower="waterflow_scrolltolower" @scroll="waterflow_scroll" @scrollend="waterflow_scrollend"
      style="width:100%; " id="waterflow" :padding="waterflowPadding">

      <flow-item v-for="(item, index) in scrollData" :key="index" :id="item.text" @click="flow_item_click"
        :style="{'height' : item.height}" @touchstart="flow_item_touchstart" @touchmove="flow_item_touchmove"
        @touchcancel="flow_item_touchcancel" @touchend="flow_item_touchend" @tap="flow_item_tap"
        @longpress="flow_item_longpress" class="flow-item" type=1>
        <text>{{item.text}}</text>
      </flow-item>

      <flow-item slot="refresher" id="refresher" type=2 class="refresh-box">
        <text class="tip-text">{{text[state]}}</text>
      </flow-item>
      <flow-item v-show="isLoadMore" slot="load-more" id="loadmore" type=6 class="load-more-box">
        <text>加载更多</text>
      </flow-item>
    </waterflow>
  </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_load_more_boolean"></boolean-data>
      <input-data defaultValue="2" title="设置cross-axis-count，触发 scrolltoupper 事件" type="number"
        @confirm="handleChangeCrossAxisCount"></input-data>
      <view class="uni-slider uni-list-cell-padding">
        <text>拖动设置cross-axis-gap</text>
      </view>
      <view class="uni-slider uni-list-cell-padding">
        <slider :max="20" :min="0" :step="1" :value="cross_axis_gap" :show-value="true"
          @change="handleChangeCrossAxisGap" />
      </view>
      <view class="uni-slider uni-list-cell-padding">
        <text>拖动设置main-axis-gap</text>
      </view>
      <view class="uni-slider uni-list-cell-padding">
        <slider :max="20" :min="0" :step="1" :value="main_axis_gap" :show-value="true"
          @change="handleChangeMainAxisGap" />
      </view>
      <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="#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/waterflow/waterflow-fit-height">
        <button type="primary" class="button">
          item高度自适应
        </button>
      </navigator>
    </view>
  </scroll-view>
</template>

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

  .flow-item {
    width: 100%;
    height: 200px;
    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%;
  }

  .load-more-box {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 45px;
    width: 100%;
    border-style: solid;
  }

  .button {
    margin-top: 15px;
  }
</style>