Merge branch '2.x' into dev

This commit is contained in:
chenjiahan 2020-11-01 10:55:52 +08:00
commit 22747b4f6e
2 changed files with 54 additions and 22 deletions

View File

@ -8,8 +8,10 @@ const [createComponent, bem] = createNamespace('swipe-item');
export default createComponent({
setup(props, { slots }) {
let rendered;
const state = reactive({
offset: 0,
inited: false,
mounted: false,
});
@ -29,7 +31,9 @@ export default createComponent({
});
const shouldRender = computed(() => {
if (!parent.props.lazyRender) {
const { loop, lazyRender } = parent.props;
if (!lazyRender || rendered) {
return true;
}
@ -40,10 +44,11 @@ export default createComponent({
const active = parent.activeIndicator.value;
const maxActive = parent.count.value - 1;
const prevActive = active === 0 ? maxActive : active - 1;
const nextActive = active === maxActive ? 0 : active + 1;
const prevActive = active === 0 && loop ? maxActive : active - 1;
const nextActive = active === maxActive && loop ? 0 : active + 1;
rendered = index.value >= prevActive && index.value <= nextActive;
return index.value >= prevActive || index.value <= nextActive;
return rendered;
});
const setOffset = (offset) => {

View File

@ -163,6 +163,7 @@ test('lazy-render prop', async () => {
<van-swipe-item><span>2</span></van-swipe-item>
<van-swipe-item><span>3</span></van-swipe-item>
<van-swipe-item><span>4</span></van-swipe-item>
<van-swipe-item><span>5</span></van-swipe-item>
</van-swipe>
`,
data() {
@ -175,26 +176,52 @@ test('lazy-render prop', async () => {
await later();
const items = wrapper.findAll('.van-swipe-item');
expect(items.at(0).contains('span')).toBeTruthy();
expect(items.at(1).contains('span')).toBeTruthy();
expect(items.at(2).contains('span')).toBeFalsy();
expect(items.at(3).contains('span')).toBeTruthy();
const expectRender = (results) => {
results.forEach((result, index) => {
expect(items.at(index).contains('span')).toEqual(result);
});
};
expectRender([true, true, false, false, true]);
wrapper.setData({ active: 1 });
expect(items.at(0).contains('span')).toBeTruthy();
expect(items.at(1).contains('span')).toBeTruthy();
expect(items.at(2).contains('span')).toBeTruthy();
expect(items.at(3).contains('span')).toBeFalsy();
expectRender([true, true, true, false, true]);
wrapper.setData({ active: 2 });
expect(items.at(0).contains('span')).toBeFalsy();
expect(items.at(1).contains('span')).toBeTruthy();
expect(items.at(2).contains('span')).toBeTruthy();
expect(items.at(3).contains('span')).toBeTruthy();
wrapper.setData({ active: 3 });
expect(items.at(0).contains('span')).toBeTruthy();
expect(items.at(1).contains('span')).toBeFalsy();
expect(items.at(2).contains('span')).toBeTruthy();
expect(items.at(3).contains('span')).toBeTruthy();
expectRender([true, true, true, true, true]);
});
test('lazy-render prop when loop is false', async () => {
const wrapper = mount({
template: `
<van-swipe :initial-swipe="active" :loop="false" lazy-render>
<van-swipe-item><span>1</span></van-swipe-item>
<van-swipe-item><span>2</span></van-swipe-item>
<van-swipe-item><span>3</span></van-swipe-item>
<van-swipe-item><span>4</span></van-swipe-item>
</van-swipe>
`,
data() {
return {
active: 0,
};
},
});
await later();
const items = wrapper.findAll('.van-swipe-item');
const expectRender = (results) => {
results.forEach((result, index) => {
expect(items.at(index).contains('span')).toEqual(result);
});
};
expectRender([true, true, false, false]);
wrapper.setData({ active: 1 });
expectRender([true, true, true, false]);
wrapper.setData({ active: 2 });
expectRender([true, true, true, true]);
});