【React工作记录九十九】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 就不过多验证了

总结

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