antd mobile（antd-Mobile走马灯Carousel遇到的坑）

本文目录

• antd-Mobile走马灯Carousel遇到的坑
• antd-mobile的ListView组件踩坑
• [BUG]react引入antd-mobile报错
• antdmobile怎么下载旧版本
• 二次封装antd-mobile组件库
• reactantd-mobile项目中如何实现css与less局部作用域化的功能

antd-Mobile走马灯Carousel遇到的坑

问题：当Carousel数据通过接口获取时，自动切换效果就会无效，且首页展示的高度为默认的最小高度；只有手动切换一张之后，才能启动自动切换，且高度恢复为正常高度；
原因：

解决方法一：设置flag值，等数据加载完之后，重新render，此时再加载Carousel组件，就能正常启动了。这种方法的问题是，页面在重新加载时，会有2s左右的延时，性能很不好。
解决方法二： 加入componentDidUpdate函数

依然通过flag去控制是否自动切换，当接口请求结束flag设置为true，render结束后立即执行componentDidUpdate函数，此时数据已经加载完成，这时通过flag设置成自动切换，之所以取反，是因为flag一直为true就会死循环了。亲测如果没有componentDidUpdate函数，只通过componentDidMount函数以及display={flag}来控制，也是行不通的。
通过百度多种尝试后最后一个可行，但有些原理还不是特别清楚，欢迎指正。

antd-mobile的ListView组件踩坑

一、ListView容器不加固定高度就无法展示问题

如题，但有的情况下我们不好确定固定高度，这时可以加个useBodyScroll属性，使用html的body作为滚动容器，就不需要设置固定高度了。

二、加了useBodyScroll属性后不触发onScroll和onEndReached事件

在上面的基础上加了useBodyScroll属性后，发现onScroll和onEndReached事件不生效了，这是因为我在ListView外层有一个其他元素，导致onScroll事件失效了，解决办法是把外层元素去掉，如果想要外层元素，就不要加useBodyScroll属性了。

[BUG]react引入antd-mobile报错

Module not found: Error: Can’t resolve ’antd-mobile/es/config-provider’
报错原因：babel.config.js配置错误
解决方法如下：

antdmobile怎么下载旧版本

在浏览器搜索下载。
打开浏览器，在搜索框输入antdmobile旧版本，然后点击搜索，会出现很多下载文章，随便点击进入一个，点击下载就可以了。

二次封装antd-mobile组件库

项目使用了typescript + less + react + antd-mobile 开发。

开发过程中进行了三种方式的尝试：webpack+rollup+tsc
1.rm -rf dist && tsc -p tsconfig.json && lessc src/index.less ./dist/index.css
2.rm -rf dist && webpack --mode production
3.rollup -wc

tsc+less：
效果：打包ts，less需要手动整合，不能按需加载
webpack:
效果：打包ts，会把webpack的东西打包进项目里，打包时间长

rollup 效果最好，最简单

microbundle-crl 这是一个封装好的配置rollup打包组件库的插件
package.json 配置 "build": "microbundle-crl --no-compress --format modern" 打包成 es6

reactantd-mobile项目中如何实现css与less局部作用域化的功能

这篇文章给大家介绍的内容是关于react antd-mobile项目中如何实现 css 与 less 局部作用域化的功能，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1、前言最近搭建的 react 项目想引入 less ,并实现样式局部作用域化，但是在网上找了很多方法试过了都不行，最后打到解决方法，在此记下这惨痛的历程。
2、create-react-appcreate-react-app 是业界最优秀的 React 相关应用开发工具之一，本文档就是以此工具来使用 antd-mobile 组件。
安装和初始化#$ npm install -g create-react-app
# 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
$ create-react-app my-app
$ cd my-app
***隐藏网址***
3、修改 css 配置下面是修改文件 webpack.config.js。
module.exports = {
entry: __dirname + ’/index.js’,
output: {
publicPath: ’/’,
filename: ’./bundle.js’
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ’babel’,
query: {
presets:
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader?modules"
},
]
}
};上面代码中，关键的一行是style-loader!css-loader?modules，它在css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。
4、 配置 less首先安装 less 和 less-loader
npm i --save-dev less less-loader然后在 webpack.config.dev 中配置 less :
//这里我开启自己编写的less文件的css modules功能 除了node_modules库中的less，
//也就是可以过滤掉antd库中的样式
{
test: /\.less$/,
exclude: ,
use: [
require.resolve(’style-loader’),
{
loader: require.resolve(’css-loader’),
options: {
modules: true,
localIndexName: ""
},
},
{
loader: require.resolve(’less-loader’), // compiles Less to CSS
},
],
},5、完整配置送上完整的 webpack.config.dev 配置：
’use strict’;
const autoprefixer = require(’autoprefixer’);
const path = require(’path’);
const webpack = require(’webpack’);
const HtmlWebpackPlugin = require(’html-webpack-plugin’);
const CaseSensitivePathsPlugin = require(’case-sensitive-paths-webpack-plugin’);
const InterpolateHtmlPlugin = require(’react-dev-utils/InterpolateHtmlPlugin’);
const WatchMissingNodeModulesPlugin = require(’react-dev-utils/WatchMissingNodeModulesPlugin’);
const eslintFormatter = require(’react-dev-utils/eslintFormatter’);
const ModuleScopePlugin = require(’react-dev-utils/ModuleScopePlugin’);
const getClientEnvironment = require(’./env’);
const paths = require(’./paths’);
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = ’/’;
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
const publicUrl = ’’;
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// This is the development configuration.
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
// You may want ’eval’ instead if you prefer to see the compiled output in DevTools.
***隐藏网址***
devtool: ’cheap-module-source-map’,
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
entry: [
// We ship a few polyfills by default:
require.resolve(’./polyfills’),
// Include an alternative client for WebpackDevServer. A client’s job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve(’webpack-dev-server/client’) + ’?/’,
// require.resolve(’webpack/hot/dev-server’),
require.resolve(’react-dev-utils/webpackHotDevClient’),
// Finally, this is your app’s code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn’t blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
],
output: {
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It’s just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: ’static/js/bundle.js’,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: ’static/js/.chunk.js’,
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =》
path.resolve(info.absoluteResourcePath).replace(/\\/g, ’/’),
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
***隐藏网址***
modules: .concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
***隐藏网址***
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: ,
alias: {
// Support React Native Web
***隐藏网址***
’react-native’: ’react-native-web’,
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you’d like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, ),
],
},
module: {
strictExportPresence: true,
rules: [
// TODO: Disable require.ensure as it’s not a standard language feature.
***隐藏网址***
// { parser: { requireEnsure: false } },
// First, run the linter.
// It’s important to do this before Babel processes the JS.
{
test: /\.(js|jsx|mjs)$/,
enforce: ’pre’,
use: [{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve(’eslint’),
},
loader: require.resolve(’eslint-loader’),
}, ],
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: ,
loader: require.resolve(’url-loader’),
options: {
limit: 10000,
name: ’static/media/’,
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve(’babel-loader’),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
{
test: /\.css$/,
loader: "style-loader!css-loader?modules"
},
//@Lynn 这里我开启自己编写的less文件的css modules功能 除了node_modules库中的less，
//也就是可以过滤掉antd库中的样式
{
test: /\.less$/,
exclude: ,
use: [
require.resolve(’style-loader’),
{
loader: require.resolve(’css-loader’),
options: {
modules: true,
localIndexName:""
},
},
{