前段写一个view，命名为bigview， 里面包含14个内容，循环这个列表在列中显示，固定bigview使其不能动，按上下按键时候，其中子页面滚动显示，并且显示内容在bigview的中间，其余的页面跟随滚动，详细实例代码

要在前端编写这样一个大视图（bigview），我们可以使用HTML、CSS和JavaScript配合，这里给出一个简单的React.js示例，假设我们使用了Ant Design库来构建界面。我们将使用`<Scrollbars>`组件来实现滚动功能，因为React的原生滚动可能会有限制。

首先，安装必要的依赖：

npm install react antd @react-scrollbars/react @react-scrollbars/web

然后创建一个BigView组件:

import React from 'react';
import { View, ScrollView } from 'antd';
import { Scrollbars } from '@react-scrollbars/react';

const BigView = ({ items }) => {
  return (
    <div className="bigview" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}>
      {/* 使用Scrollbars包装ScrollView */}
      <Scrollbars autoHide>
        <ScrollView>
          {items.map((item, index) => (
            // 循环渲染14个内容项，使用绝对定位居中
            <div key={index} style={{ position: 'absolute', top: index * (14 / items.length) + 'px', left: '50%', transform: 'translateX(-50%)' }}>
              <p>{item}</p> /* 这里替换为你实际的内容 */
            </div>
          ))}
        </ScrollView>
      </Scrollbars>
    </div>
  );
};

export default BigView;

接下来，你可以在需要的地方使用BigView组件：

import BigView from './BigView';

function App() {
  const items = ['内容1', '内容2', ...]; // 你的数据列表

  return (
    <div>
      <button onClick={() => handleScroll('up')}>上</button>
      <button onClick={() => handleScroll('down')}>下</button>
      
      {/* 使用BigView组件并传递内容数组 */}
      <BigView items={items} />
    </div>
  );

  // 滚动处理函数
  function handleScroll(direction) {
    if (direction === 'up') {
      document.getElementById('bigview').scrollTop -= 1; // 假设bigview有id='bigview'
    } else if (direction === 'down') {
      document.getElementById('bigview').scrollTop += 1;
    }
  }
}

export default App;

这只是一个基础示例，实际应用中可能需要根据项目需求调整样式和事件监听。注意，上述代码使用的是绝对定位来保证元素在滚动时保持居中，如果你需要更复杂的滚动效果，可能需要考虑引入第三方滚动库或者其他自定义解决方案。