Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 分页组件移动端适配 #11524

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Conversation

lymyname
Copy link

对分页器组件的移动端进行页面适配

Why

How

Copy link

👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

@github-actions github-actions bot added the feat label Jan 21, 2025
@@ -630,7 +630,9 @@ $Table-strip-bg: transparent;
--Pagination-padding: 0 #{px2rem(8px)};
--Pagination-padding-sm: 0 #{px2rem(4px)};
--Pagination-light-color: var(--colors-neutral-text-4);
--Pagination-border: 1px solid #ccc;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

样式不要写死,用全局样式

&-simple {
color: #666666;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@@ -1,5 +1,5 @@
/*
* @Description: Pagination分页组件
* @Descr''i''ption: Pagination分页组件
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

笔误?

};

state = {
pageNum: '',
internalPageNum: '1',
internalPageNum: '2',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里为什么要改?

@@ -181,11 +189,12 @@ export class Pagination extends React.Component<
async handlePageNumChange(page: number, perPage?: number, dir?: string) {
const {disabled, onPageChange} = this.props;
const _page = isNaN(Number(page)) || Number(page) < 1 ? 1 : page;
console.log(disabled, page, perPage, dir);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

删掉

@@ -10,7 +10,7 @@ import {
} from 'amis-core';
import {BaseSchema} from '../Schema';
import {Pagination as BasicPagination} from 'amis-ui';
import type {MODE_TYPE} from 'amis-ui/lib/components/Pagination';
import type {MODE_TYPE} from 'amis-ui/src/components/Pagination';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

simplePager = (
let basePager: React.ReactNode = null;
// 非简洁模式
if (mode !== 'simple' && mobileUI) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
pc 简洁模式展示不对

justify-content: space-between;
> li {
> a,
> span {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
image
需要圆角

.#{$ns}Pagination-wrap-size--sm {
.#{$ns}Pagination-item {
display: flex;
justify-content: space-evenly;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
间距还原ui稿

pageButtons[pageButtons.length - 1]
];
}

const go = (
const go = mobileUI ? null : (
<div className={cx('Pagination-inputGroup Pagination-item')} key="go">
{!mobileUI ? (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这是不是不需要判断了?

.filter(v => !!v)
.map(v => ({label: __('Pagination.select', {count: v}), value: v}));
const perPageEle = (
const selection = mobileUI
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里判断的意思是?下面mobile都不会用到

@@ -171,7 +179,7 @@ export class Pagination extends React.Component<

componentWillReceiveProps(nextProps: PaginationProps) {
if (
this.props.mode === 'simple' &&
this.props.mode !== 'simple' &&
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里是为啥?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants