精华内容
参与话题
问答
  • antd mobile 的picker组件

    2019-04-21 00:31:00
    antd mobile 的picker组件onchange如何过去label和value值?
  • antd mobile安装步骤

    2018-09-06 14:21:00
    1.npm install -g create-react-app 2.create-react-app my-app ...5.npm install antd-mobile --save 6.入口页面 (html 或 模板) 相关设置:(参考:https://mobile.ant.design/docs/react/in...

    1. npm install -g create-react-app

    2. create-react-app my-app

    3. cd my-app

    4. npm start

    5. npm install antd-mobile --save

    6. 入口页面 (html 或 模板) 相关设置:(参考:https://mobile.ant.design/docs/react/introduce-cn#3.-%E4%BD%BF%E7%94%A8)

    7. npm install react-app-rewired --save-dev (对应packpage.json修改以及创建config-overrides.js 参看此网址:https://mobile.ant.design/docs/react/use-with-create-react-app-cn)

    8.npm install babel-plugin-import --save-dev( config-overrides.js的修改参看7的网址)

    9. npm install --save react-app-rewire-less  

    10. npm install --save-dev less-loader less

     

    注:这是在不用npm run eject暴露其他配置的前提下,安装less;如果执行该操作,再启动项目时会有报错,也有提出再npm install一下就可以了(没有试这个方法);

          官方给出的例子时没有暴露配置的(地址:https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-app)

    转载于:https://www.cnblogs.com/HONGYE1994/p/9597417.html

    展开全文
  • react使用antd mobile

    2020-11-11 11:50:53
    Ant-design框架 1. create-react-app antd 2. npm install antd-mobile --save npm run eject 如果不成功: git add . git commit -m 'init' npm run eject

    Ant-design框架

            1.  create-react-app antd
            2.  npm install antd-mobile --save
                npm run eject
                如果不成功:  git add . 
                            git commit -m 'init'
                            npm run eject
                            
            3.  修改package.json 
                "babel": {
                    "presets": [
                    "react-app"
                    ],
                    "plugins": [
                    [
                        "import",
                        {
                        "libraryName": "antd-mobile",
                        "style": "css"
                        }
                    ]
                    ]
                },         
            4. 在根目录创建 config-overrides.js写入以下内容
                const { override, fixBabelImports } = require('customize-cra');
                    module.exports = override(
                    fixBabelImports('import', {
                        libraryName: 'antd-mobile',
                        style: 'css',
                    })
                );
    
            5.  全部使用 import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
                按需要引入  
                    1.需要安装插件 npm install babel-plugin-import --save-dev
                    2.新建  ButtonCom.js 
                    以引入button为例:[复制代码演示](https://mobile.ant.design/components/button-cn/)
    
                    3.配置  index.js
    
                import React from 'react';
                import ReactDOM from 'react-dom';
                import ButtonCom from './ButtonCom'
    
    			ReactDOM.render(
    			  <React.StrictMode>
    			    <ButtonCom />
    			  </React.StrictMode>,
    			  document.getElementById('root')
    			);	
            6.  执行 yarn start
    

    可以看到目前页面已经有样式了
    参考图片

    展开全文
  • 基于 antd mobile 的 react 项目模版
  • dataSource={this.state.dataSource} renderHeader={() => 国家管理</span>} renderFooter={() => (, textAlign: 'center' }}> {this.state.isLoading ? 'Loading...' : 'Loaded'} ...
  • antdmobile组件思维导图

    2019-06-04 12:32:00
    转载于:https://www.cnblogs.com/fly-piglet/p/10972837.html

    006tNc79gy1g3p0jq2r6kj30u01b71kz.jpg

    转载于:https://www.cnblogs.com/fly-piglet/p/10972837.html

    展开全文
  • 开发中写长列表下拉刷新,因为官方案例太啰里八嗦了,很多杂的东西,对第一次接触的人不太友好,自己摸索了挺长时间,记录一下 const data = [ { des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题...

    开发中写长列表下拉刷新,因为官方案例太啰里八嗦了,很多杂的东西,对第一次接触的人不太友好,自己摸索了挺长时间,记录一下

    const data = [
      {
        des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题1',
      },
      {
        des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题2',
      },
      {
        des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题3',
      },
      // {
      //   des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题1',
      // },
      // {
      //   des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题2',
      // },
      // {
      //   des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题3',
      // },
    ];
    
    class ArticleList extends React.Component {
      constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
        });
    
        this.state = {
          dataSource,
          isLoading: true,
          height: document.documentElement.clientHeight,
          dataArr: [],
          datas: [],
          pageNo: 1,
          pageSize: 1,
          hasMore: true,
        };
      }
    
      componentDidMount() {
        setTimeout(() => {
          this.getData()
        }, 600);
      }
    
      // 数据请求
      getData() {
        const dataList = data
        // 这里表示上拉加载更多
        // 合并state中已有的数据和新增的数据
        var dataArr = this.state.dataArr.concat(dataList) //关键代码
        this.setState({
          pageNo: this.state.pageNo,
          dataSource: this.state.dataSource.cloneWithRows(dataArr), // 数据源中的数据本身是不可修改的,要更新datasource中的数据,请(每次都重新)调用cloneWithRows方法
          dataArr: dataArr // 保存新数据进state
        })
        // 判断总如果数据就一页 就不用加载了
        if(this.state.pageSize === 1){
          this.setState({isLoading: false})
        }
      }
      // 触底加载
      onEndReached = (event) => {
        if (this.state.isLoading && !this.state.hasMore) {
          return;
        }
        // 每次触底请求一遍数据
        setTimeout(()=>{
          this.setState({
            // isLoading: false,
            pageNo: this.state.pageNo + 1, // 加载下一页
          }, ()=> {
            // 如果大于总数据页数 就停止加载
            if(this.state.pageNo > 3){
              this.setState({isLoading: false})
              return
            }
            this.getData()
          })
        }, 2000)
        
      }
      render() {
        // 在这里循环每条数据 渲染页面
        const row = (rowData, sectionID, rowID) => {
        // 这里可以自己打印一下 这三个内置的参数,一目了然
          return (
            <li key={rowData}>
              <h3>{rowData.des}</h3>
              <div>
                <span>2020-10-10</span>
                <span>
                  <img src={images.icon_yueduliang} alt="icon_yueduliang"/>
                  123
                </span>
              </div>
            </li>
          );
        };
    
        return (
          <div className={style.articleList}>
            <ul>
              <ListView
                dataSource={this.state.dataSource}
                renderFooter={() => (<div style={{ padding: 10, textAlign: 'center', fontSize: 13, color: '#C2C2C2' }}>
                  {this.state.isLoading ? '加载中...' : '没有更多了'}
                </div>)}
                renderRow={row}
                style={{
                  height: this.state.height,
                  overflow: 'auto'
                }}
                // pageSize={5}
                scrollRenderAheadDistance={100}
                onEndReached={this.onEndReached}
                onEndReachedThreshold={10}
              />
            </ul>
          </div>
        );
      }
    }
    
    展开全文
  • antd mobile(一) 环境搭建

    万次阅读 2017-08-11 23:26:04
    现在用个组件可能就是n步了,一个下午都没把antd mobile的组件展示出来,各种坑啊,看着官方文档一步一步也还是满地坑。 吐槽就免了,还是记录下来吧: 第一步:采用dva创建项目,这个如果不会看我前面写的文章...
  • antd mobile(七) 固定NavBar

    千次阅读 2017-08-17 22:03:17
    只能说antd mobile真的是为淘宝内部写的框架,竟然连固定NavBar显示的接口都没暴露出来。也就是NavBar不跟着屏幕滚动而滚动。说实话如果是用reactNative 开发当然不需要该接口,但问题是现在项目是做需要挂在微信端...
  • 但是发现ant design mobile(后面简称ANTDM)里很多的资源。于是就分析一下,学习学习。 ANTDM直接使用了typescript,没有用ES2015,不过这不会是障碍,反而是学习typescript的一个好机会。基本上可以学的开源项目...
  • 在搭建完之后 =》搭建教程... 2019年3月28日 , 今天搜react +antd mobile高清方案,结果搜出来的全是修改 webpack.config.dev.js文件的 然鹅新版的cra(create-react-app)生成的项目只有一个webpack.config.js...
  • 利用react全家桶以及蚂蚁金服antd-mobile开发H5页面
  • cnpm install antd-mobile --save cnpm install babel-plugin-import --save-dev cnpm install react-app-rewired customize-cra --save-dev 2、设置按需加载和按需打包 (1)在项目根目录创建(与src同级),...
  • 这两天在用 ant design mobile 的时候碰到个问题:组件引入失败。 一直解决不掉,查了半天不知道是我的理解问题还是怎么,就是找不到正确方法。(官网方法居然不行,增加学习难度啊!啊喂!~) 最后让我找到了这么一...

空空如也

1 2 3 4 5 ... 20
收藏数 770
精华内容 308
关键字:

antdmobile