添加grid-view示例

pages/component/grid-view/grid-view.test.js

+const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+const isMP = platformInfo.startsWith('mp')
+
+describe('component-native-grid-view', () => {
+  if (isMP) {
+  	it('skip mp', () => {
+  		expect(1).toBe(1)
+  	})
+  	return
+  }
+
+  let page
+  beforeAll(async () => {
+    //打开grid-view测试页
+    page = await program.reLaunch('/pages/component/grid-view/grid-view')
+    await page.waitFor(600)
+  })
+
+  //检测竖向scrolltop属性赋值
+  it('check_scroll_top', async () => {
+    await page.callMethod('confirm_scroll_top_input', 600)
+    await page.waitFor(600)
+    const listElement = await page.$('#gridview')
+    const scrollTop = await listElement.attribute("scrollTop")
+    console.log("check_scroll_top---"+scrollTop)
+    expect(scrollTop-600).toBeGreaterThanOrEqual(0)
+  })
+
+  it('Event check_scroll', async () => {
+    await page.callMethod('confirm_scroll_top_input', 300)
+    await page.waitFor(600)
+    const scrollDetail = await page.data('scrollDetailTest')
+    // console.log('scrollDetailTest:', scrollDetail)
+    expect(scrollDetail.scrollLeft).toBe(0)
+    // scrollTop和deltaY 在安卓端差异 299.8095
+    expect([300, 299.8095]).toContain(scrollDetail.scrollTop);
+    expect(scrollDetail.scrollHeight).toBeGreaterThan(0)
+    expect(scrollDetail.scrollWidth).toBeGreaterThan(0)
+    expect(scrollDetail.deltaX).toBe(0)
+    //此处可判断安卓issues:9121的问题
+    expect([300.1905, 300, 299.8095]).toContain(scrollDetail.deltaY);
+    expect(await page.data('isScrollTest')).toBe('scroll:Success')
+  })
+
+  it('Event scrolltolower-滚动到底部/右边',async()=>{
+    // 滚动到底部,是否触发scrolltolower事件
+    await page.callMethod('confirm_scroll_top_input', 2500)
+    await page.waitFor(600)
+    expect(await page.data('isScrolltolowerTest')).toBe('scrolltolower:Success-bottom')
+  })
+
+  it('Event scrolltoupper-滚动到顶部/左边',async()=>{
+    // 滚动到顶部50,是否触发scrolltoupper事件
+    await page.callMethod('confirm_scroll_top_input', 50)
+    await page.waitFor(1000)
+    expect(await page.data('isScrolltoupperTest')).toBe('scrolltoupper:Success-top')
+  })
+
+  it('Event scrollend-滚动结束时触发',async()=>{
+    // 仅App端支持,向上滑动页面
+    await program.swipe({
+      startPoint: { x: 100, y: 300 },
+      endPoint: { x: 100, y: 100 },
+      duration: 100
+    })
+    await page.waitFor(600)
+    const endDetail = await page.data('scrollEndDetailTest')
+    // console.log('scrollEndDetailTest:', endDetail)
+    expect(endDetail.deltaY).toBe(0)
+    expect(endDetail.deltaX).toBe(0)
+    expect(endDetail.scrollLeft).toBe(0)
+    expect(endDetail.scrollTop).toBeGreaterThan(0)
+    expect(endDetail.scrollHeight).toBeGreaterThan(0)
+    expect(endDetail.scrollWidth).toBeGreaterThan(0)
+  })
+
+  //检测竖向可滚动区域
+  it('check_scroll_height', async () => {
+    await page.waitFor(600)
+    const value = await page.callMethod('check_scroll_height')
+    expect(value).toBe(true)
+  })
+
+  // //检测下拉刷新 备注：iOS本地测试结果正确，但是自动化测试结果错误
+  it('check_refresher', async () => {
+    await page.callMethod('confirm_scroll_top_input', 0)
+    await page.setData({
+        refresher_enabled_boolean: true,
+        refresher_triggered_boolean: true
+    })
+    await page.waitFor(2000)
+    expect(await page.data('refresherrefresh')).toBe(true)
+    //延迟 等待下拉刷新执行结束 防止后续测试任务结果异常
+    await page.waitFor(1000)
+  })
+
+  //检测竖向scroll_into_view属性赋值 备注：iOS本地测试结果正确，但是自动化测试结果错误
+  it('check_scroll_into_view_top', async () => {
+    await page.callMethod('setScrollIntoView', 'item---3')
+    await page.waitFor(600)
+    const gridElement = await page.$('#gridview')
+    const scrollTop = await gridElement.attribute("scrollTop")
+    console.log("check_scroll_into_view_top--"+scrollTop)
+    await page.callMethod('setScrollIntoView', 'item---0')
+    expect(scrollTop-280).toBeGreaterThanOrEqual(0)
+  })
+
+  //检测grid-view属性变化 截图校验
+  it('check_grid_view_props', async () => {
+    await page.callMethod('testModifyGridViewProps')
+    await page.waitFor(600)
+    const image = await program.screenshot({fullPage: false});
+    expect(image).toSaveImageSnapshot();
+  })
+})

pages/component/grid-view/grid-view.uvue

