mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(Sticky): add demo test
This commit is contained in:
nemo-shen
neverland
parent
1eabea17a8
commit
3abd671715
@ -116,6 +116,7 @@
|
||||
"van-steps": "./dist/steps/index",
|
||||
"van-steps-demo": "./dist/steps/demo/index",
|
||||
"van-sticky": "./dist/sticky/index",
|
||||
"van-sticky-demo": "./dist/sticky/demo/index",
|
||||
"van-submit-bar": "./dist/submit-bar/index",
|
||||
"van-swipe-cell": "./dist/swipe-cell/index",
|
||||
"van-uploader": "./dist/uploader/index",
|
||||
|
||||
@ -1,27 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
container: null,
|
||||
scrollTop: 0,
|
||||
offsetTop: 0,
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.setData({
|
||||
container: () => wx.createSelectorQuery().select('#container'),
|
||||
});
|
||||
},
|
||||
|
||||
onScroll(event) {
|
||||
wx.createSelectorQuery()
|
||||
.select('#scroller')
|
||||
.boundingClientRect((res) => {
|
||||
this.setData({
|
||||
scrollTop: event.detail.scrollTop,
|
||||
offsetTop: res.top,
|
||||
});
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,42 +1 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-sticky>
|
||||
<van-button type="primary" custom-style="margin-left: 15px">
|
||||
基础用法
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="吸顶距离">
|
||||
<van-sticky offset-top="{{ 50 }}">
|
||||
<van-button type="info" custom-style="margin-left: 115px">
|
||||
吸顶距离
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="指定容器">
|
||||
<view id="container" style="height: 150px; background-color: #fff;">
|
||||
<van-sticky container="{{ container }}">
|
||||
<van-button type="warning" custom-style="margin-left: 215px;">
|
||||
指定容器
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="嵌套在 scroll-view 内使用">
|
||||
<scroll-view
|
||||
bind:scroll="onScroll"
|
||||
scroll-y
|
||||
id="scroller"
|
||||
style="height: 200px; background-color: #fff;"
|
||||
>
|
||||
<view style="height: 400px; padding-top: 50px;">
|
||||
<van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
|
||||
<van-button type="warning">
|
||||
嵌套在 scroll-view 内
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</demo-block>
|
||||
<van-sticky-demo />
|
||||
|
||||
@ -1,14 +1,3 @@
|
||||
page {
|
||||
height: 200vh;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.sticky-container {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
height: 150px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
8
packages/sticky/demo/index.json
Normal file
8
packages/sticky/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-sticky": "../../sticky/index",
|
||||
"van-button": "../../button/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
10
packages/sticky/demo/index.less
Normal file
10
packages/sticky/demo/index.less
Normal file
@ -0,0 +1,10 @@
|
||||
.van-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.sticky-container {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
height: 150px;
|
||||
background-color: #fff;
|
||||
}
|
||||
29
packages/sticky/demo/index.ts
Normal file
29
packages/sticky/demo/index.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
container: () => {},
|
||||
scrollTop: 0,
|
||||
offsetTop: 0,
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.setData({
|
||||
container: () => this.createSelectorQuery().select('#container'),
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
onScroll(event) {
|
||||
this.createSelectorQuery()
|
||||
.select('#scroller')
|
||||
.boundingClientRect((res) => {
|
||||
this.setData({
|
||||
scrollTop: event.detail.scrollTop,
|
||||
offsetTop: res.top,
|
||||
});
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
},
|
||||
});
|
||||
42
packages/sticky/demo/index.wxml
Normal file
42
packages/sticky/demo/index.wxml
Normal file
@ -0,0 +1,42 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-sticky>
|
||||
<van-button type="primary" custom-style="margin-left: 15px">
|
||||
基础用法
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="吸顶距离">
|
||||
<van-sticky offset-top="{{ 50 }}">
|
||||
<van-button type="info" custom-style="margin-left: 115px">
|
||||
吸顶距离
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="指定容器">
|
||||
<view id="container" style="height: 150px; background-color: #fff;">
|
||||
<van-sticky container="{{ container }}">
|
||||
<van-button type="warning" custom-style="margin-left: 215px;">
|
||||
指定容器
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="嵌套在 scroll-view 内使用">
|
||||
<scroll-view
|
||||
bind:scroll="onScroll"
|
||||
scroll-y
|
||||
id="scroller"
|
||||
style="height: 200px; background-color: #fff;"
|
||||
>
|
||||
<view style="height: 400px; padding-top: 50px;">
|
||||
<van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
|
||||
<van-button type="warning">
|
||||
嵌套在 scroll-view 内
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</demo-block>
|
||||
254
packages/sticky/test/__snapshots__/demo.spec.ts.snap
Normal file
254
packages/sticky/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,254 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<main>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
基础用法
|
||||
</wx-view>
|
||||
<van-sticky>
|
||||
<wx-view
|
||||
class="custom-class van-sticky"
|
||||
style="z-index:99"
|
||||
>
|
||||
<wx-view
|
||||
class="van-sticky-wrap"
|
||||
style="z-index:99"
|
||||
>
|
||||
<van-button>
|
||||
<wx-button
|
||||
appParameter=""
|
||||
ariaLabel=""
|
||||
businessId="{{0}}"
|
||||
class="custom-class van-button van-button--primary van-button--normal "
|
||||
data-detail="{{null}}"
|
||||
formType=""
|
||||
hoverClass="van-button--active hover-class"
|
||||
id=""
|
||||
lang=""
|
||||
openType=""
|
||||
sendMessageImg=""
|
||||
sendMessagePath=""
|
||||
sendMessageTitle=""
|
||||
sessionFrom=""
|
||||
showMessageCard="{{false}}"
|
||||
style="margin-left: 15px"
|
||||
bind:contact="onContact"
|
||||
bind:error="onError"
|
||||
bind:getphonenumber="onGetPhoneNumber"
|
||||
bind:getuserinfo="onGetUserInfo"
|
||||
bind:launchapp="onLaunchApp"
|
||||
bind:opensetting="onOpenSetting"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-button__text"
|
||||
>
|
||||
|
||||
基础用法
|
||||
|
||||
</wx-view>
|
||||
</wx-button>
|
||||
</van-button>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-sticky>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
吸顶距离
|
||||
</wx-view>
|
||||
<van-sticky>
|
||||
<wx-view
|
||||
class="custom-class van-sticky"
|
||||
style="z-index:99"
|
||||
>
|
||||
<wx-view
|
||||
class="van-sticky-wrap"
|
||||
style="z-index:99"
|
||||
>
|
||||
<van-button>
|
||||
<wx-button
|
||||
appParameter=""
|
||||
ariaLabel=""
|
||||
businessId="{{0}}"
|
||||
class="custom-class van-button van-button--info van-button--normal "
|
||||
data-detail="{{null}}"
|
||||
formType=""
|
||||
hoverClass="van-button--active hover-class"
|
||||
id=""
|
||||
lang=""
|
||||
openType=""
|
||||
sendMessageImg=""
|
||||
sendMessagePath=""
|
||||
sendMessageTitle=""
|
||||
sessionFrom=""
|
||||
showMessageCard="{{false}}"
|
||||
style="margin-left: 115px"
|
||||
bind:contact="onContact"
|
||||
bind:error="onError"
|
||||
bind:getphonenumber="onGetPhoneNumber"
|
||||
bind:getuserinfo="onGetUserInfo"
|
||||
bind:launchapp="onLaunchApp"
|
||||
bind:opensetting="onOpenSetting"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-button__text"
|
||||
>
|
||||
|
||||
吸顶距离
|
||||
|
||||
</wx-view>
|
||||
</wx-button>
|
||||
</van-button>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-sticky>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
指定容器
|
||||
</wx-view>
|
||||
<wx-view
|
||||
id="container"
|
||||
style="height: 150px; background-color: #fff;"
|
||||
>
|
||||
<van-sticky>
|
||||
<wx-view
|
||||
class="custom-class van-sticky"
|
||||
style="z-index:99"
|
||||
>
|
||||
<wx-view
|
||||
class="van-sticky-wrap"
|
||||
style="z-index:99"
|
||||
>
|
||||
<van-button>
|
||||
<wx-button
|
||||
appParameter=""
|
||||
ariaLabel=""
|
||||
businessId="{{0}}"
|
||||
class="custom-class van-button van-button--warning van-button--normal "
|
||||
data-detail="{{null}}"
|
||||
formType=""
|
||||
hoverClass="van-button--active hover-class"
|
||||
id=""
|
||||
lang=""
|
||||
openType=""
|
||||
sendMessageImg=""
|
||||
sendMessagePath=""
|
||||
sendMessageTitle=""
|
||||
sessionFrom=""
|
||||
showMessageCard="{{false}}"
|
||||
style="margin-left: 215px;"
|
||||
bind:contact="onContact"
|
||||
bind:error="onError"
|
||||
bind:getphonenumber="onGetPhoneNumber"
|
||||
bind:getuserinfo="onGetUserInfo"
|
||||
bind:launchapp="onLaunchApp"
|
||||
bind:opensetting="onOpenSetting"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-button__text"
|
||||
>
|
||||
|
||||
指定容器
|
||||
|
||||
</wx-view>
|
||||
</wx-button>
|
||||
</van-button>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-sticky>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
嵌套在 scroll-view 内使用
|
||||
</wx-view>
|
||||
<wx-scroll-view
|
||||
id="scroller"
|
||||
scrollY="{{true}}"
|
||||
style="height: 200px; background-color: #fff;"
|
||||
bind:scroll="onScroll"
|
||||
>
|
||||
<wx-view
|
||||
style="height: 400px; padding-top: 50px;"
|
||||
>
|
||||
<van-sticky>
|
||||
<wx-view
|
||||
class="custom-class van-sticky"
|
||||
style="z-index:99"
|
||||
>
|
||||
<wx-view
|
||||
class="van-sticky-wrap"
|
||||
style="z-index:99"
|
||||
>
|
||||
<van-button>
|
||||
<wx-button
|
||||
appParameter=""
|
||||
ariaLabel=""
|
||||
businessId="{{0}}"
|
||||
class="custom-class van-button van-button--warning van-button--normal "
|
||||
data-detail="{{null}}"
|
||||
formType=""
|
||||
hoverClass="van-button--active hover-class"
|
||||
id=""
|
||||
lang=""
|
||||
openType=""
|
||||
sendMessageImg=""
|
||||
sendMessagePath=""
|
||||
sendMessageTitle=""
|
||||
sessionFrom=""
|
||||
showMessageCard="{{false}}"
|
||||
style=""
|
||||
bind:contact="onContact"
|
||||
bind:error="onError"
|
||||
bind:getphonenumber="onGetPhoneNumber"
|
||||
bind:getuserinfo="onGetUserInfo"
|
||||
bind:launchapp="onLaunchApp"
|
||||
bind:opensetting="onOpenSetting"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-button__text"
|
||||
>
|
||||
|
||||
嵌套在 scroll-view 内
|
||||
|
||||
</wx-view>
|
||||
</wx-button>
|
||||
</van-button>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-sticky>
|
||||
</wx-view>
|
||||
</wx-scroll-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
</main>
|
||||
`;
|
||||
11
packages/sticky/test/demo.spec.ts
Normal file
11
packages/sticky/test/demo.spec.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import path from 'path';
|
||||
import simulate from 'miniprogram-simulate';
|
||||
|
||||
test('should render demo and match snapshot', () => {
|
||||
const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
|
||||
rootPath: path.resolve(__dirname, '../../'),
|
||||
});
|
||||
const comp = simulate.render(id);
|
||||
comp.attach(document.createElement('parent-wrapper'));
|
||||
expect(comp.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user