提交 a4737498 编写于 作者: shutao-dc's avatar shutao-dc

long-list2.nvue 添加 nested-scroll-child

上级 49d1183c
<template> <template>
<list-view ref="listView" class="list" :rebound="false" :scroll-y="true" :custom-nested-scroll="true" <list-view ref="listView" :id=id class="list" :rebound="false" :scroll-y="true" :custom-nested-scroll="true"
@scrolltolower="loadData(null)"> @scrolltolower="loadData(null)">
<list-item class="list-item" v-for="(item, _) in dataList" :key="item.plugin_id"> <list-item class="list-item" v-for="(item, _) in dataList" :key="item.plugin_id">
<view class="list-item-icon"> <view class="list-item-icon">
...@@ -60,6 +60,10 @@ ...@@ -60,6 +60,10 @@
preload: { preload: {
type: Boolean, type: Boolean,
default: false default: false
},
id: {
type: String,
default: ''
} }
}, },
data() { data() {
......
<template> <template>
<scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false" <scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false"
@startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll"> @startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll"
:nested-scroll-child="nestedScrollChildId"
>
<swiper ref="header" indicator-dots="true" circular="true"> <swiper ref="header" indicator-dots="true" circular="true">
<swiper-item v-for="i in 3" :item-id="i"> <swiper-item v-for="i in 3" :item-id="i">
<image src="/static/shuijiao.jpg" style="height: 240px;"></image> <image src="/static/shuijiao.jpg" style="height: 240px;"></image>
...@@ -20,7 +22,7 @@ ...@@ -20,7 +22,7 @@
<swiper ref="swiper" class="swiper-view" :current="swiperIndex" @transition="onSwiperTransition" <swiper ref="swiper" class="swiper-view" :current="swiperIndex" @transition="onSwiperTransition"
@animationfinish="onSwiperAnimationfinish"> @animationfinish="onSwiperAnimationfinish">
<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index"> <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
<long-page ref="longPage" :type="item.type" :preload="item.preload"></long-page> <long-page ref="longPage" :id="item.id" :type="item.type" :preload="item.preload"></long-page>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
...@@ -39,6 +41,7 @@ ...@@ -39,6 +41,7 @@
type SwiperViewItem = { type SwiperViewItem = {
type : string, type : string,
name : string, name : string,
id: string,
preload : boolean, preload : boolean,
} }
...@@ -64,19 +67,23 @@ ...@@ -64,19 +67,23 @@
{ {
type: 'UpdatedDate', type: 'UpdatedDate',
name: '最新上架', name: '最新上架',
id: "list-id-1",
preload: true preload: true
} as SwiperViewItem, } as SwiperViewItem,
{ {
type: 'FreeHot', type: 'FreeHot',
name: '免费热榜' name: '免费热榜',
id: "list-id-2"
} as SwiperViewItem, } as SwiperViewItem,
{ {
type: 'PaymentHot', type: 'PaymentHot',
name: '付费热榜' name: '付费热榜',
id: "list-id-3"
} as SwiperViewItem, } as SwiperViewItem,
{ {
type: 'HotList', type: 'HotList',
name: '热门总榜' name: '热门总榜',
id: "list-id-4"
} as SwiperViewItem } as SwiperViewItem
] as SwiperViewItem[], ] as SwiperViewItem[],
swiperIndex: -1, swiperIndex: -1,
...@@ -86,7 +93,8 @@ ...@@ -86,7 +93,8 @@
$tabScrollView: null as null | Element, $tabScrollView: null as null | Element,
$indicatorNode: null as null | Element, $indicatorNode: null as null | Element,
$swiperWidth: 0, $swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[] $swiperTabsRect: [] as SwiperTabsItem[],
nestedScrollChildId: ""
} }
}, },
onReady() { onReady() {
...@@ -210,6 +218,10 @@ ...@@ -210,6 +218,10 @@
this.swiperList[index].preload = true; this.swiperList[index].preload = true;
(this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData', null) (this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData', null)
} }
//swiper页面切换需要重新赋值嵌套滚动子元素的id
if (this.swiperList[index].id != null) {
this.nestedScrollChildId = this.swiperList[index].id
}
} }
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册