feat(自定义tabbar): 完善自定义tabbbar

This commit is contained in:
xuan 2022-09-01 19:19:57 +08:00
parent caf7066663
commit 2a964829b4
26 changed files with 712 additions and 228 deletions

View File

@ -1,5 +1,5 @@
{
"extends": ["taro/react"],
"extends": ["taro/react","plugin:react-hooks/recommended"],
"rules": {
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"

154
README.md Normal file
View File

@ -0,0 +1,154 @@
# 阿里图标库 iconfont 使用 Symbol 我们使用了 mini-program-iconfont-cli 这个库
用法如下:
# Step 1
安装插件
```bash
# Yarn
yarn add mini-program-iconfont-cli --dev
# Npm
npm install mini-program-iconfont-cli --save-dev
```
# Step 2
生成配置文件
```bash
npx iconfont-init
# 可传入配置文件输出路径
# npx iconfont-init --output iconfont.json
```
此时项目根目录会生成一个`iconfont.json`的文件,内容如下:
```json
{
"symbol_url": "请参考README.md复制 http://iconfont.cn 官网提供的JS链接",
"save_dir": "./iconfont",
"use_rpx": false,
"trim_icon_prefix": "icon",
"default_icon_size": 18
}
```
### 配置参数说明:
#### symbol_url
请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是`.css`后缀。如果你现在还没有创建iconfont的仓库那么可以填入这个链接去测试`http://at.alicdn.com/t/font_1373348_kk9y3jk2omq.js`
![](https://github.com/fwh1990/mini-program-iconfont-cli/blob/master/images/symbol-url.png?raw=true)
#### save_dir
根据iconfont图标生成的组件存放的位置。每次生成组件之前该文件夹都会被清空。
#### use_rpx
使用微信提供的[尺寸单位rpx](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D)还是普通的像素单位`px`。默认值为false即使用`px`
#### trim_icon_prefix
如果你的图标有通用的前缀,而你在使用的时候又不想重复去写,那么可以通过配置这个选项把前缀统一去掉。
#### default_icon_size
我们将为每个生成的图标组件加入默认的字体大小当然你也可以通过传入props的方式改变这个size值。
# Step 3
生成小程序标准组件
```bash
# 可传入配置文件路径
# npx iconfont-XXXXX --config iconfont.json
# 微信小程序
npx iconfont-wechat
# 支付宝小程序
npx iconfont-alipay
# 百度小程序
npx iconfont-baidu
# 头条小程序
npx iconfont-toutiao
# 快手小程序
npx iconfont-kuaishou
# QQ小程序
npx iconfont-qq
```
生成后查看您设置的保存目录中是否含有所有的图标
-------
在生成代码之前,你可以顺便参考[snapshots目录](https://github.com/iconfont-cli/mini-program-iconfont-cli/tree/master/snapshots)自动生成的快照文件。
# Step 4
#### 微信小程序 | QQ小程序
在根目录的`app.json`文件中引入全局图标组件避免每个page都引入麻烦
```json5
// 绝对路径
{
"usingComponents": {
"iconfont": "/iconfont/iconfont"
}
}
```
#### 支付宝小程序 | 百度小程序 | 头条小程序 快手小程序
不支持全局引入您需要在各自page的`.json`文件中引入。
```json5
// 绝对路径
{
"usingComponents": {
"iconfont": "/iconfont/iconfont"
}
}
```
# 使用
在page中使用图标。
```jsx harmony
// 原色彩
<iconfont name="alipay" />
// 单色:红色
<iconfont name="alipay" color="red" />
// 多色:红色+橘色
<iconfont name="alipay" color="{{['red', 'orange']}}" size="300" />
// 不同格式的颜色写法
<iconfont name="alipay" color="{{['#333', 'rgb(50, 124, 39)']}}" />
// 与文字对齐
<view style="display: flex; alignItems: center;">
<text>Hello</text>
<iconfont name="alipay" />
</view>
```
# 更新图标
当您在iconfont.cn中的图标有变更时只需更改配置`symbol_url`,然后再次执行`Step 3`即可生成最新的图标组件。
```bash
# 修改 symbol_url 配置后执行:
# 微信小程序
npx iconfont-wechat
# 支付宝小程序
npx iconfont-alipay
# 百度小程序
npx iconfont-baidu
# 头条小程序
npx iconfont-toutiao
# 快手小程序
npx iconfont-kuaishou
# QQ小程序
npx iconfont-qq
```
--------
欢迎使用,并给我一些反馈和建议,让这个库做的更好。

5
app.json Normal file
View File

@ -0,0 +1,5 @@
{
"usingComponents": {
"iconfont": "/src/components/iconfont/iconfont"
}
}

View File

@ -37,8 +37,9 @@ module.exports = {
alias: {
'@': path.resolve(__dirname, '..', 'src'),
},
sass: {
resource: path.resolve(__dirname, '..', 'src/styles/common.scss'),
resource: [path.resolve(__dirname, '..', 'src/styles/common.scss'), path.resolve(__dirname, '..', 'src/styles/iconfont.scss')],
},
// plugins: [
// '@tarojs/plugin-react-devtools'

View File

@ -19,6 +19,7 @@ const CURRENT_VERSION = `Version: ${JSON.stringify(process.env.CODE_BRANCH || ve
)
const config = {
appid: 'wx64fe67f111d52457', // 测试/体验环境
projectName: 'SpiderSteward',
date: '2022-4-6',
designWidth: 750,

View File

@ -38,6 +38,6 @@ module.exports = {
'@': path.resolve(__dirname, '..', 'src'),
},
sass: {
resource: path.resolve(__dirname, '..', 'src/styles/common.scss'),
resource: [path.resolve(__dirname, '..', 'src/styles/common.scss'), path.resolve(__dirname, '..', 'src/styles/iconfont.scss')],
},
}

7
iconfont.json Normal file
View File

@ -0,0 +1,7 @@
{
"symbol_url": "//at.alicdn.com/t/c/font_3619513_mrvpsyqxmzr.js",
"save_dir": "./src/components/iconfont",
"use_rpx": false,
"trim_icon_prefix": "icon",
"default_icon_size": 18
}

View File

@ -44,6 +44,7 @@
"@tarojs/runtime": "3.5.4",
"@tarojs/taro": "3.5.4",
"big.js": "^6.2.1",
"classname": "^0.0.0",
"dayjs": "^1.11.3",
"qs": "^6.10.3",
"react": "^18.2.0",
@ -73,6 +74,7 @@
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^4.2.0",
"mini-program-iconfont-cli": "^0.6.1",
"react-refresh": "0.11.0",
"stylelint": "9.3.0",
"typescript": "^4.1.0",

View File

@ -15,30 +15,23 @@ export default defineAppConfig({
backgroundColor: '#ffffff',
},
tabBar: {
custom: true,
list: [
{
pagePath: 'pages/index/index',
text: '首页',
iconPath: './styles/tabbar/list.png',
selectedIconPath: './styles/tabbar/list_on.png',
},
{
pagePath: 'pages/shopping/index',
text: '购物',
iconPath: './styles/tabbar/order.png',
selectedIconPath: './styles/tabbar/order_on.png',
},
{
pagePath: 'pages/order/index',
text: '订单',
iconPath: './styles/tabbar/order.png',
selectedIconPath: './styles/tabbar/order_on.png',
},
{
pagePath: 'pages/user/index',
text: '我的',
iconPath: './styles/tabbar/my.png',
selectedIconPath: './styles/tabbar/my_on.png',
},
],
color: '#707070',
@ -46,5 +39,9 @@ export default defineAppConfig({
backgroundColor: '#fff',
borderStyle: 'white',
},
usingComponents: {
'custom-wrapper': '/custom-wrapper',
},
subPackages: [],
})

View File

@ -1,6 +1,14 @@
@import './styles/common.scss';
@import './styles/iconfont.scss';
page{
height: 100%;
}
/**
由于Cover-view标签并不支持iconfont 所以需要把 .ttf 转成 base64 之后得到的 stylesheet.css 文件覆盖掉 iconfont.css 里的 @font-face 即可
[转换工具](https://transfonter.org/)
[教程](https://blog.csdn.net/VoidLuffy/article/details/123530341)
[相关说明](https://developers.weixin.qq.com/community/develop/doc/000a60f7d58a982f08d7ddfc456000)
*/
page {
height: 100%;
}

View File

@ -0,0 +1,63 @@
Component({
properties: {
// wodekefu | dizhi | shouhouzhongxin | wodeshoucang | shoukuanliebiao | madanguanli | qusechazhao | pandiansaoma | yaoqingma | duizhang | tihuoliebiao | yangpinduibi | yansequyang | fahuoliebiao | yuncangkucun | xiaoshou | qianzhicangkucun | lingquseka | gouwu1 | dingdan1 | gerenzhongxin1 | shouye1 | gerenzhongxin | dingdan | shouye | gouwu
name: {
type: String,
},
// string | string[]
color: {
type: null,
observer: function(color) {
this.setData({
colors: this.fixColor(),
isStr: typeof color === 'string',
});
}
},
size: {
type: Number,
value: 18,
observer: function(size) {
this.setData({
svgSize: size,
});
},
},
},
data: {
colors: '',
svgSize: 18,
quot: '"',
isStr: true,
},
methods: {
fixColor: function() {
var color = this.data.color;
var hex2rgb = this.hex2rgb;
if (typeof color === 'string') {
return color.indexOf('#') === 0 ? hex2rgb(color) : color;
}
return color.map(function (item) {
return item.indexOf('#') === 0 ? hex2rgb(item) : item;
});
},
hex2rgb: function(hex) {
var rgb = [];
hex = hex.substr(1);
if (hex.length === 3) {
hex = hex.replace(/(.)/g, '$1$1');
}
hex.replace(/../g, function(color) {
rgb.push(parseInt(color, 0x10));
return color;
});
return 'rgb(' + rgb.join(',') + ')';
}
}
});

View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

View File

@ -0,0 +1,77 @@
<!--wodekefu-->
<view wx:if="{{name === 'wodekefu'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M832 516.752a193.2 193.2 0 0 1 79.92 150.864l0.08 5.84v13.088c0 53.152-21.44 101.312-56.144 136.272l-3.904 3.84L912 880H657.44a192.72 192.72 0 0 1-127.536-48c165.2-1.024 299.152-133.808 302.048-298.56l0.064-16.688z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3Cpath d='M521.2 144C701.68 144 848 290.32 848 470.8v34.4C848 685.68 701.68 832 521.2 832H96l100.256-91.264A325.856 325.856 0 0 1 96 505.2v-34.4C96 290.32 242.32 144 422.8 144h98.4z m-151.744 275.2c-37.76 0-68.368 30.8-68.368 68.8s30.608 68.8 68.368 68.8c37.76 0 68.368-30.8 68.368-68.8s-30.608-68.8-68.368-68.8z m205.088 0c-37.76 0-68.368 30.8-68.368 68.8s30.608 68.8 68.368 68.8c37.76 0 68.368-30.8 68.368-68.8s-30.608-68.8-68.368-68.8z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--dizhi-->
<view wx:if="{{name === 'dizhi'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M512 64c194.4 0 352 154.24 352 344.48 0 63.424-29.328 143.76-88 241.008l-0.768 1.28-5.264 5.792C705.696 725.92 613.92 769.28 512 769.28c-104.72 0-198.752-45.808-263.232-118.528C189.6 552.976 160 472.192 160 408.48 160 218.24 317.6 64 512 64z m0 241.28c-61.392 0-111.152 49.856-111.152 111.36S450.608 528 512 528s111.152-49.856 111.152-111.36-49.76-111.36-111.152-111.36z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M775.232 650.752C740.4 708.336 695.312 771.84 640 841.232l-17.824 22.112-18.496 22.512c-3.136 3.776-6.304 7.584-9.504 11.392l-19.52 23.104-20.192 23.488c-6.848 7.904-13.808 15.856-20.88 23.888L512 992a4097.536 4097.536 0 0 1-42.448-48.16l-20.192-23.488-19.52-23.104c-3.2-3.808-6.368-7.616-9.504-11.392l-18.496-22.512L384 841.232c-55.328-69.408-100.416-132.896-135.248-190.48 64.48 72.72 158.512 118.528 263.232 118.528 101.92 0 193.696-43.376 257.968-112.72l5.28-5.808z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--shouhouzhongxin-->
<view wx:if="{{name === 'shouhouzhongxin'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M848 384a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H176a32 32 0 0 1-32-32V416a32 32 0 0 1 32-32h672z m-376.448 112H384l11.264 13.312 68.608 132.608h-71.168l-6.656 48.64h77.312l-13.312 95.232h77.824l13.312-95.232h77.824l6.656-48.64h-71.168L670.72 496h-83.504l-71.12 98.816L471.552 496z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M335.536 148.56a32 32 0 0 1 35.12 53.44l-2.192 1.44L307.488 240H832a32 32 0 0 1 31.92 29.6L864 272a32 32 0 0 1-29.6 31.92L832 304H192c-31.616 0-43.68-40.576-18.528-58.112l2.064-1.328 160-96z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--wodeshoucang-->
<view wx:if="{{name === 'wodeshoucang'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M512 128c6.48 0 13.072 1.424 19.264 4.448 8.592 4.16 15.552 11.024 19.792 19.488l98.88 197.44c3.808 7.6 11.152 12.864 19.68 14.08l221.088 31.68c23.808 3.392 40.304 25.168 36.832 48.64a42.704 42.704 0 0 1-12.688 24.544l-160 153.696c-6.16 5.92-8.96 14.432-7.52 22.8l37.776 217.008c4.064 23.36-11.84 45.536-35.552 49.552-9.44 1.6-19.152 0.08-27.632-4.32l-197.76-102.448a26.432 26.432 0 0 0-12.16-2.96z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3Cpath d='M512 128v673.648c-4.176 0-8.352 0.976-12.16 2.96L302.08 907.04c-21.28 11.04-47.616 2.976-58.816-18.016a42.368 42.368 0 0 1-4.368-27.216L276.64 644.8a25.52 25.52 0 0 0-7.52-22.8L109.152 468.32a42.48 42.48 0 0 1-0.8-60.688 43.776 43.776 0 0 1 24.928-12.512l221.12-31.664a26.112 26.112 0 0 0 19.664-14.08l98.88-197.44A43.616 43.616 0 0 1 511.984 128z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--shoukuanliebiao-->
<view wx:if="{{name === 'shoukuanliebiao'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M832 128a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H288a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h544z m-128 592H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM542.176 208H464l10.064 11.76 61.248 117.152h-63.536l-5.952 42.96h69.04L522.976 464h69.488l11.872-84.128h69.488l5.952-42.96h-63.552L720 208h-74.56l-63.504 87.296L542.176 208z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M288 128a32 32 0 0 0-32 32v704a32 32 0 0 0 32 32h-80a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--madanguanli-->
<view wx:if="{{name === 'madanguanli'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M128 128m32 0l288 0q32 0 32 32l0 288q0 32-32 32l-288 0q-32 0-32-32l0-288q0-32 32-32Z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M544 128m32 0l288 0q32 0 32 32l0 288q0 32-32 32l-288 0q-32 0-32-32l0-288q0-32 32-32Z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M128 544m32 0l288 0q32 0 32 32l0 288q0 32-32 32l-288 0q-32 0-32-32l0-288q0-32 32-32Z' fill='{{(isStr ? colors : colors[2]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M544 544m32 0l80 0q32 0 32 32l0 288q0 32-32 32l-80 0q-32 0-32-32l0-288q0-32 32-32Z' fill='{{(isStr ? colors : colors[3]) || 'rgb(69,129,255)'}}' opacity='.6' /%3E%3Cpath d='M752 544m32 0l80 0q32 0 32 32l0 288q0 32-32 32l-80 0q-32 0-32-32l0-288q0-32 32-32Z' fill='{{(isStr ? colors : colors[4]) || 'rgb(69,129,255)'}}' opacity='.6' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--qusechazhao-->
<view wx:if="{{name === 'qusechazhao'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M868.528 816.8c59.36 0 107.472-46.48 107.472-103.824 0-38.224-35.824-102.496-107.472-192.816-71.648 90.32-107.472 154.592-107.472 192.816 0 57.344 48.112 103.84 107.472 103.84z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3Cpath d='M344 105.44l75.76 53.04c3.392 2.368 6.384 5.12 8.928 8.144 3.728 1.376 7.344 3.248 10.752 5.632l341.968 239.456a47.008 47.008 0 0 1 11.552 65.472L498.224 898.112a47.008 47.008 0 0 1-65.472 11.536L90.768 670.192a47.008 47.008 0 0 1-11.536-65.472l268.064-382.848-56.928-39.84A46.752 46.752 0 1 1 344 105.44z m112.528 192.928a40.336 40.336 0 0 0-56.128 9.904L221.424 563.76a40.288 40.288 0 0 0 44.448 61.76l382.24-113.232a40.288 40.288 0 0 0 11.68-71.648z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--pandiansaoma-->
<view wx:if="{{name === 'pandiansaoma'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M224 128h304v768H224a96 96 0 0 1-96-96V224a96 96 0 0 1 96-96z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3Cpath d='M128 480h768v64H128zM896 656v208a32 32 0 0 1-32 32H656l-0.016-64H832V656h64z m-704 0v176h175.984L368 896H160a32 32 0 0 1-32-32V656h64zM864 128a32 32 0 0 1 32 32v208h-64V192H655.984L656 128h208zM128 160a32 32 0 0 1 32-32h208l-0.016 64H192v176H128V160z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--yaoqingma-->
<view wx:if="{{name === 'yaoqingma'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M768 128a32 32 0 0 1 32 32v299.984L512 544l-288-84.016V160a32 32 0 0 1 32-32h512z m-112 240H368a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H368a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.5' /%3E%3Cpath d='M168.96 443.952L512 544l343.04-100.048a32 32 0 0 1 40.96 30.72V864a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V474.672a32 32 0 0 1 40.96-30.72z' fill='{{(isStr ? colors : colors[1]) || 'rgb(64,122,244)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--duizhang-->
<view wx:if="{{name === 'duizhang'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M864 96a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32h-128V288a32 32 0 0 0-29.6-31.92L704 256H288V128a32 32 0 0 1 32-32h544z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.5' /%3E%3Cpath d='M704 256a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h544zM375.552 464H288l11.264 13.312 68.608 132.608h-71.168l-6.656 48.64h77.312l-13.312 95.232h77.824l13.312-95.232h77.824l6.656-48.64h-71.168L574.72 464h-83.504l-71.12 98.816L375.552 464z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--tihuoliebiao-->
<view wx:if="{{name === 'tihuoliebiao'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M880 496v317.088A34.912 34.912 0 0 1 845.088 848H274.912A34.912 34.912 0 0 1 240 813.088V496h640zM240 242.912c0-19.28 15.632-34.912 34.912-34.912h570.176c19.28 0 34.912 15.632 34.912 34.912V432H240V242.912z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M224 144a16 16 0 0 1 16 16v668.112c7.84 5.28 14.624 12.032 19.888 19.888H880a32 32 0 0 1 32 32v16a32 32 0 0 1-32 32H259.872A72 72 0 1 1 160 828.144V224L112 224a16 16 0 0 1-16-16v-48a16 16 0 0 1 16-16h112z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--yangpinduibi-->
<view wx:if="{{name === 'yangpinduibi'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M528 80a32 32 0 0 1 32 32v800a32 32 0 0 1-32 32h-32a32 32 0 0 1-32-32v-64H160a32 32 0 0 1-32-32V208a32 32 0 0 1 32-32h304V112a32 32 0 0 1 32-32h32z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M560 176h304a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32H560V176z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--yansequyang-->
<view wx:if="{{name === 'yansequyang'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M760.896 104.704a32 32 0 0 1 45.264 0l113.12 113.136a32 32 0 0 1 0 45.264L828.8 353.6l22.624 22.624a32 32 0 0 1 0 45.248l-45.248 45.264a32 32 0 0 1-45.264 0L557.248 263.104a32 32 0 0 1 0-45.264l45.264-45.248a32 32 0 0 1 45.248 0L670.4 195.2l90.512-90.512z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M579.888 285.728l158.4 158.4-396 395.968a48 48 0 0 1-67.872 0l-22.624 22.624a64 64 0 1 1-90.512-90.512l22.624-22.624a48 48 0 0 1 0-67.872l395.984-396z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' opacity='.5' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--fahuoliebiao-->
<view wx:if="{{name === 'fahuoliebiao'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M864 416a32 32 0 0 1 32 32v416a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V448a32 32 0 0 1 32-32h704z m-80 320H528a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H608a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M748.8 192a32 32 0 0 1 28.24 16.944L896 432v16a32 32 0 0 0-32-32H160a32 32 0 0 0-32 32v-16l118.96-223.056A32 32 0 0 1 275.2 192h473.6z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--yuncangkucun-->
<view wx:if="{{name === 'yuncangkucun'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M848 432v445.088A34.912 34.912 0 0 1 813.088 912H210.912A34.912 34.912 0 0 1 176 877.088V432h672zM608 704H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3Cpath d='M536 64c108.8 0 197.328 86.88 199.936 195.072l0.016 1.024 3.936-2.624a112 112 0 1 1 63.952 206.464L800 464H392.8c-31.52 29.76-74.032 48-120.8 48-97.2 0-176-78.8-176-176s78.8-176 176-176c29.712 0 57.712 7.36 82.272 20.368C385.92 111.68 455.392 64 536 64z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--xiaoshou-->
<view wx:if="{{name === 'xiaoshou'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M511.92 496c159.808 0 298.16 97.36 365.056 239.152 13.76 29.184 25.264 72.912 34.496 131.2A53.312 53.312 0 0 1 858.784 928H518.768l63.552-80.736-70.4-342-70.4 342L505.024 928H165.152a53.312 53.312 0 0 1-52.592-61.808c9.664-60.08 21.712-105.056 36.16-134.912C216.288 591.6 353.568 496 511.92 496z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.5' /%3E%3Cpath d='M520 296m-216 0a216 216 0 1 0 432 0 216 216 0 1 0-432 0Z' fill='{{(isStr ? colors : colors[1]) || 'rgb(64,141,250)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--qianzhicangkucun-->
<view wx:if="{{name === 'qianzhicangkucun'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M904.032 338.016a22.016 22.016 0 0 0-1.456-4.432l-67.616-154C823.28 147.776 790.944 128 750.272 128h-474.56c-39.856 0-70.832 19.392-82.064 50.064l-72.672 157.12a31.776 31.776 0 0 0-1.04 3.696A134.816 134.816 0 0 0 112 384.224c0.064 53.76 32.304 102.848 84.08 128.048 21.312 10.448 46.432 15.728 74.64 15.728h0.096c47.328-0.096 91.168-19.136 121.056-51.696 29.728 32.272 73.232 51.2 120.48 51.456 46.88-0.32 90.224-19.312 119.84-51.584 29.872 32.56 73.776 51.52 121.344 51.52 28.8-0.144 54.336-5.664 75.84-16.48 51.008-25.472 82.656-74.368 82.624-127.552a132.032 132.032 0 0 0-7.728-44.576 8.768 8.768 0 0 0-0.24-1.072z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3Cpath d='M848 432v445.088A34.912 34.912 0 0 1 813.088 912H210.912A34.912 34.912 0 0 1 176 877.088V432h672zM608 752H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' opacity='.4' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--lingquseka-->
<view wx:if="{{name === 'lingquseka'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M352 160a32 32 0 0 1 32 32v672a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V192a32 32 0 0 1 32-32h192z m-96 560a48 48 0 1 0 0 96 48 48 0 0 0 0-96z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.6' /%3E%3Cpath d='M648.432 230.624l135.76 135.76a32 32 0 0 1 0 45.264L331.648 864.192a32 32 0 0 1-45.264 0l-54.992-54.976a48 48 0 1 0-16.608-16.608l-64.16-64.176a32 32 0 0 1 0-45.264l452.544-452.544a32 32 0 0 1 45.264 0z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' opacity='.8' /%3E%3Cpath d='M864 640a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V672a32 32 0 0 1 32-32h704z m-608 80a48 48 0 1 0 0 96 48 48 0 0 0 0-96z' fill='{{(isStr ? colors : colors[2]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--gouwu1-->
<view wx:if="{{name === 'gouwu1'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M512 128a144 144 0 0 1 144 144v32h84.032a32 32 0 0 1 31.712 27.712l71.36 528A32 32 0 0 1 811.392 896H212.608a32 32 0 0 1-31.712-36.288l71.36-528A32 32 0 0 1 283.968 304h84.016L368 272a144 144 0 0 1 144-144z m214.048 224H297.936l-67.024 496h562.16l-67.024-496zM512 176a96 96 0 0 0-95.936 92.4L416 272v32h192v-32a96 96 0 0 0-92.4-95.936L512 176z' fill='{{(isStr ? colors : colors[0]) || 'rgb(68,68,68)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--dingdan1-->
<view wx:if="{{name === 'dingdan1'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M816 128a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H208a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h608z m-16 48H224v672h576V176z m-120 448a24 24 0 0 1 0 48h-336a24 24 0 0 1 0-48h336z m0-144a24 24 0 0 1 0 48h-336a24 24 0 0 1 0-48h336z m0-144a24 24 0 0 1 0 48h-336a24 24 0 0 1 0-48h336z' fill='{{(isStr ? colors : colors[0]) || 'rgb(68,68,68)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--gerenzhongxin1-->
<view wx:if="{{name === 'gerenzhongxin1'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M624 544c150.224 0 272 121.776 272 272v80H128v-80c0-150.224 121.776-272 272-272h224z m0 48H400c-122.048 0-221.28 97.6-223.952 218.992L176 816v32h672v-32c0-122.048-97.6-221.28-218.992-223.952L624 592zM512 128a144 144 0 0 1 144 144v80a144 144 0 0 1-139.76 143.936L512 496a144 144 0 0 1-144-144v-80a144 144 0 0 1 139.76-143.936L512 128z m0 48a96 96 0 0 0-95.936 92.4L416 272v80a96 96 0 0 0 191.936 3.6L608 352v-80a96 96 0 0 0-96-96z' fill='{{(isStr ? colors : colors[0]) || 'rgb(68,68,68)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--shouye1-->
<view wx:if="{{name === 'shouye1'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M543.84 690.24a31.728 31.728 0 0 0-29.472-31.552L512 658.592a31.76 31.76 0 0 0-31.744 29.296l-0.08 2.368V896h-47.76v-0.016L241.44 896a31.744 31.744 0 0 1-31.84-31.648V539.648l-39.84 39.872c-9.28 9.28-24.352 9.216-33.664-0.096a23.84 23.84 0 0 1-1.632-31.984l1.536-1.68 73.6-73.632v-3.456h3.456l236.288-236.272c33.168-33.168 86.592-33.824 120.912-2.096l2.544 2.432 235.936 235.936h5.648v5.648l73.52 73.536c9.328 9.328 9.376 24.4 0.096 33.664a23.792 23.792 0 0 1-31.968 1.456l-1.696-1.552-39.952-39.952v322.88c0 17.472-14.24 31.648-31.824 31.648l-190.992-0.016V896H543.84V690.24z m-58.832-425.856l-1.888 1.776-225.776 225.744v356.608h175.072v-158.256c0-43.712 35.632-79.136 79.584-79.136 43.952 0 79.584 35.424 79.584 79.136l-0.016 158.256h175.088l-0.016-354.784-227.408-227.408a39.696 39.696 0 0 0-54.224-1.936z' fill='{{(isStr ? colors : colors[0]) || 'rgb(68,68,68)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--gerenzhongxin-->
<view wx:if="{{name === 'gerenzhongxin'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M512 128a144 144 0 0 1 144 144v80a144 144 0 0 1-288 0v-80a144 144 0 0 1 144-144z m112 416c150.224 0 272 121.776 272 272v80H128v-80c0-150.224 121.776-272 272-272h224z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--dingdan-->
<view wx:if="{{name === 'dingdan'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M816 128a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H208a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h608z m-136 496h-336a24 24 0 0 0 0 48h336a24 24 0 0 0 0-48z m0-144h-336a24 24 0 0 0 0 48h336a24 24 0 0 0 0-48z m0-144h-336a24 24 0 0 0 0 48h336a24 24 0 0 0 0-48z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--shouye-->
<view wx:if="{{name === 'shouye'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M570.256 230.304l2.544 2.432 235.936 235.936h5.648v5.648l73.52 73.536c9.328 9.328 9.376 24.4 0.096 33.664a23.792 23.792 0 0 1-31.968 1.456l-1.696-1.552-39.952-39.952v322.88c0 17.472-14.24 31.648-31.824 31.648l-190.992-0.016V896H576V688a64 64 0 1 0-128 0v208h-15.584v-0.016L241.44 896a31.744 31.744 0 0 1-31.84-31.648V539.648l-39.84 39.872c-9.28 9.28-24.352 9.216-33.664-0.096a23.84 23.84 0 0 1-1.632-31.984l1.536-1.68 73.6-73.632v-3.456h3.456l236.288-236.272c33.168-33.168 86.592-33.824 120.912-2.096z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
<!--gouwu-->
<view wx:if="{{name === 'gouwu'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M512 128a144 144 0 0 1 144 144v32h84.032a32 32 0 0 1 31.712 27.712l71.36 528A32 32 0 0 1 811.392 896H212.608a32 32 0 0 1-31.712-36.288l71.36-528A32 32 0 0 1 283.968 304h84.016L368 272a144 144 0 0 1 144-144z m0 48a96 96 0 0 0-95.936 92.4L416 272v32h192v-32a96 96 0 0 0-92.4-95.936L512 176z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />

View File

@ -0,0 +1,3 @@
.icon {
background-repeat: no-repeat;
}

View File

@ -0,0 +1,39 @@
.customTabBar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
display: flex;
flex-flow: row nowrap;
padding-bottom: env(safe-area-inset-bottom);
background-color: #fff;
&-line {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
&-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
&-icon {
width: 56px;
height: 56px;
font-size: 60px;
}
&-title {
margin-top: 10px;
font-size: 20px;
}
}
}
.selected {
color: $color_main;
}

View File

@ -0,0 +1,80 @@
import { CoverImage, View } from '@tarojs/components'
import { FC, useMemo, useState } from 'react'
import styles from './index.module.scss'
import classname from 'classname'
type TabBarIndexMap = {
[Property: number]: {
id: number
pagePath: string
text: string
iconPath: string
selectedIconPath: string
}
}
const CustomTabBar: FC = () => {
const [tabItem, setTabItem] = useState([
{
id: 1,
pagePath: 'pages/index/index',
text: '首页',
iconPath: 'icon-shouye1',
selectedIconPath: 'icon-shouye',
},
{
id: 2,
pagePath: 'pages/shopping/index',
text: '购物',
iconPath: 'icon-gouwu1',
selectedIconPath: 'icon-gouwu',
},
{
id: 3,
pagePath: 'pages/order/index',
text: '订单',
iconPath: 'icon-dingdan1',
selectedIconPath: 'icon-dingdan',
},
{
id: 4,
pagePath: 'pages/user/index',
text: '我的',
iconPath: 'icon-gerenzhongxin1',
selectedIconPath: 'icon-gerenzhongxin',
},
])
const tabBarIndexMap = useMemo(() => {
let map: TabBarIndexMap = {}
for (let i = 0; i < tabItem.length; i++) {
map[tabItem[i].id] = tabItem[i]
}
return map
}, [tabItem])
const [selectedId, setSelectedId] = useState(1)
const handleSelectTabItem = () => {
return () => {}
}
return (
<View className={styles.customTabBar}>
<View className={styles['customTabBar-line']}></View>
{tabItem.map((item, index) => {
return (
<View key={index} className={classname(styles['customTabBar-item'], styles['customTabBar-item-title'], selectedId === item.id ? styles['selected'] : '')} onClick={handleSelectTabItem}>
<View
className={classname(
styles['customTabBar-item-icon'],
styles.iconfont,
selectedId === item.id ? styles[item.selectedIconPath] : styles[item.iconPath],
)}></View>
<View >{item.text}</View>
</View>
)
})}
</View>
)
}
export default CustomTabBar

View File

@ -5,6 +5,12 @@ import styles from './index.module.scss'
const SonComp: FC = memo(() => {
return <View className=''>{new Date().getTime()}</View>
})
// 用户信息
const UserInfo:FC = () => {
return <View>
sdfasdf
</View>
}
// 我的
const User = () => {
@ -19,7 +25,8 @@ const User = () => {
return (
<>
<View className={styles['main']}>
sdfasdfasdf {count}
<UserInfo/>
sdfasdfasdf {count}
<Button onClick={handleCount}>+1</Button>
<SonComp />
</View>

View File

@ -1,8 +1,9 @@
/* CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: "iconfont";
/* Project id 2987621 */
src: url('iconfont.ttf?t=1661926630273') format('truetype');
font-family: 'iconfont'; /* Project id 3619513 */
src: url('//at.alicdn.com/t/c/font_3619513_g8r6ax9bp1n.woff2?t=1662609560991') format('woff2'),
url('//at.alicdn.com/t/c/font_3619513_g8r6ax9bp1n.woff?t=1662609560991') format('woff'),
url('//at.alicdn.com/t/c/font_3619513_g8r6ax9bp1n.ttf?t=1662609560991') format('truetype');
}
.iconfont {
@ -13,222 +14,219 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-A:before {
content: "\e6ea";
.icon-yewuyuanqizi:before {
content: "\e639";
}
.icon-erweima:before {
content: "\e7b5";
.icon-chakanquanbukehu:before {
content: "\e638";
}
.icon-xtianzhangqi:before {
content: "\e66a";
}
.icon-yucunkuan:before {
content: "\e66c";
}
.icon-a-tuikuanshouhou:before {
content: "\e65c";
}
.icon-yifahuo:before {
content: "\e65b";
}
.icon-daipeibu:before {
content: "\e662";
}
.icon-guanbi:before {
content: "\e641";
}
.icon-a-saoyisao2:before {
content: "\e613";
}
.icon-guanyuquse:before {
content: "\e635";
}
.icon-yangpinduibi:before {
content: "\e631";
}
.icon-lingquseka:before {
content: "\e632";
}
.icon-sehaochazhao:before {
content: "\e633";
}
.icon-jichuguanli:before {
content: "\e634";
}
.icon-yuncangkucun:before {
content: "\e630";
}
.icon-shangchuanzhaopian:before {
content: "\e62f";
}
.icon-zhushi:before {
content: "\e62d";
}
.icon-shenqingtuihuo:before {
content: "\e62e";
}
.icon-quxiaodingdanxiao:before {
content: "\e62c";
}
.icon-tuihuo1:before {
content: "\e62a";
}
.icon-a-fenqishangchengyifahuo:before {
content: "\e62b";
}
.icon-peibu:before {
content: "\e626";
}
.icon-dingdanbishu:before {
content: "\e627";
}
.icon-guanyufahuo:before {
content: "\e628";
}
.icon-tuihuo:before {
content: "\e629";
}
.icon-rili:before {
content: "\e625";
}
.icon-jiangpai:before {
content: "\e624";
}
.icon-xiaoshou:before {
content: "\e623";
}
.icon-cangkuguanli:before {
content: "\e61f";
}
.icon-zhibiaoduizhang:before {
content: "\e620";
}
.icon-a-tongji1:before {
content: "\e621";
}
.icon-shaixuan:before {
content: "\e622";
}
.icon-xiangxiagengduo:before {
content: "\e61e";
}
.icon-gongnengdingyi:before {
content: "\e61a";
}
.icon-rukuguanli:before {
content: "\e61b";
}
.icon-shenqing:before {
content: "\e61c";
}
.icon-kehuguanli:before {
content: "\e61d";
}
.icon-a-phone1:before {
content: "\e619";
}
.icon-a-saoyisao2:before {
content: "\e613";
}
.icon-ico_zhongyaofangguanli_zhongyaopandian:before {
content: "\e615";
}
.icon-seka:before {
content: "\e616";
}
.icon-xiaoshoutongji:before {
content: "\e617";
}
.icon-gengduo:before {
content: "\e618";
}
.icon-lajitong:before {
content: "\e60c";
}
.icon-jian:before {
content: "\e60b";
}
.icon-jia:before {
content: "\e60a";
}
.icon-a-tick1:before {
content: "\e609";
}
.icon-a-cuowuwrong:before {
content: "\e608";
}
.icon-more:before {
content: "\e606";
.icon-biyan:before {
content: "\e637";
}
.icon-bianji:before {
content: "\e607";
content: "\e61e";
}
.icon-wode:before {
content: "\e602";
.icon-daikuan:before {
content: "\e61f";
}
.icon-shangpinguanli:before {
content: "\e603";
.icon-cangku:before {
content: "\e620";
}
.icon-dingdan:before {
.icon-guanlidingdan:before {
content: "\e621";
}
.icon-mima:before {
content: "\e622";
}
.icon-guanbi:before {
content: "\e623";
}
.icon-jianshao:before {
content: "\e624";
}
.icon-dingwei:before {
content: "\e625";
}
.icon-saomiao:before {
content: "\e626";
}
.icon-peihuo:before {
content: "\e627";
}
.icon-shaixuan:before {
content: "\e628";
}
.icon-paiming:before {
content: "\e629";
}
.icon-shanchusousuoxinxi:before {
content: "\e62a";
}
.icon-shijian:before {
content: "\e62b";
}
.icon-sousuo:before {
content: "\e62c";
}
.icon-shouhou:before {
content: "\e62d";
}
.icon-sousuofanhui:before {
content: "\e62e";
}
.icon-sousuoshanchu:before {
content: "\e62f";
}
.icon-tuikuan:before {
content: "\e630";
}
.icon-tishi:before {
content: "\e631";
}
.icon-xianxiahuizong:before {
content: "\e632";
}
.icon-xinzeng:before {
content: "\e633";
}
.icon-yonghuming:before {
content: "\e634";
}
.icon-yanjing:before {
content: "\e635";
}
.icon-yufukuan:before {
content: "\e636";
}
.icon-wodekefu:before {
content: "\e60c";
}
.icon-dizhi:before {
content: "\e60d";
}
.icon-shouhouzhongxin:before {
content: "\e60e";
}
.icon-wodeshoucang:before {
content: "\e60f";
}
.icon-shoukuanliebiao:before {
content: "\e610";
}
.icon-madanguanli:before {
content: "\e611";
}
.icon-qusechazhao:before {
content: "\e612";
}
.icon-pandiansaoma:before {
content: "\e613";
}
.icon-yaoqingma:before {
content: "\e614";
}
.icon-duizhang:before {
content: "\e615";
}
.icon-tihuoliebiao:before {
content: "\e616";
}
.icon-yangpinduibi:before {
content: "\e617";
}
.icon-yansequyang:before {
content: "\e618";
}
.icon-fahuoliebiao:before {
content: "\e619";
}
.icon-yuncangkucun:before {
content: "\e61a";
}
.icon-xiaoshou:before {
content: "\e61b";
}
.icon-qianzhicangkucun:before {
content: "\e61c";
}
.icon-lingquseka:before {
content: "\e61d";
}
.icon-gouwu1:before {
content: "\e608";
}
.icon-dingdan1:before {
content: "\e609";
}
.icon-gerenzhongxin1:before {
content: "\e60a";
}
.icon-shouye1:before {
content: "\e60b";
}
.icon-gerenzhongxin:before {
content: "\e604";
}
.icon-fenlei:before {
.icon-dingdan:before {
content: "\e605";
}
.icon-a-sousuo1:before {
content: "\e601";
}
.icon-shouye:before {
content: "\e606";
}
.icon-gouwu:before {
content: "\e607";
}

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -3514,6 +3514,13 @@ aws4@^1.8.0:
resolved "https://registry.npmmirror.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
axios@^0.19.0:
version "0.19.2"
resolved "https://registry.npmmirror.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
dependencies:
follow-redirects "1.5.10"
babel-code-frame@6.26.0, babel-code-frame@^6.26.0:
version "6.26.0"
resolved "https://registry.npmmirror.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@ -4800,6 +4807,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classname@^0.0.0:
version "0.0.0"
resolved "https://registry.npmmirror.com/classname/-/classname-0.0.0.tgz#43d171b484e354c7a293a5b78004df6852db20d6"
integrity sha512-kkhsspEJdUW+VhuvNzb2sQf0KbafDPfd36dB1qf03Uu42dWZwMQzaQuyNkaRr5ir0ZiAN0+TlH/EOOfwb/aaXg==
classnames@^2.2.5:
version "2.3.1"
resolved "https://registry.npmmirror.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
@ -4936,6 +4948,11 @@ colorette@^2.0.10:
resolved "https://registry.npmmirror.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
colors@^1.3.3:
version "1.4.0"
resolved "https://registry.npmmirror.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
combined-stream@^1.0.6, combined-stream@~1.0.6:
version "1.0.8"
resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@ -5493,6 +5510,13 @@ debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.
dependencies:
ms "2.1.2"
debug@=3.1.0, debug@~3.1.0:
version "3.1.0"
resolved "https://registry.npmmirror.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
debug@^3.0.0, debug@^3.2.6, debug@^3.2.7:
version "3.2.7"
resolved "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@ -5500,13 +5524,6 @@ debug@^3.0.0, debug@^3.2.6, debug@^3.2.7:
dependencies:
ms "^2.1.1"
debug@~3.1.0:
version "3.1.0"
resolved "https://registry.npmmirror.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
debuglog@^1.0.1:
version "1.0.1"
resolved "https://registry.npmmirror.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@ -6792,6 +6809,13 @@ flatted@^2.0.0:
resolved "https://registry.npmmirror.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"
follow-redirects@^1.0.0:
version "1.15.1"
resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
@ -7033,7 +7057,7 @@ glob@7.1.2:
once "^1.3.0"
path-is-absolute "^1.0.0"
glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6:
glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
version "7.2.3"
resolved "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@ -9023,6 +9047,20 @@ mini-css-extract-plugin@2.4.6:
dependencies:
schema-utils "^4.0.0"
mini-program-iconfont-cli@^0.6.1:
version "0.6.1"
resolved "https://registry.npmmirror.com/mini-program-iconfont-cli/-/mini-program-iconfont-cli-0.6.1.tgz#61d08cf05bf5a51c82a75c4afcf77224e20ed06c"
integrity sha512-69FsU+tSevwmHBiL55535Hfh1q0ciRpNyYtiTBZw2bvw9lvW3N/SCTg395P0rkisWMqf1Ki9VYIWeaONvNWy2Q==
dependencies:
axios "^0.19.0"
colors "^1.3.3"
fs-extra "^8.1.0"
glob "^7.1.4"
minimist "^1.2.5"
mkdirp "^0.5.1"
tslib "^1.10.0"
xml2js "^0.4.19"
minimalistic-assert@^1.0.0:
version "1.0.1"
resolved "https://registry.npmmirror.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"