前言
大家好 我是歌谣 今天继续给大家带来前端工作中遇到的实际性问题 如何实现一个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 就不过多验证了
