feat(list-view): 补充示例及测试 issue:13869

pages.json

@@ -130,6 +130,14 @@
 		},
 		// #endif
 		// #ifdef APP-ANDROID || APP-IOS || WEB
+		{
+			"path": "pages/component/list-view/list-view-children-if-show",
+			"style": {
+				"navigationBarTitleText": "list-item v-if & v-show"
+			}
+		},
+		// #endif
+		// #ifdef APP-ANDROID || APP-IOS || WEB
 		{
 			"path": "pages/component/sticky-section/sticky-section",
 			"group": "0,1,8,1",

pages/component/list-view/list-view-children-if-show.test.js

+const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+const isMP = platformInfo.startsWith('mp')
+
+describe('list-view-children-if-show', () => {
+  if (isMP) {
+  	it('skip mp', () => {
+  		expect(1).toBe(1)
+  	})
+  	return
+  }
+
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/component/list-view/list-view-children-if-show')
+    await page.waitFor('list-view')
+    await page.waitFor(300)
+  })
+
+  it('basic', async () => {
+    const listViews = await page.$$('list-view')
+    expect(listViews.length).toBe(1)
+
+    let toggleChildrenShowBtn = await page.$$('#toggle-children-show-btn')
+    expect(toggleChildrenShowBtn.length).toBe(3)
+
+    let listItemChildren = await page.$$('#list-item-child')
+    expect(listItemChildren.length).toBe(3)
+
+    await toggleChildrenShowBtn[0].tap()
+    listItemChildren = await page.$$('#list-item-child')
+    expect(listItemChildren.length).toBe(0)
+    await page.waitFor(300)
+    await toggleChildrenShowBtn[0].tap()
+    await page.waitFor(300)
+    listItemChildren = await page.$$('#list-item-child')
+    expect(listItemChildren.length).toBe(3)
+
+    const clearBtn = await page.$('#clear-btn')
+    await clearBtn.tap()
+
+    toggleChildrenShowBtn = await page.$$('#toggle-children-show-btn')
+    expect(toggleChildrenShowBtn.length).toBe(0)
+    listItemChildren = await page.$$('#list-item-child')
+    expect(listItemChildren.length).toBe(0)
+
+    const initBtn = await page.$('#init-btn')
+    await initBtn.tap()
+    await page.waitFor(300)
+
+    toggleChildrenShowBtn = await page.$$('#toggle-children-show-btn')
+    expect(toggleChildrenShowBtn.length).toBe(3)
+    listItemChildren = await page.$$('#list-item-child')
+    expect(listItemChildren.length).toBe(3)
+  })
+})

pages/component/list-view/list-view-children-if-show.uvue

+<template>
+  <view class="p-10">
+    <button id="init-btn" class="uni-btn" @click="init">init</button>
+    <button id="clear-btn" class="uni-btn" @click="clear">clear</button>
+    <view
+      class="uni-common-mt list-view-container"
+      :class="{ ' p-10': list.length > 0 }"
+    >
+      <list-view>
+        <template v-for="(item, index) in list">
+          <list-item
+						id="toggle-children-show-btn"
+            :class="{ 'uni-common-mt': index > 0 }"
+            @click="toggleChildrenShow(item.id)"
+          >
+            <text>toggle children isShow</text>
+          </list-item>
+          <template v-if="expandIds.includes(item.id)">
+            <template v-for="child in item.children">
+              <list-item id="list-item-child" class="mt-5">
+                <text>{{ child.id }}</text>
+              </list-item>
+            </template>
+          </template>
+        </template>
+      </list-view>
+    </view>
+  </view>
+</template>
+
+<script>
+type Child = {
+	id: string
+}
+type List = {
+	id: string
+	children: Child[]
+}
+
+export default {
+	data(){
+		return {
+			list: [] as List[],
+			expandIds: [] as string[],
+		}
+	},
+	onLoad() {
+		this.init()
+	},
+	methods: {
+		init(){
+			this.list = [
+				{id:'1', children: [{ id: '1-1'},{ id: '1-2'},{ id: '1-3'}]},
+				{id:'2', children: [{ id: '2-1'},{ id: '2-2'},{ id: '2-3'}]},
+				{id:'3', children: [{ id: '3-1'},{ id: '3-2'},{ id: '3-3'}]},
+			] as List[]
+
+			this.expandIds = [this.list[0].id]
+		},
+		clear(){
+			this.list = [] as List[]
+			this.expandIds = [] as string[]
+		},
+		toggleChildrenShow(id: string){
+			const index = this.expandIds.findIndex((item) => item == id)
+			if(index == -1) {
+				this.expandIds.push(id)
+			} else {
+				this.expandIds.splice(index, 1)
+			}
+		},
+	}
+}
+</script>
+
+<style>
+.p-10 {
+  padding: 10px;
+}
+.list-view-container {
+  background-color: #fff;
+}
+.mt-5 {
+  margin-top: 5px;
+}
+</style>

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

@@ -276,10 +276,15 @@
           list-view 复用测试（item中嵌入video）
         </button>
       </navigator>
-      <navigator url="/pages/component/list-view/list-view-children-in-slot">
-        <button type="primary" class="button">
-          list-view 测试插槽中子组件增删
-        </button>
+      <navigator url="/pages/component/list-view/list-view-children-in-slot">
+        <button type="primary" class="button">
+          list-view 测试插槽中子组件增删
+        </button>
+      </navigator>
+      <navigator url="/pages/component/list-view/list-view-children-if-show">
+        <button type="primary" class="button">
+          list-item v-if v-show 组合增删
+        </button>
       </navigator>
     </view>
   </scroll-view>