视频：

源文件：PageControls_Starter.framerx.zip

代码：

import { Override, Data } from "framer"
//State
const data = Data({
    page: 0,
    min: 0,
    max: 2,
})
// OVERRIDES
export function Page(props): Override {
    //下面这样可以算出page组件总共有几个子组件
    const pagesLength = props.children[0].props.children.length
    console.log(pagesLength)
    data.max = pagesLength - 1
    return {
        currentPage: data.page,
        onChangePage(current) {
            data.page = current
        },
    }
}
export function PageNumber(): Override {
    return {
        text: data.page.toString(),
    }
}
export function LeftButton(): Override {
    return {
        disabled: data.page === data.min,
        //  ==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，
        //  ===严格比较，只要类型不匹配就返回flase。
        onClick: () => {
            if (data.page > data.min) {
                data.page -= 1
            }
        },
    }
}
export function RightButton(): Override {
    return {
        disabled: data.page === data.max,
        //  ==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，
        //  ===严格比较，只要类型不匹配就返回flase。
        onClick: () => {
            if (data.page < data.max) {
                data.page += 1
            }
        },
        //这里不知道为什么用onTap就不行 头疼
    }
}
export function SkipButton(): Override {
    return {
        disabled: data.page === data.max,
        //  ==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，
        //  ===严格比较，只要类型不匹配就返回flase。
        onClick: () => {
            if (data.page < data.max) {
                data.page = data.max
            }
        },
    }
}

主要难点：

=== 三个等于号表示前后判断，返回的是 bollen 类型 （true or false）

const pagesLength = props.children[0].props.children.length
//这个可以计算出 Page组件的自组件的长度

text: data.page.toString()
//这里data.page返回的是number类型，通过toString()的方法可以将类型变为string