jQWidgets jqxScrollView changePage() 方法

简介

changePage() 方法是 jQWidgets 提供的 API 之一，用于在 jqxScrollView 组件中切换页面。jqxScrollView 是一个能够显示大量信息且支持自定义界面的组件，常见于需要滚动显示大量数据的场景。

方法签名

changePage(index: number, duration: number, easing: string): void;

参数说明

• index：表示要切换到的页面索引，从 0 开始计数；
• duration：表示页面切换的持续时间（单位为毫秒），对应 CSS 中的 transition-duration；
• easing：表示页面切换的缓动函数，对应 CSS 中的 transition-timing-function。

使用示例

基本使用

1. 首先，创建一个含有多个子元素（即页面）的父元素，例如下面这个 HTML 示例中的 #scrollview。

   <div id="scrollview">
       <div>页面 1 内容</div>
       <div>页面 2 内容</div>
       <div>页面 3 内容</div>
   </div>
   

2. 使用 jQWidgets 提供的 jqxScrollView 对该父元素进行初始化，可以自定义各种控制按钮和滚动条的样式，例如下面这个示例。

   $(function () {
       $('#scrollview').jqxScrollView({
           width: 300,
           height: 200,
           showButtons: true,
           showScrollbar: false,
           buttonsOffset: [0, 0],
           theme: 'material'
       });
   });
   

3. 在某个事件（例如点击按钮）触发时，调用 changePage() 方法切换页面。

   $('#button-prev').click(function () {
       $('#scrollview').jqxScrollView('changePage', -1);
   });
   $('#button-next').click(function () {
       $('#scrollview').jqxScrollView('changePage', +1);
   });
   

高级使用

1. 如果不希望使用 jQWidgets 自带的控制按钮和滚动条，可以手动创建一个分页器（即页码）组件，并在页码被点击时调用 changePage() 方法切换页面。例如下面这个 HTML 示例中的 .page-item。

   <div id="scrollview">
       <div>页面 1 内容</div>
       <div>页面 2 内容</div>
       <div>页面 3 内容</div>
   </div>
   <div id="pagination">
       <span class="page-item">1</span>
       <span class="page-item">2</span>
       <span class="page-item">3</span>
   </div>
   

2. 使用 jQWidgets 提供的 jqxScrollView 对该父元素进行初始化，并禁用自带的控制按钮和滚动条，例如下面这个示例。

   $(function () {
       $('#scrollview').jqxScrollView({
           width: 300,
           height: 200,
           showButtons: false,
           showScrollbar: false,
           theme: 'material'
       });
   });
   

3. 在某个事件（例如点击页码）触发时，获取目标页面索引，并调用 changePage() 方法切换页面。需要注意的是，该示例中的页码是从 1 开始计数，而非 0。

   $('#pagination .page-item').click(function (event) {
       var pageIndex = $(this).text() - 1;
       $('#scrollview').jqxScrollView('changePage', pageIndex);
   });
   

总结

通过 changePage() 方法，开发者可以在 jQWidgets 中轻松实现对 jqxScrollView 组件的页面切换功能，并能够灵活自由地组合搭配各种控制按钮和分页器等 UI 元素，满足各种使用场景的需求。