ant design mobile实现tab滚动效果和闪屏小记

前言

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

效果演示(tab滚动效果)

案例

遇到问题先去查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 就不过多验证了

总结

遇到问题不要慌 想着如何解决问题就行 我是歌谣 想加入前端巅峰人才交流群私信我