Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5977
Star 89
Fork 162
H
hello uni-app x

体验新版 GitCode，发现更多精彩内容 >>

提交 4d2c365e 编写于 作者: shutao-dc's avatar shutao-dc
浏览文件
操作

新增nested-scroll-body、nested-scroll-header组件示例

上级 b66ec97c
隐藏空白更改
内联 并排
Showing with 567 addition and 323 deletion
pages.json
浏览文件 @ 4d2c365e
...@@ -1206,6 +1206,18 @@ ...@@ -1206,6 +1206,18 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },
{
"path": "pages/component/nested-scroll-header/nested-scroll-header",
"style": {
"navigationBarTitleText": "nested-scroll-header"
}
},
{
"path": "pages/component/nested-scroll-body/nested-scroll-body",
"style": {
"navigationBarTitleText": "nested-scroll-body"
}
},
// #endif // #endif
// #ifdef APP || WEB // #ifdef APP || WEB
{ {
......
pages/component/nested-scroll-body/nested-scroll-body.test.js 0 → 100644
浏览文件 @ 4d2c365e
describe('component-native-nested-scroll-body', () => {
let page
beforeAll(async () => {
//打开lnested-scroll-body测试页
page = await program.reLaunch('/pages/component/nested-scroll-body/nested-scroll-body')
await page.waitFor(600)
})
//检测横向scroll_into_view属性赋值
it('check_scroll_into_view_left', async () => {
await page.callMethod('testBodyScrollBy', 400)
await page.waitFor(300)
const image = await program.screenshot();
expect(image).toMatchImageSnapshot();
})
})
pages/component/nested-scroll-body/nested-scroll-body.uvue 0 → 100644
浏览文件 @ 4d2c365e
<template>
<scroll-view style="flex:1" type="nested" direction="vertical" refresher-enabled="true" refresher-default-style="none"
bounces="false" :refresher-triggered="refresherTriggered" @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh" @refresherrestore="onRefreshrestore">
<nested-scroll-header>
<swiper ref="header" indicator-dots="true" circular="true">
<swiper-item v-for="i in 3" :item-id="i">
<image src="/static/shuijiao.jpg" style="width:100% ;height: 240px;"></image>
</swiper-item>
</swiper>
</nested-scroll-header>
<nested-scroll-body>
<view style="flex:1">
<view style="flex-direction: row;">
<text style="padding: 12px 15px;">nested-scroll-body</text>
</view>
<!-- 嵌套滚动仅可能关闭bounces效果 会影响嵌套滚动不连贯 -->
<list-view bounces="false" id="body-list" :scroll-top="scrollTop" style="flex:1" associative-container="nested-scroll-view">
<list-item v-for="key in scrollData">
<view class="scroll-item">
<text class="scroll-item-title">{{key}}</text>
</view>
</list-item>
</list-view>
</view>
<text>不会渲染，因为 nested-scroll-body 只会渲染第一个子节点</text>
</nested-scroll-body>
<!-- 支持自定义样式下拉刷新slot组件 -->
<refresh-box slot="refresher" :state="state"></refresh-box>
</scroll-view>
</template>
<script>
import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';
export default {
components: { refreshBox },
data() {
return {
scrollData: [] as Array<string>,
scrollTop: 0,
refresherTriggered: false,
pullingDistance: 0,
resetting: false
}
},
computed: {
state() : number {
if (this.resetting) {
return 3;
}
if (this.refresherTriggered) {
return 2
}
if (this.pullingDistance > 45) {
return 1
} else {
return 0;
}
}
},
onLoad() {
let lists : Array<string> = []
for (let i = 0; i < 30; i++) {
lists.push("item---" + i)
}
this.scrollData = lists
},
methods: {
onRefresherpulling(e : RefresherEvent) {
this.pullingDistance = e.detail.dy;
},
onRefresherrefresh() {
this.refresherTriggered = true
setTimeout(() => {
this.refresherTriggered = false
this.resetting = true;
}, 1500)
},
onRefreshrestore() {
this.pullingDistance = 0
this.resetting = false;
},
//自动化测试使用
testBodyScrollBy(y: number) {
this.scrollTop = y
}
}
}
</script>
<style>
.scroll-item {
margin-left: 6px;
margin-right: 6px;
margin-top: 6px;
background-color: #fff;
border-radius: 4px;
}
.scroll-item-title {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
color: #555;
}
.scroll-header-tiem {
height: 200px;
background-color: #66ccff;
align-items: center;
justify-content: center;
}
</style>
pages/component/nested-scroll-header/nested-scroll-header.test.js 0 → 100644
浏览文件 @ 4d2c365e
describe('component-native-nested-scroll-header', () => {
let page
beforeAll(async () => {
//打开lnested-scroll-header测试页
page = await program.reLaunch('/pages/component/nested-scroll-header/nested-scroll-header')
await page.waitFor(600)
})
it('check_nested-scroll-header', async () => {
const image = await program.screenshot();
expect(image).toMatchImageSnapshot();
})
})
pages/component/nested-scroll-header/nested-scroll-header.uvue 0 → 100644
浏览文件 @ 4d2c365e
<template>
<scroll-view style="flex:1" type="nested" direction="vertical">
<nested-scroll-header>
<view class="scroll-header-tiem1">
<text>会渲染的nested-scroll-header</text>
</view>
<view class="scroll-header-tiem1">
<text>不会渲染nested-scroll-header，因为 nested-scroll-header 只会渲染第一个子节点</text>
</view>
</nested-scroll-header>
<nested-scroll-header>
<swiper ref="header" indicator-dots="true" circular="true">
<swiper-item v-for="i in 3" :item-id="i">
<view class="scroll-header-tiem2">
<text>如果存在多个头部节点，那么就使用多个 nested-scroll-header 来将其包裹</text>
</view>
</swiper-item>
</swiper>
</nested-scroll-header>
<nested-scroll-body>
<scroll-view style="flex:1" associative-container="nested-scroll-view">
<view v-for="key in scrollData">
<view class="scroll-item">
<text class="scroll-item-title">{{key}}</text>
</view>
</view>
</scroll-view>
</nested-scroll-body>
</scroll-view>
</template>
<script>
export default {
data() {
return {
scrollData: [] as Array<string>,
}
},
onLoad() {
let lists : Array<string> = []
for (let i = 0; i < 30; i++) {
lists.push("item---" + i)
}
this.scrollData = lists
},
methods: {
}
}
</script>
<style>
.scroll-item {
margin-left: 6px;
margin-right: 6px;
margin-top: 6px;
background-color: #fff;
border-radius: 4px;
}
.scroll-item-title {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
color: #555;
}
.scroll-header-tiem1 {
height: 200px;
background-color: #66ccff;
align-items: center;
justify-content: center;
}
.scroll-header-tiem2 {
height: 100px;
background-color: #89ff8d;
align-items: center;
justify-content: center;
}
</style>
pages/tabBar/component.uvue
浏览文件 @ 4d2c365e
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1" enable-back-to-top="true"> <scroll-view style="flex: 1" enable-back-to-top="true">
<!-- #endif --> <!-- #endif -->
<view class="uni-container"> <view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image class="uni-header-image" src="/static/componentIndex.png"></image> <image class="uni-header-image" src="/static/componentIndex.png"></image>
</view> </view>
<view class="uni-text-box"> <view class="uni-text-box">
<text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text> <text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'" <u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'"
:text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link> :text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
</view> </view>
<uni-collapse> <uni-collapse>
<template v-for="item in list" :key="item.id"> <template v-for="item in list" :key="item.id">
<uni-collapse-item :title="item.name" class="item"> <uni-collapse-item :title="item.name" class="item">
<view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'" <view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)"> v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" <text class="uni-navigate-text"
:class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text> :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image> <image :src="arrowRightIcon" class="uni-icon-size"></image>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</template> </template>
</uni-collapse> </uni-collapse>
<!-- #ifdef UNI-APP-X && APP-ANDROID --> <!-- #ifdef UNI-APP-X && APP-ANDROID -->
<uni-upgrade-center-app ref="upgradePopup" @show="upgradePopupShow" @close="upgradePopupClose" /> <uni-upgrade-center-app ref="upgradePopup" @show="upgradePopupShow" @close="upgradePopupClose" />
<!-- #endif --> <!-- #endif -->
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
// #ifdef UNI-APP-X && APP-ANDROID // #ifdef UNI-APP-X && APP-ANDROID
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update' import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
// #endif // #endif
type Page = { type Page = {
name : string name : string
enable ?: boolean enable ?: boolean
url ?: string.PageURIString url ?: string.PageURIString
} }
type ListItem = { type ListItem = {
id : string id : string
name : string name : string
pages : Page[] pages : Page[]
url ?: string url ?: string
enable ?: boolean enable ?: boolean
} }
export default { export default {
data() { data() {
return { return {
list: [ list: [
{ {
id: 'view', id: 'view',
name: '视图容器', name: '视图容器',
pages: [ pages: [
{ {
name: 'view', name: 'view',
}, },
{ {
name: 'scroll-view', name: 'scroll-view',
}, },
{ {
name: 'swiper', name: 'swiper',
}, },
/* /*
{ {
name: 'movable-view', name: 'movable-view',
enable: false enable: false
}, },
{ {
name: 'cover-view', name: 'cover-view',
enable: false enable: false
}, },
*/ */
{ {
name: 'list-view', name: 'list-view',
}, },
{ {
name: 'sticky-header', name: 'sticky-header',
}, },
{ {
name: 'sticky-section', name: 'sticky-section',
}, },
] as Page[], {
}, name: 'nested-scroll-header',
{ },
id: 'content', {
name: '基础内容', name: 'nested-scroll-body',
pages: [ },
{ ] as Page[],
name: 'text', },
}, {
{ id: 'content',
name: 'rich-text', name: '基础内容',
enable: true, pages: [
}, {
{ name: 'text',
name: 'progress', },
}, {
] as Page[], name: 'rich-text',
}, enable: true,
{ },
id: 'form', {
name: '表单组件', name: 'progress',
pages: [ },
{ ] as Page[],
name: 'button', },
}, {
{ id: 'form',
name: 'checkbox', name: '表单组件',
}, pages: [
{ {
name: 'form', name: 'button',
}, },
{ {
name: 'input', name: 'checkbox',
}, },
/* {
{ name: 'form',
name: 'label', },
}, { {
name: 'picker', name: 'input',
}, },
*/ /*
{ {
name: 'picker-view', name: 'label',
}, }, {
{ name: 'picker',
name: 'radio', },
}, */
{ {
name: 'slider', name: 'picker-view',
}, },
{ {
name: 'slider-100', name: 'radio',
}, },
{ {
name: 'switch', name: 'slider',
}, },
{ {
name: 'textarea', name: 'slider-100',
}, },
/* {
{ name: 'switch',
name: 'editor', },
enable: false {
}, name: 'textarea',
*/ },
] as Page[], /*
}, {
{ name: 'editor',
id: 'nav', enable: false
name: '导航', },
pages: [{ */
name: 'navigator', ] as Page[],
enable: true },
}] as Page[], {
}, id: 'nav',
{ name: '导航',
id: 'media', pages: [{
name: '媒体组件', name: 'navigator',
pages: [ enable: true
{ }] as Page[],
name: 'image', },
enable: true, {
}, id: 'media',
{ name: '媒体组件',
name: 'video', pages: [
enable: true, {
}, name: 'image',
/* { enable: true,
name: 'animation-view', },
enable: false, {
}, */ name: 'video',
] as Page[], enable: true,
}, },
// { /* {
// id: 'map', name: 'animation-view',
// name: '地图', enable: false,
// pages: [ }, */
// { ] as Page[],
// name: 'map', },
// enable: false // {
// } // id: 'map',
// ] as Page[] // name: '地图',
// }, // pages: [
// { // {
// id: 'canvas', // name: 'map',
// name: '画布', // enable: false
// pages: [ // }
// { // ] as Page[]
// name: 'canvas' // },
// } // {
// ] as Page[] // id: 'canvas',
// }, // name: '画布',
{ // pages: [
id: 'web-view', // {
name: '网页', // name: 'canvas'
pages: [ // }
{ // ] as Page[]
name: '网络网页', // },
enable: true, {
url: '/pages/component/web-view/web-view', id: 'web-view',
}, name: '网页',
{ pages: [
name: '本地网页', {
enable: true, name: '网络网页',
url: '/pages/component/web-view-local/web-view-local', enable: true,
}, url: '/pages/component/web-view/web-view',
] as Page[], },
}, {
{ name: '本地网页',
id: 'unicloud-db', enable: true,
name: 'unicloud-db', url: '/pages/component/web-view-local/web-view-local',
pages: [ },
{ ] as Page[],
name: '联系人', },
enable: true, {
url: '/pages/component/unicloud-db-contacts/list' id: 'unicloud-db',
}, name: 'unicloud-db',
{ pages: [
name: 'mixinDatacom', {
enable: true, name: '联系人',
url: '/pages/component/mixin-datacom/mixin-datacom' enable: true,
} url: '/pages/component/unicloud-db-contacts/list'
] as Page[], },
}, {
/* name: 'mixinDatacom',
{ enable: true,
id: 'ad', url: '/pages/component/mixin-datacom/mixin-datacom'
url: 'ad', }
name: 'AD组件', ] as Page[],
enable: false, },
pages: [] as Page[] /*
} {
*/ id: 'ad',
{ url: 'ad',
id: 'general-attr-event', name: 'AD组件',
name: '通用属性和事件', enable: false,
pages: [ pages: [] as Page[]
{ }
name: '通用属性', */
url: '/pages/component/general-attribute/general-attribute', {
enable: true, id: 'general-attr-event',
}, name: '通用属性和事件',
{ pages: [
name: '通用事件', {
url: '/pages/component/general-event/general-event', name: '通用属性',
enable: true, url: '/pages/component/general-attribute/general-attribute',
}, enable: true,
{ },
name: 'touch事件', {
url: '/pages/component/general-event/touch-event', name: '通用事件',
enable: true, url: '/pages/component/general-event/general-event',
}, enable: true,
{ },
name: 'Transition事件', {
url: '/pages/component/general-event/transition-event', name: 'touch事件',
enable: true, url: '/pages/component/general-event/touch-event',
}, enable: true,
] as Page[], },
} {
] as ListItem[], name: 'Transition事件',
arrowUpIcon: '/static/icons/arrow-up.png' as string.ImageURIString, url: '/pages/component/general-event/transition-event',
arrowDownIcon: '/static/icons/arrow-down.png' as string.ImageURIString, enable: true,
arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString, },
pageHiden: false ] as Page[],
} }
}, ] as ListItem[],
methods: { arrowUpIcon: '/static/icons/arrow-up.png' as string.ImageURIString,
goDetailPage(e : Page) { arrowDownIcon: '/static/icons/arrow-down.png' as string.ImageURIString,
if (e.enable == false) { arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
uni.showToast({ pageHiden: false
title: '暂不支持', }
icon: 'none' },
}) methods: {
return goDetailPage(e : Page) {
} if (e.enable == false) {
const url = uni.showToast({
e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}` title: '暂不支持',
uni.navigateTo({ icon: 'none'
url, })
}) return
} }
// #ifdef UNI-APP-X && APP-ANDROID const url =
, upgradePopupShow() { e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
console.log('upgradePopup show'); uni.navigateTo({
if (!this.pageHiden) { url,
uni.hideTabBar()?.catch(_ => { }) })
} }
} // #ifdef UNI-APP-X && APP-ANDROID
, upgradePopupClose() { , upgradePopupShow() {
console.log('upgradePopup close'); console.log('upgradePopup show');
uni.showTabBar()?.catch(_ => { }) if (!this.pageHiden) {
} uni.hideTabBar()?.catch(_ => { })
// #endif }
}, }
onReady() { , upgradePopupClose() {
// #ifdef UNI-APP-X && APP-ANDROID console.log('upgradePopup close');
checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance) uni.showTabBar()?.catch(_ => { })
// #endif }
}, // #endif
onShow() { },
this.pageHiden = false onReady() {
}, // #ifdef UNI-APP-X && APP-ANDROID
onHide() { checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
this.pageHiden = true // #endif
}, },
beforeUnmount() { onShow() {
uni.showTabBar()?.catch(_ => { }) this.pageHiden = false
} },
} onHide() {
</script> this.pageHiden = true
},
<style> beforeUnmount() {
.item { uni.showTabBar()?.catch(_ => { })
margin-bottom: 12px; }
} }
</script>
<style>
.item {
margin-bottom: 12px;
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或