+<script>
+  type ScrollEventTest = {
+    type : string;
+    target : UniElement | null;
+    currentTarget : UniElement | null;
+    direction ?: string
+  }
+  type gridItemData = {
+    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<gridItemData>,
+        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,
+        gridViewPadding: [10, 5, 10, 5] as Array<number>,
+        loadMore: true,
+        isLoadMore: true
+      }
+    },
+    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<gridItemData>
+    },
+    methods: {
+      grid_view_click() { console.log("组件被点击时触发") },
+      grid_view_touchstart() { console.log("手指触摸动作开始") },
+      grid_view_touchmove() { console.log("手指触摸后移动") },
+      grid_view_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
+      grid_view_touchend() { console.log("手指触摸动作结束") },
+      grid_view_tap() { console.log("手指触摸后马上离开") },
+      grid_view_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
+      grid_view_refresherpulling(e : RefresherEvent) {
+        console.log("下拉刷新控件被下拉")
+        if (this.reset) {
+          if (e.detail.dy > 45) {
+            this.state = 1
+          } else {
+            this.state = 0
+          }
+        }
+      },
+      grid_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)
+      },
+      grid_view_refresherrestore() {
+        this.refresherrefresh = false
+        this.state = 3
+        this.reset = true
+        console.log("下拉刷新被复位")
+      },
+      grid_view_refresherabort() { console.log("下拉刷新被中止") },
+      grid_view_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')
+      },
+      grid_view_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')
+      },
+      grid_view_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')
+      },
+      grid_view_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')
+      },
+      grid_item_click() { console.log("grid-item组件被点击时触发") },
+      grid_item_touchstart() { console.log("手指触摸grid-item组件动作开始") },
+      grid_item_touchmove() { console.log("手指触摸grid-item组件后移动") },
+      grid_item_touchcancel() { console.log("手指触摸grid-item组件动作被打断，如来电提醒，弹窗") },
+      grid_item_touchend() { console.log("手指触摸grid-item组件动作结束") },
+      grid_item_tap() { console.log("手指触摸grid-item组件后马上离开") },
+      grid_item_longpress() { console.log("grid-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["gridview"] as UniElement
+        console.log("check_scroll_height--" + listElement.scrollHeight)
+        if (listElement.scrollHeight > 1400) {
+          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"
+        }
+      },
+      change_load_more_boolean(checked : boolean) {
+        this.isLoadMore = checked
+      },
+      handleChangeCrossAxisCount(value : number) {
+        if (value < 2) {
+          uni.showToast({ title: "cross-axis-count 最小值为 2 请重新设置" })
+          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
+      },
+      //仅自动化测试调用
+      testModifyGridViewProps() {
+        this.cross_axis_count = 4
+        this.main_axis_gap = 6
+        this.cross_axis_gap = 6
+        this.gridViewPadding = [5, 10, 5, 10] as Array<number>
+      }
+    }
+  }
+</script>
+
+<template>
+  <view class="main">
+    <grid-view :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="grid_view_click" @touchstart="grid_view_touchstart" @touchmove="grid_view_touchmove"
+      @touchcancel="grid_view_touchcancel" @touchend="grid_view_touchend" @tap="grid_view_tap"
+      @longpress="grid_view_longpress" @refresherpulling="grid_view_refresherpulling"
+      @refresherrefresh="grid_view_refresherrefresh" @refresherrestore="grid_view_refresherrestore"
+      @refresherabort="grid_view_refresherabort" @scrolltoupper="grid_view_scrolltoupper" ref="gridview"
+      @scrolltolower="grid_view_scrolltolower" @scroll="grid_view_scroll" @scrollend="grid_view_scrollend"
+      style="width:100%; " id="gridview" :padding="gridViewPadding">
+
+      <grid-item v-for="(item, index) in scrollData" :key="index" :id="item.text" @click="grid_item_click"
+        :style="{'height' : item.height}" @touchstart="grid_item_touchstart" @touchmove="grid_item_touchmove"
+        @touchcancel="grid_item_touchcancel" @touchend="grid_item_touchend" @tap="grid_item_tap"
+        @longpress="grid_item_longpress" class="grid-item">
+        <text>{{item.text}}</text>
+      </grid-item>
+
+      <grid-item slot="refresher" id="refresher" type=2 class="refresh-box">
+        <text class="tip-text">{{text[state]}}</text>
+      </grid-item>
+      <grid-item v-show="isLoadMore" slot="load-more" id="loadmore" type="loadmore" class="load-more-box">
+        <text>加载更多</text>
+      </grid-item>
+    </grid-view>
+  </view>
+
+  <scroll-view style="flex:1" direction="vertical">
+    <view class="content">
+      <button @click="confirm_scroll_top_input(600)">设置top600</button>
+      <button @click="confirm_scroll_top_input(400)">设置top400</button>
+      <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>
+    </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;
+  }
+
+  .grid-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>

pages/component/list-view/list-view.test.js

@@ -164,12 +164,12 @@ describe('component-native-list-view', () => {
         await page.callMethod('change_scroll_y_boolean', false)
         await page.waitFor(600)
     }
-    await page.callMethod('item_change_size_enum', 3)
+    await page.callMethod('setScrollIntoView', "item---3")
     await page.waitFor(600)
     const listElement = await page.$('#listview')
     const scrollLeft = await listElement.attribute("scrollLeft")
     console.log("check_scroll_into_view_left--"+scrollLeft)
-    await page.callMethod('item_change_size_enum', 0)
+    await page.callMethod('setScrollIntoView', "item---0")
     expect(scrollLeft-1080).toBeGreaterThanOrEqual(0)
   })
 })

pages/component/list-view/list-view.uvue

@@ -151,6 +151,8 @@
       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;