【React工作记录九十九】ant design mobile实现tab滚动效果和闪屏小记

简介: 【React工作记录九十九】ant design mobile实现tab滚动效果和闪屏小记

前言

大家好 我是歌谣 今天继续给大家带来前端工作中遇到的实际性问题 如何实现一个tab效果 以及闪屏问题


效果演示(tab滚动效果)

image.png


案例

遇到问题先去查api 查百度 一开始我以为是安卓的功能 直接 api打开


<DemoBlock title='超长自动滚动' padding='0'>
        <Tabs defaultActiveKey='1'>
          <Tabs.Tab title='Espresso' key='1'>
            1
          </Tabs.Tab>
          <Tabs.Tab title='Coffee Latte' key='2'>
            2
          </Tabs.Tab>
          <Tabs.Tab title='Cappuccino' key='3'>
            3
          </Tabs.Tab>
          <Tabs.Tab title='Americano' key='4'>
            4
          </Tabs.Tab>
          <Tabs.Tab title='Flat White' key='5'>
            5
          </Tabs.Tab>
          <Tabs.Tab title='Caramel Macchiato' key='6'>
            6
          </Tabs.Tab>
          <Tabs.Tab title='Cafe Mocha' key='7'>
            7
          </Tabs.Tab>
        </Tabs>
      </DemoBlock>



实现代码

<Tabs onChange={handleClickData}>
        {styleList && styleList.map((item: any, index: any) => (
          <Tabs.Tab title={item.name} key={item.name}>
            <SearchBar onChange={onSearch} placeholder='请输入裁剪方案' />
            <Space direction="vertical" block>
              <Radio.Group onChange={(val) => handleClick(val)}>
                <List>
                  {materiel && materiel.map((materiel) => (
                    <ListItemWithCheckbox key={materiel} item={materiel} />
                  ))}
                </List>
                {/* <Space direction="vertical" block>
            {materiel &&
              materiel.map((item, index) => (
                <Radio value={item.id}>{item.name}</Radio>
              ))}
          </Space> */}
              </Radio.Group>
            </Space>
          </Tabs.Tab>
        ))}



其中数组的格式是[{id:xxxx,name:xxx},....]格式 不多说 直接实现


闪屏

安装道手机端会有闪屏演示 先去查询百度 看到的是vue的api maskStyle={{ animation: 'none' }}


解决方案

<Popup
                              visible={visible2}
                              maskStyle={{ animation: 'none' }}
                              bodyStyle={{ textAlign: "center" }}
                            >
                              <Form form={formReason}>
                                <Form.Item name="reason" label="暂停原因">
                                  <TextArea placeholder="请输入暂停原因" onChange={handleInput}></TextArea>
                                </Form.Item>
                              </Form>
                              <Button color='primary' style={{ width: "50%" }} onClick={() => {
                                setVisible2(false)
                              }}>取消</Button>
                              <Button color='primary' style={{ width: "50%" }} onClick={handleClickPause}>确定</Button>
                            </Popup>




同向对比得到解决 或许是样式的问题 当时设置了高度和lineheight 就不过多验证了

相关文章
|
12天前
|
前端开发 UED 开发者
React 滚动监听 Scroll Listener
本文介绍React中实现滚动监听的方法,涵盖基本概念、常见问题及解决方案。通过监听`window`对象的`scroll`事件,开发者可以在用户滚动时触发自定义逻辑。文章详细探讨了冗余调用、组件卸载时未清理事件监听器、滚动位置不一致等常见问题,并提供了防抖、节流、保存滚动位置等解决方案。同时,强调了跨浏览器兼容性和性能优化的重要性,帮助开发者在实际项目中更好地实现滚动监听功能。
53 17
|
28天前
|
存储 前端开发 UED
React 标签页组件 Tab
标签页(Tab)组件是现代Web应用中常见的UI元素,用于在有限空间内展示多个内容面板。本文介绍如何在React中实现功能完善的标签页组件,涵盖基本概念、状态管理、常见问题及解决方案。通过`useState`管理选中标签,使用CSS确保布局一致性和过渡效果,并解决性能和逻辑错误。高级功能如懒加载和持久化选择状态进一步提升用户体验。
56 16
监听 react-custom-scrollbars 滚动到底部
监听 react-custom-scrollbars 滚动到底部
|
4月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
8月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
222 0
|
8月前
|
前端开发
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
77 0
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
112 0
|
资源调度 前端开发
#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块
#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块
114 0
#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块
|
8月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
429 0