Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 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 @@
"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
// #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>
<!-- #ifdef APP -->
<scroll-view style="flex: 1" enable-back-to-top="true">
<!-- #endif -->
<view class="uni-container">
<view class="uni-header-logo">
<image class="uni-header-image" src="/static/componentIndex.png"></image>
</view>
<view class="uni-text-box">
<text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'"
:text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
</view>
<uni-collapse>
<template v-for="item in list" :key="item.id">
<uni-collapse-item :title="item.name" class="item">
<view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text"
:class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image>
</view>
</uni-collapse-item>
</template>
</uni-collapse>
<!-- #ifdef UNI-APP-X && APP-ANDROID -->
<uni-upgrade-center-app ref="upgradePopup" @show="upgradePopupShow" @close="upgradePopupClose" />
<!-- #endif -->
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
// #ifdef UNI-APP-X && APP-ANDROID
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
// #endif
type Page = {
name : string
enable ?: boolean
url ?: string.PageURIString
}
type ListItem = {
id : string
name : string
pages : Page[]
url ?: string
enable ?: boolean
}
export default {
data() {
return {
list: [
{
id: 'view',
name: '视图容器',
pages: [
{
name: 'view',
},
{
name: 'scroll-view',
},
{
name: 'swiper',
},
/*
{
name: 'movable-view',
enable: false
},
{
name: 'cover-view',
enable: false
},
*/
{
name: 'list-view',
},
{
name: 'sticky-header',
},
{
name: 'sticky-section',
},
] as Page[],
},
{
id: 'content',
name: '基础内容',
pages: [
{
name: 'text',
},
{
name: 'rich-text',
enable: true,
},
{
name: 'progress',
},
] as Page[],
},
{
id: 'form',
name: '表单组件',
pages: [
{
name: 'button',
},
{
name: 'checkbox',
},
{
name: 'form',
},
{
name: 'input',
},
/*
{
name: 'label',
}, {
name: 'picker',
},
*/
{
name: 'picker-view',
},
{
name: 'radio',
},
{
name: 'slider',
},
{
name: 'slider-100',
},
{
name: 'switch',
},
{
name: 'textarea',
},
/*
{
name: 'editor',
enable: false
},
*/
] as Page[],
},
{
id: 'nav',
name: '导航',
pages: [{
name: 'navigator',
enable: true
}] as Page[],
},
{
id: 'media',
name: '媒体组件',
pages: [
{
name: 'image',
enable: true,
},
{
name: 'video',
enable: true,
},
/* {
name: 'animation-view',
enable: false,
}, */
] as Page[],
},
// {
// id: 'map',
// name: '地图',
// pages: [
// {
// name: 'map',
// enable: false
// }
// ] as Page[]
// },
// {
// id: 'canvas',
// name: '画布',
// pages: [
// {
// name: 'canvas'
// }
// ] as Page[]
// },
{
id: 'web-view',
name: '网页',
pages: [
{
name: '网络网页',
enable: true,
url: '/pages/component/web-view/web-view',
},
{
name: '本地网页',
enable: true,
url: '/pages/component/web-view-local/web-view-local',
},
] as Page[],
},
{
id: 'unicloud-db',
name: 'unicloud-db',
pages: [
{
name: '联系人',
enable: true,
url: '/pages/component/unicloud-db-contacts/list'
},
{
name: 'mixinDatacom',
enable: true,
url: '/pages/component/mixin-datacom/mixin-datacom'
}
] as Page[],
},
/*
{
id: 'ad',
url: 'ad',
name: 'AD组件',
enable: false,
pages: [] as Page[]
}
*/
{
id: 'general-attr-event',
name: '通用属性和事件',
pages: [
{
name: '通用属性',
url: '/pages/component/general-attribute/general-attribute',
enable: true,
},
{
name: '通用事件',
url: '/pages/component/general-event/general-event',
enable: true,
},
{
name: 'touch事件',
url: '/pages/component/general-event/touch-event',
enable: true,
},
{
name: 'Transition事件',
url: '/pages/component/general-event/transition-event',
enable: true,
},
] as Page[],
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png' as string.ImageURIString,
arrowDownIcon: '/static/icons/arrow-down.png' as string.ImageURIString,
arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
pageHiden: false
}
},
methods: {
goDetailPage(e : Page) {
if (e.enable == false) {
uni.showToast({
title: '暂不支持',
icon: 'none'
})
return
}
const url =
e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
uni.navigateTo({
url,
})
}
// #ifdef UNI-APP-X && APP-ANDROID
, upgradePopupShow() {
console.log('upgradePopup show');
if (!this.pageHiden) {
uni.hideTabBar()?.catch(_ => { })
}
}
, upgradePopupClose() {
console.log('upgradePopup close');
uni.showTabBar()?.catch(_ => { })
}
// #endif
},
onReady() {
// #ifdef UNI-APP-X && APP-ANDROID
checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
// #endif
},
onShow() {
this.pageHiden = false
},
onHide() {
this.pageHiden = true
},
beforeUnmount() {
uni.showTabBar()?.catch(_ => { })
}
}
</script>
<style>
.item {
margin-bottom: 12px;
}
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1" enable-back-to-top="true">
<!-- #endif -->
<view class="uni-container">
<view class="uni-header-logo">
<image class="uni-header-image" src="/static/componentIndex.png"></image>
</view>
<view class="uni-text-box">
<text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'"
:text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
</view>
<uni-collapse>
<template v-for="item in list" :key="item.id">
<uni-collapse-item :title="item.name" class="item">
<view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text"
:class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image>
</view>
</uni-collapse-item>
</template>
</uni-collapse>
<!-- #ifdef UNI-APP-X && APP-ANDROID -->
<uni-upgrade-center-app ref="upgradePopup" @show="upgradePopupShow" @close="upgradePopupClose" />
<!-- #endif -->
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
// #ifdef UNI-APP-X && APP-ANDROID
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
// #endif
type Page = {
name : string
enable ?: boolean
url ?: string.PageURIString
}
type ListItem = {
id : string
name : string
pages : Page[]
url ?: string
enable ?: boolean
}
export default {
data() {
return {
list: [
{
id: 'view',
name: '视图容器',
pages: [
{
name: 'view',
},
{
name: 'scroll-view',
},
{
name: 'swiper',
},
/*
{
name: 'movable-view',
enable: false
},
{
name: 'cover-view',
enable: false
},
*/
{
name: 'list-view',
},
{
name: 'sticky-header',
},
{
name: 'sticky-section',
},
{
name: 'nested-scroll-header',
},
{
name: 'nested-scroll-body',
},
] as Page[],
},
{
id: 'content',
name: '基础内容',
pages: [
{
name: 'text',
},
{
name: 'rich-text',
enable: true,
},
{
name: 'progress',
},
] as Page[],
},
{
id: 'form',
name: '表单组件',
pages: [
{
name: 'button',
},
{
name: 'checkbox',
},
{
name: 'form',
},
{
name: 'input',
},
/*
{
name: 'label',
}, {
name: 'picker',
},
*/
{
name: 'picker-view',
},
{
name: 'radio',
},
{
name: 'slider',
},
{
name: 'slider-100',
},
{
name: 'switch',
},
{
name: 'textarea',
},
/*
{
name: 'editor',
enable: false
},
*/
] as Page[],
},
{
id: 'nav',
name: '导航',
pages: [{
name: 'navigator',
enable: true
}] as Page[],
},
{
id: 'media',
name: '媒体组件',
pages: [
{
name: 'image',
enable: true,
},
{
name: 'video',
enable: true,
},
/* {
name: 'animation-view',
enable: false,
}, */
] as Page[],
},
// {
// id: 'map',
// name: '地图',
// pages: [
// {
// name: 'map',
// enable: false
// }
// ] as Page[]
// },
// {
// id: 'canvas',
// name: '画布',
// pages: [
// {
// name: 'canvas'
// }
// ] as Page[]
// },
{
id: 'web-view',
name: '网页',
pages: [
{
name: '网络网页',
enable: true,
url: '/pages/component/web-view/web-view',
},
{
name: '本地网页',
enable: true,
url: '/pages/component/web-view-local/web-view-local',
},
] as Page[],
},
{
id: 'unicloud-db',
name: 'unicloud-db',
pages: [
{
name: '联系人',
enable: true,
url: '/pages/component/unicloud-db-contacts/list'
},
{
name: 'mixinDatacom',
enable: true,
url: '/pages/component/mixin-datacom/mixin-datacom'
}
] as Page[],
},
/*
{
id: 'ad',
url: 'ad',
name: 'AD组件',
enable: false,
pages: [] as Page[]
}
*/
{
id: 'general-attr-event',
name: '通用属性和事件',
pages: [
{
name: '通用属性',
url: '/pages/component/general-attribute/general-attribute',
enable: true,
},
{
name: '通用事件',
url: '/pages/component/general-event/general-event',
enable: true,
},
{
name: 'touch事件',
url: '/pages/component/general-event/touch-event',
enable: true,
},
{
name: 'Transition事件',
url: '/pages/component/general-event/transition-event',
enable: true,
},
] as Page[],
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png' as string.ImageURIString,
arrowDownIcon: '/static/icons/arrow-down.png' as string.ImageURIString,
arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
pageHiden: false
}
},
methods: {
goDetailPage(e : Page) {
if (e.enable == false) {
uni.showToast({
title: '暂不支持',
icon: 'none'
})
return
}
const url =
e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
uni.navigateTo({
url,
})
}
// #ifdef UNI-APP-X && APP-ANDROID
, upgradePopupShow() {
console.log('upgradePopup show');
if (!this.pageHiden) {
uni.hideTabBar()?.catch(_ => { })
}
}
, upgradePopupClose() {
console.log('upgradePopup close');
uni.showTabBar()?.catch(_ => { })
}
// #endif
},
onReady() {
// #ifdef UNI-APP-X && APP-ANDROID
checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
// #endif
},
onShow() {
this.pageHiden = false
},
onHide() {
this.pageHiden = true
},
beforeUnmount() {
uni.showTabBar()?.catch(_ => { })
}
}
</script>
<style>
.item {
margin-bottom: 12px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或