├── .wechatide
└── fileCache.cfg
├── README.md
├── app.js
├── app.json
├── app.wxss
├── component
├── box
│ ├── box.js
│ ├── box.json
│ ├── box.wxml
│ └── box.wxss
├── button
│ ├── button.js
│ ├── button.json
│ ├── button.wxml
│ └── button.wxss
├── checkbox-group
│ ├── checkbox-group.js
│ ├── checkbox-group.json
│ ├── checkbox-group.wxml
│ └── checkbox-group.wxss
├── checkbox
│ ├── checkbox.js
│ ├── checkbox.json
│ ├── checkbox.wxml
│ └── checkbox.wxss
├── clip
│ ├── clip.js
│ ├── clip.json
│ ├── clip.wxml
│ └── clip.wxss
├── col
│ ├── col.js
│ ├── col.json
│ ├── col.wxml
│ └── col.wxss
├── drawer
│ ├── drawer.js
│ ├── drawer.json
│ ├── drawer.wxml
│ └── drawer.wxss
├── drop
│ ├── drop.js
│ ├── drop.json
│ ├── drop.wxml
│ └── drop.wxss
├── fixed
│ ├── fixed.js
│ ├── fixed.json
│ ├── fixed.wxml
│ └── fixed.wxss
├── flex
│ ├── flex.js
│ ├── flex.json
│ ├── flex.wxml
│ └── flex.wxss
├── gesture
│ ├── gesture.js
│ ├── gesture.json
│ ├── gesture.wxml
│ └── gesture.wxss
├── grid
│ ├── grid.js
│ ├── grid.json
│ ├── grid.wxml
│ └── grid.wxss
├── indexes-item
│ ├── indexes-item.js
│ ├── indexes-item.json
│ ├── indexes-item.wxml
│ └── indexes-item.wxss
├── indexes
│ ├── indexes.js
│ ├── indexes.json
│ ├── indexes.wxml
│ └── indexes.wxss
├── input
│ ├── input.js
│ ├── input.json
│ ├── input.wxml
│ └── input.wxss
├── line
│ ├── line.js
│ ├── line.json
│ ├── line.wxml
│ └── line.wxss
├── list
│ ├── list.js
│ ├── list.json
│ ├── list.wxml
│ └── list.wxss
├── loading
│ ├── loading.js
│ ├── loading.json
│ ├── loading.wxml
│ └── loading.wxss
├── modal
│ ├── modal.js
│ ├── modal.json
│ ├── modal.wxml
│ └── modal.wxss
├── page
│ ├── page.js
│ ├── page.json
│ ├── page.wxml
│ └── page.wxss
├── radio-group
│ ├── radio-group.js
│ ├── radio-group.json
│ ├── radio-group.wxml
│ └── radio-group.wxss
├── radio
│ ├── radio.js
│ ├── radio.json
│ ├── radio.wxml
│ └── radio.wxss
├── region
│ ├── area.min.js
│ ├── region.js
│ ├── region.json
│ ├── region.wxml
│ └── region.wxss
├── search
│ ├── search.js
│ ├── search.json
│ ├── search.wxml
│ └── search.wxss
├── size
│ ├── size.js
│ ├── size.json
│ ├── size.wxml
│ └── size.wxss
├── swiper
│ ├── swiper.js
│ ├── swiper.json
│ ├── swiper.wxml
│ └── swiper.wxss
├── switch
│ ├── switch.js
│ ├── switch.json
│ ├── switch.wxml
│ └── switch.wxss
├── tab
│ ├── tab.js
│ ├── tab.json
│ ├── tab.wxml
│ └── tab.wxss
├── tabs
│ ├── tabs.js
│ ├── tabs.json
│ ├── tabs.wxml
│ └── tabs.wxss
├── top
│ ├── top.js
│ ├── top.json
│ ├── top.wxml
│ └── top.wxss
└── upload
│ ├── upload.js
│ ├── upload.json
│ ├── upload.wxml
│ └── upload.wxss
├── images
├── gui.png
└── nav
│ ├── gui-active.png
│ ├── gui-default.png
│ ├── index-active.png
│ └── index-default.png
├── pages
├── button
│ ├── button.js
│ ├── button.json
│ ├── button.wxml
│ └── button.wxss
├── checkbox
│ ├── checkbox.js
│ ├── checkbox.json
│ ├── checkbox.wxml
│ └── checkbox.wxss
├── clip
│ ├── clip.js
│ ├── clip.json
│ ├── clip.wxml
│ └── clip.wxss
├── drawer
│ ├── drawer.js
│ ├── drawer.json
│ ├── drawer.wxml
│ └── drawer.wxss
├── drop
│ ├── array.js
│ ├── drop.js
│ ├── drop.json
│ ├── drop.wxml
│ ├── drop.wxss
│ └── img.jpg
├── fixed
│ ├── fixed.js
│ ├── fixed.json
│ ├── fixed.wxml
│ └── fixed.wxss
├── flex
│ ├── flex.js
│ ├── flex.json
│ ├── flex.wxml
│ └── flex.wxss
├── gesture
│ ├── gesture.js
│ ├── gesture.json
│ ├── gesture.wxml
│ └── gesture.wxss
├── grid
│ ├── grid.js
│ ├── grid.json
│ ├── grid.wxml
│ └── grid.wxss
├── gui
│ ├── gui.js
│ ├── gui.json
│ ├── gui.wxml
│ └── gui.wxss
├── index
│ ├── index.js
│ ├── index.json
│ ├── index.wxml
│ └── index.wxss
├── indexes
│ ├── city.js
│ ├── indexes.js
│ ├── indexes.json
│ ├── indexes.wxml
│ └── indexes.wxss
├── input
│ ├── input.js
│ ├── input.json
│ ├── input.wxml
│ └── input.wxss
├── line
│ ├── line.js
│ ├── line.json
│ ├── line.wxml
│ └── line.wxss
├── list
│ ├── list.js
│ ├── list.json
│ ├── list.wxml
│ └── list.wxss
├── loading
│ ├── loading.js
│ ├── loading.json
│ ├── loading.wxml
│ └── loading.wxss
├── modal
│ ├── modal.js
│ ├── modal.json
│ ├── modal.wxml
│ └── modal.wxss
├── page
│ ├── page.js
│ ├── page.json
│ ├── page.wxml
│ └── page.wxss
├── radio
│ ├── radio.js
│ ├── radio.json
│ ├── radio.wxml
│ └── radio.wxss
├── region
│ ├── region.js
│ ├── region.json
│ ├── region.wxml
│ └── region.wxss
├── search
│ ├── search.js
│ ├── search.json
│ ├── search.wxml
│ └── search.wxss
├── size
│ ├── size.js
│ ├── size.json
│ ├── size.wxml
│ └── size.wxss
├── swiper
│ ├── swiper.js
│ ├── swiper.json
│ ├── swiper.wxml
│ └── swiper.wxss
├── switch
│ ├── switch.js
│ ├── switch.json
│ ├── switch.wxml
│ └── switch.wxss
├── tab
│ ├── tab.js
│ ├── tab.json
│ ├── tab.wxml
│ └── tab.wxss
├── textarea
│ ├── textarea.js
│ ├── textarea.json
│ ├── textarea.wxml
│ └── textarea.wxss
├── top
│ ├── top.js
│ ├── top.json
│ ├── top.wxml
│ └── top.wxss
└── upload
│ ├── upload.js
│ ├── upload.json
│ ├── upload.wxml
│ └── upload.wxss
├── project.config.json
└── sitemap.json
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | # GUI
7 | GUI 一款基于小程序规范的组件库,简单、易用、可扩展
8 |
9 | 
10 |
11 | 使用微信扫一扫体验小程序组件示例
12 |
13 | ## 文档
14 | 前端小哥正在整理中...
15 |
16 | ## 使用之前
17 | 在开始使用 GUI 之前,您需了解 [微信小程序自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/) 的相关文档
18 |
19 | ## 如何使用
20 | 到 [GitHub](https://github.com/Gensp/GUI) 下载 GUI 的代码,将组件目录 component 拷贝到自己的项目中。然后按照如下的方式使用组件,以 Input 为例,其它组件在对应的文档页查看:
21 |
22 | 1、添加所需要的组件,在引用页面的 json 中配置:
23 |
24 | ```
25 | "usingComponents": {
26 | "g-input": "../../component/input/input" //路径根据自己项目位置配置
27 | }
28 | ```
29 |
30 | 2、在 wxml 中使用组件:
31 |
32 | ```
33 |
34 |
35 | ```
36 |
37 | ## 预览所有组件
38 | 在GitHub下载代码后,直接用微信web开发者工具新建小程序打开即可。
39 |
40 | ## 更新日志
41 | v1.0.4(2019-11-25)
42 | - 新增Page、Top、Search组件
43 | - Flex布局,新增配置选项 space(间隔)
44 |
45 | v1.0.3(2019-11-21)
46 | - 新增Upload(图片上传)组件
47 |
48 | v1.0.2(2019-11-20)
49 | - 新增Grid、Clip、Fixed、Swiper、Drop、Indexes组件
50 |
51 | v1.0.1(2018-12-20)
52 | - 新增Gesture(手势)、Region(省市区)组件
53 |
54 | v1.0.0(2018-09-27)
55 | - 初始版本
56 | - 整理了一些常用基本组件,后续会慢慢再更新一些常用功能组件。
57 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | //app.js
2 | App({
3 | onLaunch: function () {
4 |
5 | }
6 | })
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": [
3 | "pages/index/index",
4 | "pages/input/input",
5 | "pages/list/list",
6 | "pages/flex/flex",
7 | "pages/button/button",
8 | "pages/textarea/textarea",
9 | "pages/radio/radio",
10 | "pages/checkbox/checkbox",
11 | "pages/switch/switch",
12 | "pages/loading/loading",
13 | "pages/modal/modal",
14 | "pages/drawer/drawer",
15 | "pages/tab/tab",
16 | "pages/line/line",
17 | "pages/size/size",
18 | "pages/gui/gui",
19 | "pages/gesture/gesture",
20 | "pages/region/region",
21 | "pages/clip/clip",
22 | "pages/grid/grid",
23 | "pages/indexes/indexes",
24 | "pages/drop/drop",
25 | "pages/swiper/swiper",
26 | "pages/fixed/fixed",
27 | "pages/upload/upload",
28 | "pages/top/top",
29 | "pages/page/page",
30 | "pages/search/search"
31 | ],
32 | "window": {
33 | "backgroundTextStyle": "light",
34 | "navigationBarBackgroundColor": "#fff",
35 | "navigationBarTitleText": "GUI",
36 | "navigationBarTextStyle": "black"
37 | },
38 | "tabBar": {
39 | "backgroundColor": "#fff",
40 | "borderStyle": "black",
41 | "color": "#999",
42 | "selectedColor": "#2ca9e1",
43 | "list": [
44 | {
45 | "pagePath": "pages/index/index",
46 | "iconPath": "images/nav/index-default.png",
47 | "selectedIconPath": "images/nav/index-active.png",
48 | "text": "组件"
49 | },
50 | {
51 | "pagePath": "pages/gui/gui",
52 | "iconPath": "images/nav/gui-default.png",
53 | "selectedIconPath": "images/nav/gui-active.png",
54 | "text": "GUI"
55 | }
56 | ]
57 | },
58 | "sitemapLocation": "sitemap.json"
59 | }
--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | /**app.wxss**/
2 | page{
3 | color: #333;
4 | font-size: 28rpx;
5 | background-color: #f3f4f8;
6 | }
7 |
--------------------------------------------------------------------------------
/component/box/box.js:
--------------------------------------------------------------------------------
1 | // component/title/title.js
2 | Component({
3 |
4 | externalClasses: ['g-class'],
5 |
6 | /**
7 | * 组件的属性列表
8 | */
9 | properties: {
10 |
11 | title:{
12 | type: String,
13 | value:''
14 | },
15 |
16 | //可选:border
17 | mode:{
18 | type: String,
19 | value: ''
20 | }
21 |
22 | },
23 |
24 | /**
25 | * 组件的方法列表
26 | */
27 | methods: {
28 |
29 | }
30 | })
31 |
--------------------------------------------------------------------------------
/component/box/box.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/box/box.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{title}}
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/component/box/box.wxss:
--------------------------------------------------------------------------------
1 | /* component/title/title.wxss */
2 | .g-box{
3 | color: #666;
4 | }
5 | .g-title{
6 | min-height: 48rpx;
7 | line-height: 48rpx;
8 | padding:30rpx 30rpx 10rpx;
9 | }
10 | .g-border{
11 | position: relative;
12 | }
13 | .g-border::before,
14 | .g-border::after{
15 | content: '';
16 | position: absolute;
17 | z-index: 3;
18 | left: 0;
19 | width: 100%;
20 | border-bottom: 1px solid #e5e5e5;
21 | transform: scaleY(.5);
22 | }
23 | .g-border::before{
24 | top: 0;
25 | }
26 | .g-border::after{
27 | bottom: 0;
28 | }
--------------------------------------------------------------------------------
/component/button/button.js:
--------------------------------------------------------------------------------
1 | // component/button/button.js
2 | Component({
3 |
4 | behaviors: ['wx://form-field'],
5 |
6 | externalClasses: ['g-class'],
7 |
8 | /**
9 | * 组件的属性列表
10 | */
11 | properties: {
12 |
13 | //按钮尺寸可选:normal、midd1e、small
14 | size:{
15 | type: String,
16 | value: 'normal'
17 | },
18 |
19 | //按钮类型可选:default、primary、danger
20 | type: {
21 | type: String,
22 | value: 'default'
23 | },
24 |
25 | //圆角
26 | radius:{
27 | type: Boolean,
28 | value: false
29 | },
30 |
31 | //是否禁用
32 | disabled:{
33 | type:Boolean,
34 | value: false
35 | },
36 |
37 | //是否镂空(透明)
38 | plain:{
39 | type: Boolean,
40 | value: false
41 | },
42 |
43 | //微信开放能力(参造小程序button[open-type])
44 | opentype:{
45 | type: String,
46 | value: ''
47 | }
48 | },
49 |
50 | /**
51 | * 组件的方法列表
52 | */
53 | methods: {
54 |
55 | //获取用户信息(open-type为getUserInfo时生效)
56 | inGetUserInfo(event){
57 | this.triggerEvent('getuserinfo', event);
58 | },
59 |
60 | //获取手机号码(open-type为getPhoneNumber时生效)
61 | inGerPhoneNumber(event){
62 | this.triggerEvent('getphonenumber', event);
63 | },
64 |
65 | //打开授权页
66 | inOpenSetting(event){
67 | this.triggerEvent('opensetting', event);
68 | },
69 |
70 | //点击
71 | inTap(event){
72 | if(this.data.disabled) return;
73 | this.triggerEvent('intap', event);
74 | },
75 | }
76 | })
77 |
--------------------------------------------------------------------------------
/component/button/button.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/button/button.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/component/button/button.wxss:
--------------------------------------------------------------------------------
1 | /* component/button/button.wxss */
2 | .g-btn{
3 | position: relative;
4 | color: #666;
5 | background-color: #fff;
6 | border-radius: 8rpx;
7 | overflow: initial;
8 | }
9 | .g-btn-radius{
10 | border-radius: 50px;
11 | }
12 | .g-btn-plain.g-btn-radius::after{
13 | border-radius: 100px;
14 | }
15 | .g-btn-normal{
16 | font-size: 28rpx;
17 | height: 88rpx;
18 | line-height: 88rpx;
19 | padding: 0 30rpx;
20 | }
21 | .g-btn-middle{
22 | height: 68rpx;
23 | line-height: 68rpx;
24 | padding: 0 20rpx;
25 | font-size: 26rpx;
26 | }
27 | .g-btn-small{
28 | height: 48rpx;
29 | line-height: 48rpx;
30 | padding: 0 10rpx;
31 | font-size: 24rpx;
32 | }
33 | .g-btn::after{
34 | border: 0;
35 | border-radius: 16rpx;
36 | }
37 | .g-btn:not(.g-btn-disabled):active{
38 | opacity: .6;
39 | }
40 | .g-btn-primary{
41 | color: #fff;
42 | background-color: #2ca9e1;
43 | }
44 | .g-btn-danger{
45 | color: #fff;
46 | background-color: #f05f5f;
47 | }
48 | .g-btn-plain{
49 | background: none!important;
50 | }
51 | .g-btn-plain::after{
52 | content: "";
53 | width: 200%;
54 | height: 200%;
55 | position: absolute;
56 | display: block;
57 | top: 0;
58 | left: 0;
59 | border: 1px solid rgba(0,0,0, .2);
60 | transform-origin: 0 0;
61 | pointer-events: none;
62 | box-sizing: border-box;
63 | transform: scale(0.5);
64 | }
65 | .g-btn-plain.g-btn-primary{
66 | color: #2ca9e1;
67 | }
68 | .g-btn-plain.g-btn-primary::after{
69 | border-color: #2ca9e1;
70 | }
71 | .g-btn-plain.g-btn-danger{
72 | color: #f05f5f;
73 | }
74 | .g-btn-plain.g-btn-danger::after{
75 | border-color: #f05f5f;
76 | }
77 | button.g-btn-default.g-btn-disabled{
78 | color: rgba(0,0,0, .2);
79 | background-color: rgba(255,255,255,.8);
80 | }
81 | button.g-btn-primary.g-btn-disabled{
82 | color: rgba(255,255,255, .5);
83 | background-color: rgba(44,169,225,.8);
84 | }
85 | button.g-btn-danger.g-btn-disabled{
86 | color: rgba(255,255,255, .5);
87 | background-color: rgba(240,95,95,.8);
88 | }
89 | button.g-btn-plain.g-btn-primary.g-btn-disabled{
90 | color: rgba(44,169,225,.5)
91 | }
92 | button.g-btn-plain.g-btn-danger.g-btn-disabled{
93 | color: rgba(240,95,95,.5);
94 | }
95 | button.g-btn-plain.g-btn-default.g-btn-disabled::after{
96 | border-color: rgba(0,0,0, .1)
97 | }
98 | button.g-btn-plain.g-btn-primary.g-btn-disabled::after{
99 | border-color: rgba(44,169,225,.5)
100 | }
101 | button.g-btn-plain.g-btn-danger.g-btn-disabled::after{
102 | border-color: rgba(240,95,95,.5);
103 | }
--------------------------------------------------------------------------------
/component/checkbox-group/checkbox-group.js:
--------------------------------------------------------------------------------
1 | // component/checkbox-group/checkbox-group.js
2 | Component({
3 | externalClasses: ['g-class'],
4 | relations: {
5 | '../checkbox/checkbox': {
6 | type: 'child',
7 | linked() {
8 | this.activeChange();
9 | },
10 | linkChanged() {
11 | this.activeChange();
12 | },
13 | unlinked() {
14 | this.activeChange();
15 | }
16 | }
17 | },
18 | /**
19 | * 组件的属性列表
20 | */
21 | properties: {
22 | active: {
23 | type: Object,
24 | value: [],
25 | observer: 'activeChange'
26 | },
27 | },
28 |
29 | /**
30 | * 组件的方法列表
31 | */
32 | methods: {
33 | activeChange(val = this.data.active) {
34 | if(!val) return;
35 | let items = this.getRelationNodes('../checkbox/checkbox');
36 | if (items.length > 0) {
37 | items.forEach(item => {
38 | const key_idx = val.indexOf(item.data.key);
39 | item.activeChange(key_idx !== -1);
40 | });
41 | }
42 | },
43 |
44 | emitEvent(item) {
45 | this.triggerEvent('inchange', item);
46 | }
47 | }
48 | })
49 |
--------------------------------------------------------------------------------
/component/checkbox-group/checkbox-group.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/checkbox-group/checkbox-group.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/component/checkbox-group/checkbox-group.wxss:
--------------------------------------------------------------------------------
1 | /* component/checkbox-group/checkbox-group.wxss */
--------------------------------------------------------------------------------
/component/checkbox/checkbox.js:
--------------------------------------------------------------------------------
1 | // component/checkbox/checkbox.js
2 | Component({
3 | externalClasses: ['g-class'],
4 | relations: {
5 | '../checkbox-group/checkbox-group': {
6 | type: 'parent'
7 | }
8 | },
9 | /**
10 | * z
11 | * 组件的属性列表
12 | */
13 | properties: {
14 | //可选:default、list
15 | mode: {
16 | type: String,
17 | value: 'list'
18 | },
19 |
20 | //索引值
21 | index: {
22 | type: Number,
23 | value: 0
24 | },
25 |
26 | key:{
27 | type: [Number, String],
28 | value: ''
29 | },
30 |
31 | value: {
32 | type: String,
33 | value: ''
34 | },
35 |
36 | //选中的颜色
37 | color: {
38 | type: String,
39 | value: '#2ca9e1'
40 | },
41 |
42 | //是否选中
43 | checked: {
44 | type: Boolean,
45 | value: false
46 | },
47 |
48 | //是否禁用
49 | disabled: {
50 | type: Boolean,
51 | value: false
52 | },
53 |
54 | //可选:left、right
55 | align: {
56 | type: String,
57 | value: 'left',
58 | }
59 | },
60 |
61 | /**
62 | * 组件的方法列表
63 | */
64 | methods: {
65 | activeChange(active) {
66 | this.setData({ checked: active });
67 | },
68 |
69 | inChange(e) {
70 | const me = this;
71 | if (me.data.disabled) return;
72 | const { key } = me.data;
73 | const parent = me.getRelationNodes('../checkbox-group/checkbox-group')[0];
74 | let { active } = parent.data;
75 | const key_idx = active.indexOf(key);
76 | if(key_idx == -1){
77 | active.push(key);
78 | }
79 | else{
80 | active.splice(key_idx,1);
81 | }
82 | parent ? parent.emitEvent({active}) : me.triggerEvent('inchange', {active});
83 | }
84 | }
85 | })
86 |
--------------------------------------------------------------------------------
/component/checkbox/checkbox.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {
4 | "g-list": "../list/list"
5 | }
6 | }
--------------------------------------------------------------------------------
/component/checkbox/checkbox.wxml:
--------------------------------------------------------------------------------
1 |
2 |
20 |
--------------------------------------------------------------------------------
/component/checkbox/checkbox.wxss:
--------------------------------------------------------------------------------
1 | /* component/checkbox/checkbox.wxss */
2 | .color-gray{
3 | color: #999;
4 | }
5 | radio{
6 | width: 48rpx;
7 | height: 48rpx;
8 | }
9 | .g-value{
10 | position: relative;
11 | top: 2rpx;
12 | }
13 | .g-left radio{
14 | margin-right: 16rpx;
15 | }
16 | .g-right radio{
17 | margin-left: 16rpx;
18 | }
19 | .radio-main{
20 | display: flex;
21 | }
22 | .g-right .radio-main{
23 | flex-direction: row-reverse;
24 | }
--------------------------------------------------------------------------------
/component/clip/clip.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/clip/clip.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | {{cancelTxt}}
15 | {{scuuessTxt}}
16 |
17 |
18 |
--------------------------------------------------------------------------------
/component/clip/clip.wxss:
--------------------------------------------------------------------------------
1 | /* component/clip/clip.wxss */
2 | .g-clip-bar{
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | z-index: 99;
7 | width: 100%;
8 | height: 100%;
9 | background-color: #000;
10 | display: flex;
11 | flex-flow: row;
12 | flex-direction: column;
13 | }
14 | .g-clip-top{
15 | position: relative;
16 | flex: 1;
17 | }
18 | .g-clip-bom{
19 | position: relative;
20 | z-index: 3;
21 | height: 88rpx;
22 | color: #fff;
23 | display: flex;
24 | }
25 | .g-clip-bom > view:nth-child(1){
26 | flex: 1;
27 | color: rgba(255,255,255, .6);
28 | }
29 | .g-clip-btn{
30 | padding:0 30rpx;
31 | display: inline-block;
32 | height: 88rpx;
33 | line-height: 88rpx;
34 | }
35 | .g-clip-bom:after {
36 | content: '';
37 | display: block;
38 | position: absolute;
39 | top:0;
40 | left: 0;
41 | height: 1px;
42 | width: 100%;
43 | border-bottom: 1rpx solid rgba(255,255,255, .2);
44 | transform-origin: 50% 100%;
45 | }
46 | .isIPX .g-clip-bom{
47 | height: calc(88rpx + 34px);
48 | }
49 | .g-clip-canvas{
50 | position: fixed;
51 | top: 0;
52 | left: 100%;
53 | }
54 | .g-clip-box{
55 | position: absolute;
56 | width: calc(100% - 64rpx);
57 | height: calc(100vw - 64rpx);
58 | left: 50%;
59 | top: 50%;
60 | transform: translate(-50%, -50%);
61 | }
62 | .g-clip-area{
63 | position: absolute;
64 | z-index: 3;
65 | width: 100%;
66 | height: 100%;
67 | border:2rpx solid #fff;
68 | box-sizing: border-box;
69 | box-shadow: 0 0 0 2000rpx rgba(0,0,0, .75)
70 | }
71 | .g-clip-img{
72 | width: 100%;
73 | height: 100%;
74 | }
75 | .g-clip-arrow::before,
76 | .g-clip-arrow::after{
77 | content: '';
78 | position: absolute;
79 | display: block;
80 | width: 32rpx;
81 | height: 32rpx;
82 | }
83 | .g-clip-arrow.top::before{
84 | left: -6rpx;
85 | top: -6rpx;
86 | border-top: 6rpx solid #fff;
87 | border-left: 6rpx solid #fff;
88 | }
89 | .g-clip-arrow.top::after{
90 | right: -6rpx;
91 | top: -6rpx;
92 | border-top: 6rpx solid #fff;
93 | border-right: 6rpx solid #fff;
94 | }
95 | .g-clip-arrow.bom::before{
96 | left: -6rpx;
97 | bottom: -6rpx;
98 | border-left: 6rpx solid #fff;
99 | border-bottom: 6rpx solid #fff;
100 | }
101 | .g-clip-arrow.bom::after{
102 | right: -6rpx;
103 | bottom: -6rpx;
104 | border-right: 6rpx solid #fff;
105 | border-bottom: 6rpx solid #fff;
106 | }
107 | .animate-img{
108 | transition: all .2s ease-in-out;
109 | }
--------------------------------------------------------------------------------
/component/col/col.js:
--------------------------------------------------------------------------------
1 | // component/col/col.js
2 | Component({
3 | externalClasses: ['g-class'],
4 |
5 | relations: {
6 | '../flex/flex': {
7 | type: 'parent',
8 | linked() {
9 | this.spaceChange();
10 | },
11 | },
12 |
13 | '../grid/grid': {
14 | type: 'parent',
15 | linked() {
16 | this.modeChange();
17 | },
18 | }
19 | },
20 |
21 | /**
22 | * 组件的属性列表
23 | */
24 | properties: {
25 | span: {
26 | type: Number,
27 | value: 12
28 | },
29 |
30 | //偏移量
31 | offset: {
32 | type: Number,
33 | value: 0
34 | }
35 | },
36 |
37 | /**
38 | * 组件的初始数据
39 | */
40 | data: {
41 | gridmode:'',
42 | //间隔,单位rpx
43 | space: 0
44 | },
45 |
46 | /**
47 | * 组件的方法列表
48 | */
49 | methods: {
50 | //间隔
51 | spaceChange(){
52 | let items = this.getRelationNodes('../flex/flex');
53 | this.setData({
54 | 'space': items[0].data.space
55 | })
56 | },
57 |
58 | //宫格布局mode参数
59 | modeChange(mode){
60 | let items = this.getRelationNodes('../grid/grid');
61 | console.log(items[0].data.mode)
62 | if (items[0].data.mode){
63 | this.setData({
64 | 'gridmode': items[0].data.mode
65 | })
66 | return;
67 | }
68 | },
69 | }
70 | })
71 |
--------------------------------------------------------------------------------
/component/col/col.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/col/col.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/component/col/col.wxss:
--------------------------------------------------------------------------------
1 | /* component/col/col.wxss */
2 | .g-col{
3 | position: relative;
4 | float:left;
5 | box-sizing: border-box;
6 | }
7 | .g-col-12 {
8 | width: 100%;
9 | }
10 | .g-col-11 {
11 | width: 91.66666667%;
12 | }
13 | .g-col-10 {
14 | width: 83.33333333%;
15 | }
16 | .g-col-9 {
17 | width: 75%;
18 | }
19 | .g-col-8 {
20 | width: 66.66666667%;
21 | }
22 | .g-col-7 {
23 | width: 58.33333333%;
24 | }
25 | .g-col-6 {
26 | width: 50%;
27 | }
28 | .g-col-5 {
29 | width: 41.66666667%;
30 | }
31 | .g-col-4 {
32 | width: 33.33333333%;
33 | }
34 | .g-col-3 {
35 | width: 25%;
36 | }
37 | .g-col-2 {
38 | width: 16.66666667%;
39 | }
40 | .g-col-1 {
41 | width: 8.33333333%;
42 | }
43 | .g-offset-12 {
44 | margin-left: 100%;
45 | }
46 | .g-offset-11 {
47 | margin-left: 91.66666667%;
48 | }
49 | .g-offset-10 {
50 | margin-left: 83.33333333%;
51 | }
52 | .g-offset-9 {
53 | margin-left: 75%;
54 | }
55 | .g-offset-8 {
56 | margin-left: 66.66666667%;
57 | }
58 | .g-offset-7 {
59 | margin-left: 58.33333333%;
60 | }
61 | .g-offset-6 {
62 | margin-left: 50%;
63 | }
64 | .g-offset-5 {
65 | margin-left: 41.66666667%;
66 | }
67 | .g-offset-4 {
68 | margin-left: 33.33333333%;
69 | }
70 | .g-offset-3 {
71 | margin-left: 25%;
72 | }
73 | .g-offset-2 {
74 | margin-left: 16.66666667%;
75 | }
76 | .g-offset-1 {
77 | margin-left: 8.33333333%;
78 | }
79 | .g-grid-border::after{
80 | content: '';
81 | display: block;
82 | position: absolute;
83 | top: 0;
84 | left: 0;
85 | width: 200%;
86 | height: 200%;
87 | -webkit-transform-origin: 0 0;
88 | transform-origin: 0 0;
89 | box-sizing: border-box;
90 | pointer-events: none;
91 | border-bottom:1px solid #ddd;
92 | border-left: 1px solid #ddd;
93 | transform: scale(.5);
94 | margin-left: -1px;
95 | }
--------------------------------------------------------------------------------
/component/drawer/drawer.js:
--------------------------------------------------------------------------------
1 | // component/drawer/drawer.js
2 | Component({
3 | externalClasses: ['g-class', 'g-class-mask'],
4 | /**
5 | * 组件的属性列表
6 | */
7 | properties: {
8 |
9 | show: {
10 | type: Boolean,
11 | value: 'false'
12 | },
13 |
14 | //可选:top、right、bottom、left
15 | position: {
16 | type: String,
17 | value: 'left'
18 | },
19 | //position为left、right时生效
20 | width: {
21 | type: String,
22 | value: ''
23 | },
24 | //position为top、bottom时生效
25 | height: {
26 | type: String,
27 | value: ''
28 | },
29 | //显隐动画
30 | animate: {
31 | type: Boolean,
32 | value: true
33 | }
34 | },
35 |
36 | /**
37 | * 组件的初始数据
38 | */
39 | data: {
40 | isIPX: wx.getSystemInfoSync().model.indexOf('iPhone X') == -1 ? '' : 'isIPX',
41 | animateClass: ''
42 | },
43 | /**
44 | * 组件的方法列表
45 | */
46 | methods: {
47 | //点击遮罩
48 | inTapMask(e) {
49 | this.triggerEvent('inmask');
50 | },
51 |
52 | inTest() {
53 | const me = this;
54 | me.setData({
55 | 'show': true
56 | })
57 | setTimeout(function () {
58 | me.setData({
59 | 'animateClass': 'g-drawer-show'
60 | })
61 | }, 50)
62 |
63 | console.log(123)
64 | },
65 | }
66 | })
67 |
--------------------------------------------------------------------------------
/component/drawer/drawer.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/drawer/drawer.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/component/drawer/drawer.wxss:
--------------------------------------------------------------------------------
1 | /* component/drawer/drawer.wxss */
2 | .g-mask,
3 | .g-fixed-bar{
4 | visibility:hidden;
5 | position: fixed;
6 | }
7 | .g-mask{
8 | top: 0;
9 | left: 0;
10 | z-index: 49;
11 | width: 100%;
12 | height: 100%;
13 | background-color: rgba(0, 0, 0, .5);
14 | }
15 | .g-fixed-bar{
16 | z-index: 50;
17 | box-sizing: border-box;
18 | background-color: #fff;
19 | transition: transform ease 0s;
20 | }
21 | .animate.g-fixed-bar{
22 | transition: transform ease .3s;
23 | }
24 | .g-mask-show,
25 | .g-drawer-show{
26 | visibility: initial;
27 | }
28 | .g-drawer-top{
29 | top: 0;
30 | left: 0;
31 | width: 100%;
32 | height: 60%;
33 | transform: translate3d(0, -100%, 0);
34 | }
35 | .g-drawer-right{
36 | top: 0;
37 | right: 0;
38 | width: 60%;
39 | height: 100%;
40 | transform: translate3d(100%, 0, 0);
41 | }
42 | .g-drawer-bottom{
43 | bottom: 0;
44 | left: 0;
45 | width: 100%;
46 | height: 60%;
47 | transform: translate3d(0, 100%, 0);
48 | }
49 | .g-drawer-bottom.isIPX{
50 | padding-bottom: 34px;
51 | }
52 | .g-drawer-left{
53 | top: 0;
54 | left: 0;
55 | width: 60%;
56 | height: 100%;
57 | transform: translate3d(-100%, 0, 0);
58 | }
59 | .g-drawer-show{
60 | transform: translate3d(0, 0, 0);
61 | }
--------------------------------------------------------------------------------
/component/drop/drop.js:
--------------------------------------------------------------------------------
1 | // component/drop/drop.js
2 | Component({
3 | externalClasses: ['g-class'],
4 |
5 | /**
6 | * 组件的属性列表
7 | */
8 | properties: {
9 | imgurl:{
10 | type: String,
11 | value: ''
12 | },
13 |
14 | dataJson:{
15 | type: Object,
16 | value: {}
17 | },
18 |
19 | key:{
20 | type: String,
21 | value: ''
22 | },
23 |
24 | //容器宽度
25 | boxW:{
26 | type: Number,
27 | value: ''
28 | },
29 |
30 | //容器高度
31 | boxH: {
32 | type: Number,
33 | value: ''
34 | },
35 |
36 | //选中状态
37 | active:{
38 | type: Boolean,
39 | value: false
40 | }
41 | },
42 |
43 | /**
44 | * 组件的初始数据
45 | */
46 | data: {
47 | data:{}
48 | },
49 |
50 | ready(){
51 | this.initImg();
52 | },
53 |
54 | /**
55 | * 组件的方法列表
56 | */
57 | methods: {
58 |
59 | //初始化图片
60 | initImg(){
61 | const me = this;
62 | let { imgurl, boxW, boxH } = me.data;
63 | if (me.data.dataJson.rotate){
64 | me.setData({
65 | 'data': me.data.dataJson
66 | })
67 | me.triggerEvent('init', me.data.dataJson);
68 | }
69 | else{
70 | //获取图片信息
71 | wx.getImageInfo({
72 | src: imgurl,
73 | success(res) {
74 | let data = {
75 | active: me.data.active,
76 | key: me.data.key,
77 | imgurl: imgurl,
78 | width: res.width,
79 | height: res.height,
80 | //定位居中
81 | left: boxW / 2 - res.width / 2,
82 | top: boxH / 2 - res.height / 2,
83 | scale: 1, //缩放
84 | oScale: 1, //缩放方向
85 | rotate: 1, //角度
86 | }
87 |
88 | //中心点
89 | data.cx = data.left + data.width / 2,
90 | data.cy = data.top + data.height / 2;
91 |
92 | me.setData({
93 | 'data': data
94 | })
95 | me.triggerEvent('init', data);
96 | }
97 | })
98 | }
99 |
100 | },
101 |
102 | //图片开始移动
103 | imgTouchStart(e) {
104 | const me = this;
105 | let { data, active } = me.data;
106 |
107 | data.lx = e.touches[0].clientX;
108 | data.ly = e.touches[0].clientY;
109 |
110 | me.setData({
111 | 'data': data
112 | })
113 | me.triggerEvent('imgStart', data);
114 | },
115 | //图片移动中
116 | imgTouchMove(e) {
117 | const me = this;
118 | let { data, active } = me.data;
119 |
120 | data._lx = e.touches[0].clientX;
121 | data._ly = e.touches[0].clientY;
122 |
123 | data.left += data._lx - data.lx;
124 | data.top += data._ly - data.ly;
125 | data.cx += data._lx - data.lx;
126 | data.cy += data._ly - data.ly;
127 |
128 | data.lx = e.touches[0].clientX;
129 | data.ly = e.touches[0].clientY;
130 |
131 | me.setData({
132 | 'data': data
133 | })
134 | me.triggerEvent('imgMove', data);
135 | },
136 | //图片移动结束
137 | imgTouchEnd(e) {
138 | const me = this;
139 | let { data, active } = me.data;
140 |
141 | me.triggerEvent('imgEnd', data);
142 | },
143 |
144 | //缩放、旋转开始
145 | inTouchStart(e) {
146 | const me = this;
147 | console.log(e)
148 | let { data, active } = me.data;
149 |
150 | //获取作为移动前角度的坐标
151 | data.tx = e.touches[0].clientX;
152 | data.ty = e.touches[0].clientY;
153 | //移动前的角度
154 | data.angleBefore = me.inCalcAngle(data.cx, data.cy, data.tx, data.ty);
155 | //获取图片半径
156 | data.radius = me.inGetRadius(data.cx, data.cy, data.left, data.top);
157 |
158 | },
159 | //缩放、旋转中
160 | inTouchMove(e) {
161 | const me = this;
162 | let { data, active } = me.data;
163 |
164 | //记录移动后的位置
165 | data._tx = e.touches[0].clientX;
166 | data._ty = e.touches[0].clientY;
167 |
168 | //移动的点到圆心的距离
169 | data.moveDistance = me.inGetRadius(data.cx, data.cy, data._tx, data._ty+10);
170 |
171 | data.scale = data.moveDistance / data.radius;
172 | data.oScale = 1 / data.scale;
173 |
174 |
175 | //移动后位置的角度
176 | data.angleAfter = me.inCalcAngle(data.cx, data.cy, data._tx, data._ty);
177 | //角度差
178 | data.angleDiffer = data.angleAfter - data.angleBefore;
179 |
180 | //叠加的角度差
181 | data.rotate += data.angleDiffer;
182 | data.angle = data.rotate; //赋值
183 |
184 | //用过移动后的坐标赋值为移动前坐标
185 | data.tx = e.touches[0].clientX;
186 | data.ty = e.touches[0].clientY;
187 | data.angleBefore = me.inCalcAngle(data.cx, data.cy, data.tx, data.ty);
188 |
189 | this.setData({
190 | 'data': data
191 | })
192 | },
193 | //缩放、旋转结束
194 | inTouchEnd(e) {
195 | console.log(e)
196 | },
197 |
198 | //删除
199 | inDelDrop(e){
200 | this.triggerEvent('indel', this.data.data);
201 | },
202 |
203 | //获取半径
204 | inGetRadius(cx, cy, pointer_x, pointer_y) {
205 | var ox = pointer_x - cx;
206 | var oy = pointer_y - cy;
207 | return Math.sqrt(
208 | ox * ox + oy * oy
209 | );
210 | },
211 |
212 | /*
213 | *参数1和2为图片圆心坐标
214 | *参数3和4为手点击的坐标
215 | *返回值为手点击的坐标到圆心的角度
216 | */
217 | inCalcAngle (cx, cy, pointer_x, pointer_y) {
218 | var ox = pointer_x - cx;
219 | var oy = pointer_y - cy;
220 | var to = Math.abs(ox / oy);
221 | var angle = Math.atan(to) / (2 * Math.PI) * 360;
222 | // console.log("ox.oy:", ox, oy)
223 | if (ox < 0 && oy < 0)//相对在左上角,第四象限,js中坐标系是从左上角开始的,这里的象限是正常坐标系
224 | {
225 | angle = -angle;
226 | } else if (ox <= 0 && oy >= 0)//左下角,3象限
227 | {
228 | angle = -(180 - angle)
229 | } else if (ox > 0 && oy < 0)//右上角,1象限
230 | {
231 | angle = angle;
232 | } else if (ox > 0 && oy > 0)//右下角,2象限
233 | {
234 | angle = 180 - angle;
235 | }
236 | return angle;
237 | },
238 | }
239 | })
240 |
--------------------------------------------------------------------------------
/component/drop/drop.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/drop/drop.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/component/drop/drop.wxss:
--------------------------------------------------------------------------------
1 | /* component/drop/drop.wxss */
2 | .opacity{
3 | opacity: .7;
4 | }
5 | .item-drop{
6 | position: absolute;
7 | z-index: 10;
8 | left: 50%;
9 | top: 50%;
10 | transform-origin: center;
11 | }
12 | .drop-img{
13 | transform-origin: center;
14 | border:1px solid transparent;
15 | }
16 | .drop-icon{
17 | position: absolute;
18 | width: 40rpx;
19 | height: 40rpx;
20 | background-position: center;
21 | background-size: cover;
22 | background-color: rgba(44,169,225, .95);
23 | border-radius: 50%;
24 | transform-origin: center;
25 | }
26 | .drop-active{
27 | border-color: #2ca9e1;
28 | }
29 | .drop-close{
30 | top: -20rpx;
31 | left: -20rpx;
32 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAArlBMVEUAAAAsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeH////c8fo4ruPh8/s1reLa8PozrOLD5/c7r+O+5fa44vXj9PvR7PnL6viW1PD7/v+v3vSKz+7m9fur3fOp3PNcvehQuOb0bZMCAAAAInRSTlMAC+Dr9fJ3bkgfFgjbnU/Wx724qJZZAv7j0ZFcKSQU5UZFArp3FQAAAqFJREFUWMPFmYl2qjAURSODIEVwrGNte9AipdZOb/r/H3tWeC+rcjMAWav7A7bHDDfJhSnY3HuTYWy7cOxwMZx49xvWnE60XMxwwWyxjDpNbNf+2IEAZ+xf1w3nWZBieXViXnVtKLG7V7q+qQUtrKmWrjeCNqOe2rdyUQN3pRq9PmrSl45kMEBtBoFk+EI0IBQO5PoWjbhd076bORoyvyHHL0RjwoCY3wFaMKjOdR+t6FfWM1qyulgwLlrifl08I7Rm9KW+wABT7utYMIDFS24XRuj+D2jDCPa/iB4IXo8/M4jIXpLkHRW88nyzKF+SJNudyLdPThCjWJyFPgiOyacxFfloIfyzcAw6oShjWvj2qDI+T4kDgtljYUxF+R6o33I+pyUCTWnc0fmec1BEJ+EEAsiM2ZbnI5ichCGgnzHd8nwUIWMBAFVGMh9NwBeNRsZd6cshxOf7WJ1x96DKB3R56Vdk5L5cfhQMAb2MPJ+MIYuhZTz+3uv4EDMbaiNH5YPNXKiN+j64DBoc3grfSwolzIGaWSF8y6FGYwyRHZMyYQb1X7ZAQNQXvh4Vk7IAR1ifuVGVMVYu7LTcv38OfBdKGAq3XrUePOoY+7LicLl/nzTGsSssX0R90cnoSwtsfllfnpTGgLFQNx837jMICPkhReUjxqw0phAfUpE4H/9/uhkj4UGP/JnwSTLyg56NaR9Pom8ciy9Le0mOYs+8o4ovvs7xfCLjD+o6J75wcp/I+IoKnuRK/Ete/T4OH+SV2Pyl3fyzwvzDx/zTzPzj0fzz1vwD3HyLoH0Tw3ibhWQ9b+hbC1tVMRoQ9yQ94SbNtI203bdETZaqxmlUryEZmW6ZGm7qmm47G26MG27df//HhZLg7vz5wwEcOx5OvLuAyfkL6cmcPY2q2W0AAAAASUVORK5CYII=)
33 | }
34 | .drop-scale{
35 | bottom:-20rpx;
36 | right: -20rpx;
37 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAyVBMVEUAAAAsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeEsqeH////v+f2l2/OT0/BQuOZGtOUzrOLU7vnP7Pkvq+Lr9/zY7/rD5/e34vWh2fKb1/Fmwen2/P7k9Pus3vRgvulVuudMtuby+v3I6fe+5faN0e85r+OCzO13yOze8ftpwuraYi5fAAAAInRSTlMAC9/rRxT18ncfnNuV49a9qFkmBwK4bFxQ0HD+yMaQTdK3yqRkkAAAApZJREFUWMPF2W1XokAUwPHhGYRAUxTtafdOqWmpuZpWq7X7/T/UKgfjMKMwd5xz9v+qV79DQcPMhVRkme0gCg0HbEPvRkHbtIh82t1t9wqYrrq3d5qM1jLrNpzIrpst7MX1dChN72kYzjWgMsMVJhs6CKU3hDjvJwgXe9VexwFETqeCa9YAWa1Z5lk3gO7GKvnz+SCR753yLi9AqotLjCcvWj5I51u817yGM7rm73UNzqrGPc9wZh3mgXHOBZ3iwxPDdxNa6HklKMaF9QXyKNMYBGvknqaXgH1RUM/XRxc4cP7ZT5t/gXDuwdMMHpwBPkPLwDbwIJ084sU2SWvpDHg/khT1VgqawICLx7mkaKZgnQXpFmZ7cYQW6+ktsTlwDfA7FZ+QoK3twAQ4cACZiL7GZAcGR0HJawx2oH8ChKmE6BNiwTEwF8c40coeGu6mpH3gRZO4R8AhFETMnXH5pX+63MB343ShQL0KIihtjFwoIhJCeVO6HCDAkBhQ0Rvq4TaIA0pzCCiO2KpBQ/WvrKsFDfJDLRiSSC0YoXZdX8vRoPJfzxX3hpTS9wrRJSYOpItcfHqZrfnlywLx+nvx/Q2yNpQu+QWW+AhxXhBfKV1AMR+7F37Zi/eZ+LD78chLKgG8ODwFJsyLHifyoK1lWxG0+Dw8CtazzRKuh4PIgyazncOJPKi38g0nqtdUhE8W7DFbYqT4MWNAQ2M27ViRMqDLHCtQbXhQ15iDj1Crv7/2rdYTDmwwRzORtmN6aMGCsczhcUXZmMMj9ni7/cN4UzjUUX0AVz4iUD/EUD9mUT8I4vNCGS/0lA/TSmoGWC9okvIS3EAyIZV5sbgXe4qHuqrHzooH44pH9///40Lx84cNYBuhyOePf+ELncYW90RbAAAAAElFTkSuQmCC)
38 | }
--------------------------------------------------------------------------------
/component/fixed/fixed.js:
--------------------------------------------------------------------------------
1 | // component/fixed/fixed.js
2 | Component({
3 | externalClasses: ['g-class'],
4 |
5 | observers:{
6 | 'scrollTop'(val){
7 | this.inSetFixedClass();
8 | }
9 | },
10 |
11 | /**
12 | * 组件的属性列表
13 | */
14 | properties: {
15 | scrollTop:{
16 | type: [String, Number],
17 | value: 0
18 | }
19 | },
20 |
21 | /**
22 | * 组件的初始数据
23 | */
24 | data: {
25 | fixedData:null,
26 | toggleClass:''
27 | },
28 |
29 | ready(){
30 | this.inGetFixedBox('#fixed-bar');
31 | },
32 |
33 | /**
34 | * 组件的方法列表
35 | */
36 | methods: {
37 |
38 | //获取指定节点相关参数
39 | inGetQuery(obj, call){
40 | const query = this.createSelectorQuery();
41 | query.select(obj).boundingClientRect();
42 | query.selectViewport().scrollOffset();
43 | query.exec(function (res) {
44 | call(res[0]);
45 | });
46 | },
47 |
48 | //获取吸顶容器节点参数
49 | inGetFixedBox(obj){
50 | const me = this;
51 | me.inGetQuery(obj, res=>{
52 | console.log(res)
53 | me.setData({
54 | 'fixedData':res
55 | })
56 | })
57 | },
58 |
59 | //设置吸顶容器class
60 | inSetFixedClass(){
61 | const { scrollTop, fixedData } = this.data;
62 | if (!fixedData) return;
63 | if (!this.timeOut){
64 | //避免频繁setData造成卡顿,控制50ms执行一次
65 | this.timeOut = setTimeout(()=>{
66 | if (scrollTop >= fixedData.top){
67 | this.setData({
68 | 'toggleClass': 'fixed'
69 | })
70 | }
71 | else{
72 | this.setData({
73 | 'toggleClass': ''
74 | })
75 | }
76 | this.timeOut = undefined;
77 | },50)
78 | }
79 | },
80 | }
81 | })
82 |
--------------------------------------------------------------------------------
/component/fixed/fixed.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/fixed/fixed.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/component/fixed/fixed.wxss:
--------------------------------------------------------------------------------
1 | /* component/fixed/fixed.wxss */
2 | .fixed{
3 | position: fixed;
4 | width: 100%;
5 | left: 0;
6 | top: 0;
7 | }
--------------------------------------------------------------------------------
/component/flex/flex.js:
--------------------------------------------------------------------------------
1 | // component/flex/flex.js
2 | Component({
3 | externalClasses: ['g-class'],
4 |
5 | relations: {
6 | '../col/col': {
7 | type: 'child'
8 | }
9 | },
10 |
11 | /**
12 | * 组件的属性列表
13 | */
14 | properties: {
15 | //间隔,单位rpx
16 | space:{
17 | type: [String, Number],
18 | value: 0
19 | }
20 | }
21 | })
22 |
--------------------------------------------------------------------------------
/component/flex/flex.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/flex/flex.wxml:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/component/flex/flex.wxss:
--------------------------------------------------------------------------------
1 | /* component/flex/flex.wxss */
2 | .g-flex::after{
3 | content:"";
4 | display:table;
5 | clear:both;
6 | }
--------------------------------------------------------------------------------
/component/gesture/gesture.js:
--------------------------------------------------------------------------------
1 | // component/gesture/gesture.js
2 | let touchStart, touchEnd;
3 | Component({
4 | externalClasses: ['g-class'],
5 | options: {
6 | multipleSlots: true // 在组件定义时的选项中启用多slot支持
7 | },
8 | /**
9 | * 组件的属性列表
10 | */
11 | properties: {
12 | //关键字
13 | key:{
14 | type: String,
15 | value: ''
16 | },
17 | //滑动方向可选:left || right
18 | direction:{
19 | type: String,
20 | value: 'left'
21 | },
22 | //状态
23 | state:{
24 | type: Boolean,
25 | value: false
26 | },
27 | //移动步长(单位rpx)
28 | stepx:{
29 | type: Number,
30 | value: 200
31 | }
32 | },
33 |
34 | /**
35 | * 组件的初始数据
36 | */
37 | data: {
38 |
39 | },
40 |
41 | /**
42 | * 组件的方法列表
43 | */
44 | methods: {
45 |
46 | //滑动开始
47 | inTouchStart(e) {
48 | const me = this;
49 | if (e.changedTouches.length > 0) {
50 | touchStart = e.changedTouches[0].pageX;
51 | }
52 | },
53 |
54 | //滑动结束
55 | inTouchEnd(e) {
56 | const me = this;
57 | const getData = e.currentTarget.dataset;
58 | touchEnd = e.changedTouches[0].pageX;
59 | const { key, direction } = me.data;
60 |
61 | const parms = { state: me.data.state, key: key };
62 |
63 | //重置
64 | function InReset(){
65 | me.setData({
66 | 'state': false
67 | })
68 | me.triggerEvent('inreset', parms);
69 | }
70 |
71 | //左滑
72 | if (direction == 'left') {
73 | if (touchStart - touchEnd > 30) {
74 | me.triggerEvent('inleft', parms);
75 | }
76 | else {
77 | InReset();
78 | }
79 | }
80 | //右滑
81 | else if (direction == 'right'){
82 | if ( touchEnd - touchStart > 30) {
83 | me.triggerEvent('inright', parms);
84 | }
85 | else{
86 | InReset();
87 | }
88 | }
89 | },
90 |
91 | }
92 | })
93 |
--------------------------------------------------------------------------------
/component/gesture/gesture.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/gesture/gesture.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/component/gesture/gesture.wxss:
--------------------------------------------------------------------------------
1 | /* component/gesture/gesture.wxss */
2 | .slide-box{
3 | overflow: hidden;
4 | }
5 | .slide-bar{
6 | position: relative;
7 | transition: transform .2s ease-in-out;
8 | }
9 | .slide-bar.left .slide-right,
10 | .slide-bar.right .slide-left{
11 | position: absolute;
12 | top: 0;
13 | height: 100%;
14 | }
15 | .slide-bar.left .slide-right{
16 | right: 0;
17 | transform: translateX(100%);
18 | }
19 | .slide-bar.right .slide-left{
20 | left: 0;
21 | transform: translateX(-100%);
22 | }
--------------------------------------------------------------------------------
/component/grid/grid.js:
--------------------------------------------------------------------------------
1 | // component/grid/grid.js
2 | Component({
3 |
4 | externalClasses: ['g-class'],
5 |
6 | relations: {
7 | '../col/col': {
8 | type: 'child',
9 | }
10 | },
11 |
12 | /**
13 | * 组件的属性列表
14 | */
15 | properties: {
16 | //对齐方式 tl、tc、tr
17 | align: {
18 | type: String,
19 | value: "tc"
20 | },
21 |
22 | //可选:border
23 | mode: {
24 | type: String,
25 | value: ''
26 | }
27 | },
28 |
29 | /**
30 | * 组件的初始数据
31 | */
32 | data: {
33 |
34 | },
35 |
36 | /**
37 | * 组件的方法列表
38 | */
39 | methods: {
40 |
41 | }
42 | })
43 |
--------------------------------------------------------------------------------
/component/grid/grid.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/grid/grid.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/component/grid/grid.wxss:
--------------------------------------------------------------------------------
1 | /* component/grid/grid.wxss */
2 | .g-grid{
3 | position: relative;
4 | }
5 | .g-border::before{
6 | content: '';
7 | display: block;
8 | position: absolute;
9 | left: 0;
10 | top: 0;
11 | width: 100%;
12 | height: 1px;
13 | box-sizing: border-box;
14 | border-bottom:1px solid #ddd;
15 | transform: scaleY(.5);
16 | }
17 | .g-grid::after{
18 | content:"";
19 | display:table;
20 | clear:both;
21 | }
22 | .g-grid.tc{
23 | text-align: center
24 | }
25 | .g-grid.tr{
26 | text-align: right
27 | }
--------------------------------------------------------------------------------
/component/indexes-item/indexes-item.js:
--------------------------------------------------------------------------------
1 | // component/indexes-item/indexes-item.js
2 | Component({
3 |
4 | externalClasses: ['g-class'],
5 |
6 | /**
7 | * 组件的属性列表
8 | */
9 | properties: {
10 | name:{
11 | type: String,
12 | value: ''
13 | }
14 | },
15 |
16 | relations: {
17 | '../indexes/indexes': {
18 | type: 'parent'
19 | }
20 | },
21 |
22 | /**
23 | * 组件的初始数据
24 | */
25 | data: {
26 | top: 0,
27 | },
28 |
29 | /**
30 | * 组件的方法列表
31 | */
32 | methods: {
33 | updateDataChange() {
34 | const query = wx.createSelectorQuery().in(this);
35 | query.select('.g-indexes-item').boundingClientRect((res) => {
36 | this.setData({
37 | top: res.top
38 | })
39 | }).exec()
40 | }
41 | }
42 | })
43 |
--------------------------------------------------------------------------------
/component/indexes-item/indexes-item.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/indexes-item/indexes-item.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{name}}
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/component/indexes-item/indexes-item.wxss:
--------------------------------------------------------------------------------
1 | /* component/indexes-item/indexes-item.wxss */
2 | .g-indexes-item-title{
3 | height: 80rpx;
4 | line-height: 80rpx;
5 | padding:0 30rpx;
6 | }
7 | .g-indexes-item-box{
8 | line-height: 88rpx;
9 | padding:0 30rpx;
10 | background-color: #fff;
11 | }
--------------------------------------------------------------------------------
/component/indexes/indexes.js:
--------------------------------------------------------------------------------
1 | // component/indexes/indexes.js
2 | Component({
3 |
4 | externalClasses: ['g-class'],
5 |
6 | /**
7 | * 组件的属性列表
8 | */
9 | properties: {
10 | //索引数组
11 | listData:{
12 | type: Object,
13 | value: []
14 | },
15 | },
16 |
17 | relations: {
18 | '../indexes-item/indexes-item': {
19 | type: 'child',
20 | linked() {
21 | this.itemDataChange();
22 | },
23 | linkChanged() {
24 | this.itemDataChange();
25 | },
26 | unlinked() {
27 | this.itemDataChange();
28 | }
29 | }
30 | },
31 |
32 | /**
33 | * 组件的初始数据
34 | */
35 | data: {
36 | scrollTop: 0,
37 | indexesDom: null,
38 | indexesActive: {
39 | state: false,
40 | value: ''
41 | },
42 | indexesData: []
43 | },
44 |
45 | ready(){
46 | this.inGetIndexesBox('.g-indexes-bar');
47 | },
48 |
49 | /**
50 | * 组件的方法列表
51 | */
52 | methods: {
53 | //获取指定节点相关参数
54 | inGetQuery(obj, call) {
55 | const query = this.createSelectorQuery();
56 | query.select(obj).boundingClientRect();
57 | query.selectViewport().scrollOffset();
58 | query.exec(function (res) {
59 | call(res[0]);
60 | });
61 | },
62 |
63 | //获取容器节点参数
64 | inGetIndexesBox(obj) {
65 | const me = this;
66 | me.inGetQuery(obj, res => {
67 | me.setData({
68 | 'indexesDom': res
69 | })
70 | //console.log(res)
71 | })
72 | },
73 |
74 | //获取字组件列表Data
75 | itemDataChange(){
76 | const childItems = this.getRelationNodes('../indexes-item/indexes-item');
77 | let indexesData = [];
78 | childItems.forEach(item=>{
79 | indexesData.push(item.data.name);
80 | item.updateDataChange();
81 | })
82 | this.setData({
83 | 'indexesData': indexesData
84 | })
85 | },
86 |
87 | //Touch Move
88 | inTouchMove(e) {
89 | if (!this.timeOut){
90 | //避免频繁setData造成卡顿,控制50ms执行一次
91 | this.timeOut = setTimeout(()=>{
92 | const { indexesData, indexesDom } = this.data;
93 | this.mY = e.touches[0].clientY - indexesDom.top;
94 | let idx = Math.round(this.mY / (indexesDom.height / indexesData.length)) - 1;
95 | if (idx > indexesData.length-1) idx = indexesData.length - 1;
96 | else if (idx < 0) idx = 0;
97 | this.setData({
98 | 'indexesActive.state': true,
99 | 'indexesActive.value': indexesData[idx]
100 | })
101 |
102 | //快捷区域内选中,震动一下
103 | if (this.mY >= 0 && this.mY <= indexesDom.height) {
104 | wx.vibrateShort();
105 | }
106 |
107 | this.inSetScrollTop(idx);
108 |
109 | this.timeOut = undefined;
110 |
111 | this.triggerEvent('inmove', { index: idx, active: indexesData[idx] });
112 | },50)
113 | }
114 | },
115 |
116 | //设置滚动条
117 | inSetScrollTop(idx){
118 | const childItems = this.getRelationNodes('../indexes-item/indexes-item');
119 | this.setData({
120 | 'scrollTop': childItems[idx].data.top
121 | })
122 | },
123 |
124 | //Touch End
125 | inTouchEnd(e){
126 | setTimeout(() => {
127 | this.setData({
128 | 'indexesActive.state': false
129 | });
130 | }, 51)
131 | }
132 |
133 | //
134 |
135 | }
136 | })
137 |
--------------------------------------------------------------------------------
/component/indexes/indexes.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/indexes/indexes.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{indexesActive.value}}
4 |
5 | {{item}}
6 |
7 |
8 |
--------------------------------------------------------------------------------
/component/indexes/indexes.wxss:
--------------------------------------------------------------------------------
1 | /* component/indexes/indexes.wxss */
2 | .scroll-view{
3 | height: 100vh;
4 | }
5 | .g-indexes-bar{
6 | position: fixed;
7 | z-index: 3;
8 | top: 50%;
9 | right: 10rpx;
10 | transform: translate(0, -50%);
11 | }
12 | .g-item-indexes{
13 | width: 18px;
14 | height: 18px;
15 | color: #666;
16 | line-height: 18px;
17 | font-size: 24rpx;
18 | text-align: center;
19 | }
20 | .g-indexes-active{
21 | position: fixed;
22 | z-index: 2;
23 | left: 50%;
24 | top: 50%;
25 | width: 140rpx;
26 | height: 140rpx;
27 | line-height: 140rpx;
28 | text-align: center;
29 | color: #fff;
30 | font-size: 60rpx;
31 | border-radius: 50%;
32 | transform: translate(-50%, -50%);
33 | background-color: rgba(0,0,0, .5);
34 | }
--------------------------------------------------------------------------------
/component/input/input.js:
--------------------------------------------------------------------------------
1 | // component/input/input.js
2 | Component({
3 |
4 | behaviors: ['wx://form-field'],
5 |
6 | externalClasses: ['g-class', 'h-class', 'b-class', 'i-class'],
7 |
8 | /**
9 | * 组件的属性列表
10 | */
11 | properties: {
12 |
13 | //input标题
14 | title: {
15 | type: String,
16 | value: ""
17 | },
18 |
19 | //可选: text、textarea、number、password
20 | type: {
21 | type: String,
22 | value: 'text'
23 | },
24 |
25 | //默认值
26 | value: {
27 | type: String,
28 | value: ''
29 | },
30 |
31 | //可选: radius
32 | mode: {
33 | type: String,
34 | value: ''
35 | },
36 |
37 | //border-bottom
38 | isborder: {
39 | type: Boolean,
40 | value: true
41 | },
42 |
43 | //提示文本
44 | placeholder: {
45 | type: String,
46 | value: ''
47 | },
48 |
49 | //自定义提示文本样式
50 | placeholderstyle: {
51 | type: String,
52 | value: 'color:#b3b7ba;'
53 | },
54 |
55 | //是否禁用
56 | disabled: {
57 | type: Boolean,
58 | value: false
59 | },
60 |
61 | //自动聚焦
62 | focus: {
63 | type: Boolean,
64 | value: false
65 | },
66 |
67 | //最大输入长度,默认-1(不限制)
68 | maxlength: {
69 | type: Number,
70 | value: -1
71 | },
72 |
73 | //错误文本框
74 | error: {
75 | type: Boolean,
76 | value: false
77 | },
78 |
79 | //对齐方式:tl居左、tc居中、tr居右
80 | align: {
81 | type: String,
82 | value: ''
83 | },
84 |
85 | //键盘右下角按钮的文字,仅在type='text'时生效
86 | //可选值参考微信ipnut组件confirm-type属性
87 | confirmtype: {
88 | type: String,
89 | value: 'done'
90 | },
91 |
92 | },
93 |
94 | /**
95 | * 组件的方法列表
96 | */
97 | methods: {
98 | inFocus(event) {
99 | this.triggerEvent('focus', event);
100 | },
101 | inChange(event) {
102 | const { detail = {} } = event;
103 | const { value = '' } = detail;
104 | this.setData({ value });
105 | this.triggerEvent('change', event);
106 | },
107 | inBlue(event) {
108 | this.triggerEvent('blur', event);
109 | },
110 | inConfirm(event) {
111 | this.triggerEvent('confirm', event);
112 | },
113 | }
114 | })
115 |
--------------------------------------------------------------------------------
/component/input/input.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/input/input.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{title}}
4 |
5 |
19 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/component/input/input.wxss:
--------------------------------------------------------------------------------
1 | /* component/input/input.wxss */
2 | .tc{
3 | text-align: center;
4 | }
5 | .tr{
6 | text-align: right;
7 | }
8 | .g-cell{
9 | display: flex;
10 | flex-flow: row;
11 | position: relative;
12 | background-color: #fff;
13 | box-shadow: 0 10rpx 20rpx rgba(0,0,0, .01);
14 | }
15 | .g-cell-hd,
16 | .g-input{
17 | position: relative;
18 | min-height: 88rpx;
19 | line-height: 48rpx;
20 | padding: 20rpx 30rpx;
21 | box-sizing: border-box;
22 | }
23 | .g-cell-bd{
24 | flex: 1;
25 | overflow: hidden;
26 | }
27 | .g-cell-hd{
28 | width: 170rpx;
29 | color: #666;
30 | padding-right: 0;
31 | }
32 | .g-input{
33 | height: 88rpx;
34 | }
35 | .g-cell-hd + .g-cell-bd .g-input{
36 | padding-left: 30rpx;
37 | }
38 | .g-cell-hd.disabled,
39 | .g-input.disabled{
40 | background-color: #f9f9f9;
41 | }
42 | textarea.g-input{
43 | width: 100%;
44 | height: 200rpx;
45 | padding-top: 12rpx;
46 | padding-bottom: 12rpx;
47 | padding-left: 20rpx!important;
48 | }
49 | .g-cell.borbom::before{
50 | content: '';
51 | position: absolute;
52 | z-index: 2;
53 | height: 0;
54 | left: 30rpx;
55 | bottom: 0;
56 | width: calc(100% - 30rpx);
57 | border-bottom: 1px solid rgba(0,0,0, .05);
58 | transform: scaleY(.5);
59 | }
60 | .g-input-error::after{
61 | content: '';
62 | position: absolute;
63 | z-index: 4;
64 | top: 0;
65 | right: 0;
66 | left: 0;
67 | width: 200%;
68 | height: 200%;
69 | transform-origin: 0 0;
70 | pointer-events: none;
71 | box-sizing: border-box;
72 | border:1px solid #e62b2b;
73 | transform: scale(.5);
74 | }
75 | .g-radius .g-cell-hd{
76 | border-top-left-radius: 8rpx;
77 | border-bottom-left-radius: 8rpx;
78 | }
79 | .g-radius .g-cell-bd{
80 | border-radius: 8rpx;
81 | }
82 | .g-radius .g-cell-hd + .g-cell-bd{
83 | border-top-left-radius: 0;
84 | border-bottom-left-radius: 0;
85 | }
86 | .g-radius::before{
87 | border:0;
88 | }
89 | .g-radius::after{
90 | border-radius: 16rpx;
91 | }
--------------------------------------------------------------------------------
/component/line/line.js:
--------------------------------------------------------------------------------
1 | // component/line/line.js
2 | Component({
3 | externalClasses: ['g-class'],
4 |
5 | /**
6 | * 组件的属性列表
7 | */
8 | properties: {
9 | line:{
10 | type:Number,
11 | value: 1
12 | }
13 | },
14 |
15 | /**
16 | * 组件的初始数据
17 | */
18 | data: {
19 |
20 | },
21 |
22 | /**
23 | * 组件的方法列表
24 | */
25 | methods: {
26 |
27 | }
28 | })
29 |
--------------------------------------------------------------------------------
/component/line/line.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/line/line.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/component/line/line.wxss:
--------------------------------------------------------------------------------
1 | /* component/line/line.wxss */
2 | .g-line{
3 | overflow: hidden;
4 | text-overflow: ellipsis;
5 | white-space: nowrap;
6 | }
7 | .g-multiline{
8 | overflow : hidden;
9 | text-overflow: ellipsis;
10 | display: -webkit-box;
11 | -webkit-box-orient: vertical;
12 | }
--------------------------------------------------------------------------------
/component/list/list.js:
--------------------------------------------------------------------------------
1 | // component/list/list.js
2 | Component({
3 | externalClasses: ['g-class', 'h-class', 'b-class'],
4 |
5 | /**
6 | * 组件的属性列表
7 | */
8 | properties: {
9 |
10 | title: {
11 | type: String,
12 | value: ''
13 | },
14 |
15 | //可选tl,tc、tr
16 | align:{
17 | type: String,
18 | value: ''
19 | },
20 |
21 | //可选: radius
22 | mode: {
23 | type: String,
24 | value: ''
25 | },
26 |
27 | //头像
28 | avatar:{
29 | type: String,
30 | value: ''
31 | },
32 |
33 | //图标
34 | icon:{
35 | type: String,
36 | value: ''
37 | },
38 |
39 | //标题垂直居中
40 | vertical:{
41 | type: Boolean,
42 | value: false
43 | },
44 |
45 | //右箭头
46 | link:{
47 | type: Boolean,
48 | value: false
49 | },
50 |
51 | //溢出隐藏
52 | ellipsis:{
53 | type: Boolean,
54 | value: false
55 | },
56 |
57 | isborder: {
58 | type: Boolean,
59 | value: true
60 | },
61 |
62 | disabled: {
63 | type: Boolean,
64 | value: false
65 | }
66 |
67 | },
68 |
69 | /**
70 | * 组件的方法列表
71 | */
72 | methods: {
73 |
74 | }
75 | })
76 |
--------------------------------------------------------------------------------
/component/list/list.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/list/list.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{title}}
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/component/list/list.wxss:
--------------------------------------------------------------------------------
1 | /* component/list/list.wxss */
2 | .tc{
3 | text-align: center;
4 | }
5 | .tr{
6 | text-align: right;
7 | }
8 | .ellipsis{
9 | overflow: hidden;
10 | white-space: nowrap;
11 | text-overflow: ellipsis;
12 | }
13 | .g-link:active{
14 | opacity: .7;
15 | background-color: rgba(0,0,0, .07);
16 | }
17 | .vertical{
18 | display:box;
19 | display:-webkit-box;
20 | -webkit-box-pack:center;
21 | box-pack:center;
22 | -webkit-box-orient:vertical;
23 | box-orient:vertical;
24 | }
25 | .g-cell{
26 | display: flex;
27 | flex-flow: row;
28 | position: relative;
29 | background-color: #fff;
30 | box-shadow: 0 10rpx 20rpx rgba(0,0,0, .01);
31 | }
32 | .disabled{
33 | background-color: #f9f9f9;
34 | color: #999;
35 | }
36 | .g-cell.border::before{
37 | content: '';
38 | position: absolute;
39 | z-index: 2;
40 | height: 0;
41 | left: 30rpx;
42 | bottom: 0;
43 | width: calc(100% - 30rpx);
44 | border-bottom: 1px solid rgba(0,0,0, .05);
45 | transform: scaleY(.5);
46 | }
47 | .g-cell-hd,
48 | .g-cell-bd{
49 | position: relative;
50 | min-height: 88rpx;
51 | line-height: 48rpx;
52 | padding: 20rpx 30rpx;
53 | overflow: hidden;
54 | box-sizing: border-box;
55 | }
56 | .g-cell-hd{
57 | width: 170rpx;
58 | color: #666;
59 | padding-right: 0;
60 | }
61 | .g-cell-bd{
62 | flex: 1;
63 | overflow: hidden;
64 | }
65 | .g-cell-bd.ellipsis{
66 | height: 48rpx;
67 | }
68 | .g-cell-hd + .g-cell-bd{
69 | padding-left: 30rpx;
70 | }
71 | .g-icon + .g-cell-hd,
72 | .g-icon + .g-cell-bd{
73 | padding-left: 14rpx;
74 | }
75 | .g-icon{
76 | padding: 20rpx 10rpx 12rpx 30rpx;
77 | }
78 | .img-icon {
79 | width: 42rpx;
80 | height: 42rpx;
81 | }
82 | .img-avatar{
83 | width: 80rpx;
84 | height: 80rpx;
85 | border-radius: 6rpx;
86 | }
87 | .g-arrow{
88 | position: relative;
89 | width: 60rpx;
90 | }
91 | .g-arrow::after{
92 | content: '';
93 | display: inline-block;
94 | width: 18rpx;
95 | height: 18rpx;
96 | border-top: 4rpx solid #ced0d6;
97 | border-right: 4rpx solid #ced0d6;
98 | transform: rotate(45deg);
99 | }
100 | .g-radius{
101 | border-radius: 8rpx;
102 | margin:0 30rpx 30rpx;
103 | }
104 | .g-radius::before{
105 | border:0;
106 | }
--------------------------------------------------------------------------------
/component/loading/loading.js:
--------------------------------------------------------------------------------
1 | // component/loading/loading.js
2 | Component({
3 | externalClasses: ['g-class'],
4 | /**
5 | * 组件的属性列表
6 | */
7 | properties: {
8 | //显隐
9 | show:{
10 | type:Boolean,
11 | value: true
12 | },
13 |
14 | //default || box
15 | mode:{
16 | type: String,
17 | value: 'default'
18 | }
19 | },
20 |
21 | /**
22 | * 组件的初始数据
23 | */
24 | data: {
25 |
26 | },
27 |
28 | /**
29 | * 组件的方法列表
30 | */
31 | methods: {
32 |
33 | }
34 | })
35 |
--------------------------------------------------------------------------------
/component/loading/loading.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/loading/loading.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/component/loading/loading.wxss:
--------------------------------------------------------------------------------
1 | /* component/loading/loading.wxss */
2 | .g-loading,
3 | .g-loading-box{
4 | position: relative;
5 | padding: 30rpx 0;
6 | }
7 | .g-loading::after{
8 | content: '';
9 | display: block;
10 | width: 40rpx;
11 | height: 40rpx;
12 | position: relative;
13 | z-index: 2;
14 | margin:0 auto;
15 | text-indent: -9999px;
16 | border-radius: 50%;
17 | border-top: 4rpx solid rgba(44, 169, 225, 1);
18 | border-right: 4rpx solid rgba(0, 0, 0, .1);
19 | border-bottom: 4rpx solid rgba(0, 0, 0, .1);
20 | border-left: 4rpx solid rgba(0, 0, 0, .1);
21 | animation: loading 2s infinite linear;
22 | }
23 | @keyframes loading {
24 | 0% {
25 | transform: rotate(0deg);
26 | }
27 | 100% {
28 | transform: rotate(360deg);
29 | }
30 | }
31 | .g-loading-box{
32 | height: 44rpx;
33 | }
34 | .g-loading-box::before,
35 | .g-loading-box::after{
36 | content: "";
37 | width: 44rpx;
38 | left: 50%;
39 | margin-left: -22rpx;
40 | position: absolute;
41 | }
42 | .g-loading-box::before{
43 | height: 10rpx;
44 | border-radius: 50%;
45 | background-color: rgba(0,0,0, .1);
46 | bottom: 12rpx;
47 | animation: shadow .5s linear infinite;
48 | }
49 | .g-loading-box::after{
50 | height: 44rpx;
51 | border-radius: 8rpx;
52 | background: rgba(44, 169, 225, 1);
53 | animation: loading-box .5s linear infinite;
54 | }
55 | @keyframes loading-box{
56 | 17% {
57 | border-bottom-right-radius: 8rpx;
58 | }
59 | 25% {
60 | transform: translateY(10rpx) rotate(22.5deg);
61 | }
62 | 50% {
63 | transform: translateY(20rpx) scale(1, 0.9) rotate(45deg);
64 | border-bottom-right-radius: 40rpx;
65 | }
66 | 75% {
67 | transform: translateY(10rpx) rotate(67.5deg);
68 | }
69 | 100% {
70 | transform: translateY(0) rotate(90deg);
71 | }
72 | }
--------------------------------------------------------------------------------
/component/modal/modal.js:
--------------------------------------------------------------------------------
1 | // component/modal/modal.js
2 | Component({
3 | externalClasses: ['g-class', 'g-class-mask'],
4 | /**
5 | * 组件的属性列表
6 | */
7 | properties: {
8 | //可选:success、danger、del、custom
9 | types:{
10 | type:String,
11 | value:''
12 | },
13 |
14 | show:{
15 | type: Boolean,
16 | value: false
17 | },
18 |
19 | //点击确定是否异步
20 | isloading:{
21 | type: Boolean,
22 | value: false
23 | },
24 |
25 | //是否显示取消按钮
26 | iscancel:{
27 | type: Boolean,
28 | value: true
29 | },
30 |
31 | cancelTxt:{
32 | type: String,
33 | value: '取 消'
34 | },
35 |
36 | successTxt: {
37 | type: String,
38 | value: '确 定'
39 | },
40 |
41 | //留言
42 | onemsg:{
43 | type: String,
44 | value: ''
45 | },
46 | twomsg: {
47 | type: String,
48 | value: ''
49 | },
50 |
51 | //配图(types为custom时生效)
52 | mapping:{
53 | type: String,
54 | value: ''
55 | },
56 | //配图自定义样式(types为custom时生效)
57 | mappingstyle:{
58 | type: String,
59 | value: ''
60 | }
61 | },
62 |
63 | /**
64 | * 组件的初始数据
65 | */
66 | data: {
67 | imgurl:{
68 | success:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAA5FBMVEX///8jq/8hq/8orv8hrP8krP9GvP89uP9hzv8krv8hrP8qsP/J6v8nrv8rsP8irP8krf8qsP9hz/8jrf8ysP8hrP8jrf81tf8hrP8hrP8jrP8usf/X8f8irP8jrf/K6/8ssf8irP8hq//L7P/o//8krf8lr//M7f8or//L6//K7P8irP/L7P/K7P/K7P8jrP/O7v/U9f/R8f/N7f/L7P/P7f/O7/+04/+e3P9px/8hq//K6//A6P+k3f8nrv9YwP9MvP8zsv+t4P+X2P+Q1f93zP9CuP+14/+c2f+G0v+Bz/9tyP/1WKYZAAAAOnRSTlMDfbc+73YPFAda0EGETjWtajgKmCPHnhvf9o8nEdOkeS755t0IcF5wS1bmvKvwymU5GiNkmkUt7qZk/H6l6gAABbhJREFUeNrkmGlT2kAYgF/IkoKRK+US5BKUSx3R2iMLQhU82v//f+pkl0h4ictmlzFTn0+Ow4Rn3jvA58YsZAwjUzAhItQMTg0iQcvwaEEEcOMToRiZho+Pr6OCX6gAH02GFY9ts1LKwEdjuNgANvsLJPn/hSKXssgVdeTaPnKDMXqrI3rLNXrnx2ekbOWq8WK9QtptUqkX49WcVYY9cDxoNgfHotGbiBNnCySeyOj2aR6+0nzHyE5lfTJIKpuyQR+DQ5cBBGCViCOElCzQRZMJNbcHJ1dxdqSSs/cuZCZOHAlOEuZeU5ZMbOTq6CAbS/36+WNC6eTpfrpYzh7vNjKXSO6vqK26T2YUy/Mv6/aG1GO6nPuk6tae2r7ccN5oZ9O++ujedOgaD7N1p8ZeZlN6LVvFHC6Nbu9iXWny8riWtzToJlld0+nDVsbn1Mfz3PGoJkErhaKzYmRAILcdv9L0TalYAI3kidfHqfeL75z6Wfz20pYHbfSPvMibIKBH/Uz+el3ZB02ceZM3D2KuhtTP1AvSGWjh1OFkTdiF685mkGYO51RLfKSfNr6kG/zRGKP+qgLSEnMVGT2s5qRyHRm8nokBoGI05UZHhuL8IbzbWyDFuLNpdM9LmxSU5nORP6UFklwPkRGPUVFlZlfDx/mKBmWtqrBPHUao1dhDRg/ocZKUidL0OKcB3U/KEI4Gn4dhj6oOMuITsgGhsPi+MCEkt0howlvNCtVh/F5F+0slaVN+1YbptIRyT8D4Ahnx3Z8AaUzCJqIJCvSCkkbMsAFKgQpdXNeLkCGyT9i9CmrcUMScRd4GOXKOiwFqdIdBdZ0DOSps74AqvaAQVULNoD6o0sWN9hxmFpV4gNT5RhHsDbIkVdJEkGeVrU9fWOfLlHWKvb+boAHc+ZM76YmS5VtVB02KmEk/nvC7RZnTCslOAg4jAjuTYXeiDap8dV6ZUQTLWUZybYw0+LjgEM0l10fc/XxM3SdIaOn+Py5ZQnlNPnGKmMoVUZmVUFKPz8GXi6AiKkvtjQNdPnAZNKwtqU2f1eSzdXvMpDZBNbima7FYTc5n+2hcSp3H8cDJbrUdp52S9IEBFlpItVkx8DY7QD/yCHyC9utU6ppg7z+tgHmAjEQ+8B0L3bO3IalrsQCYkYOMxD5wjYWehFcjjsMXwLQIMhL7wDEWmkhNxrb76eTWtbsySu3uA12KYQeXghA2EvqoCuGUyRlhH8WU4aKWNMI+akWN217WCPsotT0ejGIjoY/SYMSrQ2wk9FFaHXi5io2EPkrLFZ8fYiOhj9L5gQ80sZHQR+lAwyes2EjkA/+6uZreBmEYCoSEIMRHJBQOSL11h10q7bDL/v//2oQnxPAkl5rIbt+p6aVPdULs52dYKSxO8mlGBJ8PVpKPyyCa0Rvig1Q0ThmEC0W6NYz5YHGYLhT5pXRXYj4Y70QpfabYEEqaz+cXV2zAcgzNCPjw5Ri+YBVKxIclWPElvVAiPixJjy96dj/pU1ExRM/TZWHfzQ/Jws8tnOtrLahrvqhrT+lr4KlrceprAqtrk+szEuizWqgzo+iz6+gzNKmzfCUwxYU7Y2Ns7PtojddhGzSx+EU0GoyVt2KDm7z1FPggRmLmXFPsYGTtyz7uCUWPOJ9h8DbZoT/o0lRVc4HPRtQCb4HPEgsHjKzokABErIFFAzETHaPoFw4VLKpl0cNCYNCEICQwikOETGBYidjUqce5XKgHa4c6uAPHPt3Am2vzFa078GBMNBI423wDO9NXR9qhyZDvEKjLNe1Y6ZwjzET6kXTw1llMyDoiQUuJNge0k/fTuiBS2IRwwOA6wnK8wtplUghAYFzTiXVfC6GGEO1DWGdSGJbfnzbHY/liyKQAZ2yzYz2cs+xevDwhdSFTt6nVHXt1D0bi6jgVrMtVAET6IQAiQZMCTmEVvOHmT5Kv4w03axmkg85/+Ab85o9pzlvKbwAAAABJRU5ErkJggg==',
69 | danger: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAaVBMVEX//Pv/VT7/Sy7/SzH/UTX/TTD/TTH/aVH/Sy7/Sy7/UDT/Vz3/WUL/TjL/Uzj/X0j/Sy7/UzX/VDj/TTD/TTL/UTX/Sy7/Sy7/TC//TDD/Sy//TTD/Sy7/TTH/Sy7/TTD/Sy7/TDD/Sy7/AsPYAAAAInRSTlMDIbd9P4R2DvXtTiUcay8Wxjw3jlhH5tOvnt+ltGTMXrybWTaphwAABO1JREFUeNrkl9mSmzAQRS9YFrvYwdvYE/7/I5OyBIPNdJlGuIYk58nlhTruvuoG/N94UZHnReRhI0TCEGETKDGgsAHu9dlQjTzxwM/nKBJiWyUqTHhMlAr8NPndAwDuL3Iw+feFNteyzYV6c8d+c4Nxe6tje8vV4vajTna7pMZWiOT+jtxIZaP9wEujWCTlJWtPge8Hpza7lImIsTbyS0gCNEq6QfcNgSsVVqTej6ipdFYHLUMQHCoPK5GMhRJ8hzgONjTBUWAVdmOh3XfGp24mp+T9Qp5sOgaN9N7bMvnUK/963lciz1UUqbwOk/LS+k+dk28MtWgfZD5lAYMXOz1RWGYPUq1407FPz2ObQwjDWMkQfVzGTuf0HYMxHHXrmqSY4DljlGxHfQvXXx1lN5BR0yl1Hrhdu4ESY+yXq5N1PZ8CJKZvA9XXzzIHK1IM7WoqTKGL5CTN0LYCqxH6fZRLDy/wnozUr+HHIVbi1l/yVGAGzhNh0xvdsAqyMxxSzCJ+LpLbGeQq9en/nwTANTLs+xrf1sgPkQCW0QdxFT65uVKQAzZGYWCMcljhmOs0CrAzqk20Awc2ZOYqClyciZH5bxksKOk6841C33qLhDZJ9Bwq2YuDnQZW0yOdGO1NAFIs42zmIRYST4zMhDxjEcLsixQG+6Ypc9QEltDqABVYTEoFu7VYYSUscCb8WhxLTye68UBg1bTAW1qgCprVcp0sLZH+J5+ww3MmZLryYJIQx8G+RFV3JwGPE7V37Et01dNk0QyqYc1U6Lak+Ef9PAh70qmRHnDHBWc+AU3tZhIkMnNrskSSf/J18PwUtE/3BxcEru43EWvlsyfK4eVWdbveiP6QjPWFvbR1x8LXt5Iu7dNlZM8+dM8wG6U7NudhzSV9OkmOokj3TGEucsaUdnsj+gP6nGXM9eGa7zOMiLeJEJX6K8wIFWAZ0W9OhUJeiOI+QiwjWtKhQhSz9sYVPCO6jTE1rAVr05/BM6JjlVKTKGE9Hu7BMqJ96FSXmIfWr8AyInwIId2EC+uBPgfPiPShj1nGev5R4Bl9+cyoUK2fhlh3iw4YRoQPWaFc3zWy5mKKBUYu5gkp1mTUUwvzcSkfejLq2fu3Cv3u5oxWHQZhMCwqClUplV5Uxt7/NQ/oGJk9QqCV/PS7WnexhRo1Jn+EGzI4p4ab9nALI9zWAbe5woUfcAEaXAgLF+TjHYPgDopwR2m4ZANeOgYuYQWX0oNLeuKlheES53ilBbjiC155Cq6AB1fivKMIHIdF4GeUyeGEBHhSCzgxCp5c54qgKQwFTc+SfN0visuKh3XlOIqzILLBregPZUMQVr414T1Repr49lCLLopzw1Vx7qY7NmH5ctEd5WzzdYE3f55aXXnZdbWv9pnMNQEJvGv2+PqDzSKnKPwmgXhLk0ChL8V2YybRRnFUG9aPC9QHEgEJNJowDJrfisMfMoFmJYZTz2vn8nlPzqU9e+60n9rw5hfzZfG8hXFmS2BwhuACa+uY2DSZTUdmbK4T20qDOREY4ce0xlvvzAnnhwHafBbTWKJS8fswCmHn44knE//2SorceU0gfi3CToaIDOGupEj1/yOZHvWLpKRoPqMIzacUk+cbBDdkcE4NN+3hFsbR1iHEeHOVYRx+iJJNh/gdSb8hLMI9LD9BPsANSfQYhGHOf/wB12pMVIkX6gIAAAAASUVORK5CYII=',
70 | del:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAdVBMVEX///8jq/8hq/8orv8krP9lyv8nrv/J6v9Eu/82tf8iq/8hrP8jrf8qr/8wrv8lrv9Cvf8irP8hrP/J6v8qr/8ts/8irP/U8/8irP8krf8krP8jrP/K6v/L7f/K7P/R7v/O7P8hq//K6/+Y2P9Ku/+65P9yyv8mVjYSAAAAIXRSTlMDfbc/dwhNhA4c8uOgNCReE6/MeUIo2RDChmtlV27ULEQWexQXAAADBElEQVR42u2c63KqMBCA1yahQe43rVbbEy99/0c8nYTDKJFaSA7Z2nz/kBn9JrthF2YRfjc8TQhJUg5ISElLCihISEcCCJDrg2iNOLnCfR6lhOBaIpVBDWMNkiwiEgbAiARG8vhC6EKGLqnRbXt0F0Z8pQNfccXXfvxG+KZciiuW5YaDdda7qtqt4S51JG4Q1dZ9qudPqrtGtRjAttHuWbK7F69IDBBZjlqlhCr4mo0YZONEqBSDlE5CpvbX8XDFUe01J0ktJIceQgIS29sej5DCC/1YoTwrVkthyHJVZDnYgNFOxliKMjAmLIVFytDYJxJWiQyNWCksU5pFjQrrUKP91ebzS2Ae++ClzWyTvZaZNxN6u5LBdAq1PmAJtUYFTGclvyEASwTy61YwHZVCIVgiNO6VhMR29XskIXQhQ5fU6LY9ugsjutKBrrjiaz/QNWj4Wlh8Tb68DRJWyHLXNah/8+i8KHohL+SFvJAXcikUREJEAbToZ2YXimR3Ay36mVmF9I/0M17IC3khL+SFvJAX8kJeyAt5IS/khbyQF/JCXuixhdA9sEL3SA/dQ8+fKLTGJvSOTWhvIMQIjYsipoRZFHqbLkTip5aYWBPaHyYLvT5d8GpJ6M9BExrvo4ysTFrtL3zO4yaryFMPYjpptX7fv+lvMqy+m89xXyhmtyetToeJnEZNVpHWos7zunUjA5NWH9N8PsZNVlHlw+ETrozo0KTV6Xgea3M+nkZOVimHWh3Uyk63nnGyqpAOrX4uD4r/MGlVMqtCEEbmk1VGIdONSuPJKtOk1iet7E9W8STbUrrNEj5i22svnFh7wYQHi46A37kwzkBDFxfQ5ovSMQvJokcyWFxnoVloNJ2RAx9OdSHKBxq0OQj+JXPIWNgdDLSwM8DbNUnVYUrVMQc3dBmdQkva5bUjMhWifggzcMVW/n4IHaH8YAuuUDnDoIOpnILv8vBC6EKGLqnRbXt0F8ah0mGI/eJqhv32wyV6g+b8H260FtY5V00+jn+46W6DcOjc4i+czOX30wZifQAAAABJRU5ErkJggg=='
71 | }
72 | },
73 |
74 | ready(){
75 | this.setData({
76 | 'state.loading': false
77 | });
78 | },
79 |
80 | /**
81 | * 组件的方法列表
82 | */
83 | methods: {
84 | //取消
85 | inCancel() {
86 | const me = this;
87 |
88 | //异步loading时无法取消
89 | if (!me.data.isloading){
90 | me.triggerEvent('incancel');
91 | }
92 | },
93 |
94 | //确定
95 | inSuccess() {
96 | const me = this;
97 |
98 | //需等待loading完成 才能再次操作
99 | if (!me.data.isloading) {
100 | me.triggerEvent('insuccess');
101 | }
102 | }
103 | }
104 | })
105 |
--------------------------------------------------------------------------------
/component/modal/modal.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/modal/modal.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | {{onemsg}}
11 | {{twomsg}}
12 |
13 |
14 |
15 | {{cancelTxt}}
16 |
17 |
18 | {{successTxt}}
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/component/modal/modal.wxss:
--------------------------------------------------------------------------------
1 | /* component/modal/modal.wxss */
2 | .g-loading{
3 | display: inline-block;
4 | vertical-align: middle;
5 | margin-right: 8rpx;
6 | }
7 | .g-loading::after{
8 | content: '';
9 | display: block;
10 | width: 28rpx;
11 | height: 28rpx;
12 | position: relative;
13 | z-index: 2;
14 | margin:0 auto;
15 | text-indent: -9999px;
16 | border-radius: 50%;
17 | border-top: 2rpx solid rgba(44, 169, 225, 1);
18 | border-right: 2rpx solid rgba(0, 0, 0, .1);
19 | border-bottom: 2rpx solid rgba(0, 0, 0, .1);
20 | border-left: 2rpx solid rgba(0, 0, 0, .1);
21 | animation: loading 2s infinite linear;
22 | }
23 | @keyframes loading {
24 | 0% {
25 | transform: rotate(0deg);
26 | }
27 | 100% {
28 | transform: rotate(360deg);
29 | }
30 | }
31 | .flex-bar{
32 | display: flex;
33 | }
34 | .flex1{
35 | flex: 1;
36 | overflow: hidden;
37 | }
38 | .color-gray{
39 | color: rgba(153, 153, 153, 1);
40 | }
41 | .color-blue{
42 | color: rgb(44, 169, 225);
43 | }
44 | .border-top,
45 | .border-right{
46 | position: relative;
47 | }
48 | .border-right::after{
49 | content: '';
50 | position: absolute;
51 | top: 0;
52 | right: 0;
53 | width: 1px;
54 | height: 100%;
55 | border-right: 1px solid rgba(0,0,0, .07);
56 | transform: scaleX(0.5);
57 | }
58 | .border-top::after{
59 | content: '';
60 | position: absolute;
61 | top:0;
62 | left: 0;
63 | height: 1px;
64 | width: 100%;
65 | border-bottom: 1px solid rgba(0,0,0, .07);
66 | display: block;
67 | transform-origin: 50% 100%;
68 | transform: scaleY(0.5);
69 | }
70 | .g-btn{
71 | display: block;
72 | height: 88rpx;
73 | line-height: 88rpx;
74 | text-align: center;
75 | }
76 | .g-btn:active{
77 | opacity: .7;
78 | }
79 | .g-mask,
80 | .g-fixed-bar{
81 | position: fixed;
82 | top: 0;
83 | left: 0;
84 | width: 100%;
85 | height: 100%;
86 | }
87 | .g-mask{
88 | z-index: 49;
89 | background-color: rgba(47, 64, 80, .28);
90 | }
91 | .g-fixed-bar{
92 | z-index: 50;
93 | display:box;
94 | display:-webkit-box;
95 | -webkit-box-pack:center;
96 | box-pack:center;
97 | -webkit-box-orient:vertical;
98 | box-orient:vertical;
99 | -webkit-box-align:center;
100 | box-align:center;
101 | }
102 | .g-modal-bar{
103 | width: 560rpx;
104 | font-size: 28rpx;
105 | border-radius: 12rpx;
106 | background-color: #fff;
107 | box-shadow: 0 4rpx 64rpx rgba(47, 64, 80, .12);
108 | }
109 | .g-modal-cen{
110 | padding:30rpx;
111 | text-align: center;
112 | }
113 | .g-onemsg{
114 | padding-top: 20rpx;
115 | font-size: 30rpx;
116 | font-weight: bold;
117 | }
118 | .g-twomsg{
119 | padding-top: 20rpx;
120 | font-size: 28rpx;
121 | }
122 | .g-mapping{
123 | width: 144rpx;
124 | height: 144rpx;
125 | margin: 32rpx 0 16rpx;
126 | border-radius: 12rpx;
127 | }
128 | .animate{
129 | animation-duration: .3s;
130 | }
131 | .zoomIn {
132 | animation-name: zoomIn;
133 | }
134 | @keyframes zoomIn{
135 | 0%{
136 | opacity: 0;
137 | transform: scale(1.2);
138 | }
139 | 100%{
140 | opacity: 1;
141 | transform: scale(1);
142 | }
143 | }
--------------------------------------------------------------------------------
/component/page/page.js:
--------------------------------------------------------------------------------
1 | // component/page/page.js
2 | Component({
3 | externalClasses: ['g-class', 'top-class', 'bom-class'],
4 |
5 | options: {
6 | multipleSlots: true //多slot支持
7 | },
8 |
9 | /**
10 | * 组件的属性列表
11 | */
12 | properties: {
13 | //适配iphoneX(只针对con、bom节点生效,TabBar界面无需适配con、bom节点)
14 | autoX: {
15 | type: Boolean,
16 | value: true
17 | },
18 |
19 | top: {
20 | type: Boolean,
21 | value: false
22 | },
23 | bom: {
24 | type: Boolean,
25 | value: false
26 | }
27 | },
28 |
29 | /**
30 | * 组件的初始数据
31 | */
32 | data: {
33 | isIPX: wx.getSystemInfoSync().model.indexOf('iPhone X') == -1 ? '' : 'isIPX',
34 | },
35 |
36 | ready(){
37 | const SysModel = wx.getSystemInfoSync().model;
38 | if(SysModel.includes('iPhone')){
39 | if(SysModel.match(/\s../) > 10){
40 | this.setData({
41 | 'isIPX': 'isIPX'
42 | })
43 | }
44 | }
45 | },
46 |
47 | /**
48 | * 组件的方法列表
49 | */
50 | methods: {
51 |
52 | }
53 | })
54 |
--------------------------------------------------------------------------------
/component/page/page.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/page/page.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/component/page/page.wxss:
--------------------------------------------------------------------------------
1 | /* component/page/page.wxss */
2 | .page{
3 | height: 100vh;
4 | display: flex;
5 | flex-flow: row;
6 | flex-direction: column;
7 | }
8 | .content{
9 | position: relative;
10 | flex: 1;
11 | z-index: 3;
12 | overflow-y: auto;
13 | -webkit-overflow-scrolling: touch;
14 | }
15 | .bom-bar{
16 | position: relative;
17 | z-index: 3;
18 | background-color: #fff;
19 | box-shadow: 0 -18rpx 48rpx rgba(224,227,238, .8);
20 | }
21 | .page.isIPX .content.auto:last-child,
22 | .page.isIPX .content + .bom-bar.auto{
23 | padding-bottom: 34px;
24 | }
--------------------------------------------------------------------------------
/component/radio-group/radio-group.js:
--------------------------------------------------------------------------------
1 | // component/radio-group/radio-group.js
2 | Component({
3 | externalClasses: ['g-class'],
4 | relations: {
5 | '../radio/radio': {
6 | type: 'child',
7 | linked() {
8 | this.activeChange();
9 | },
10 | linkChanged() {
11 | this.activeChange();
12 | },
13 | unlinked() {
14 | this.activeChange();
15 | }
16 | }
17 | },
18 | /**
19 | * 组件的属性列表
20 | */
21 | properties: {
22 | active: {
23 | type: [String, Number],
24 | value: '',
25 | observer: 'activeChange'
26 | },
27 | },
28 |
29 | /**
30 | * 组件的方法列表
31 | */
32 | methods: {
33 |
34 | activeChange(val = this.data.active) {
35 | let items = this.getRelationNodes('../radio/radio');
36 | if (items.length > 0) {
37 | items.forEach(item => {
38 | item.activeChange(val === item.data.key);
39 | });
40 | }
41 | },
42 |
43 | emitEvent(item) {
44 | this.triggerEvent('inchange', item);
45 | }
46 | }
47 | })
48 |
--------------------------------------------------------------------------------
/component/radio-group/radio-group.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/radio-group/radio-group.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/component/radio-group/radio-group.wxss:
--------------------------------------------------------------------------------
1 | /* component/radio-group/radio-group.wxss */
--------------------------------------------------------------------------------
/component/radio/radio.js:
--------------------------------------------------------------------------------
1 | // component/radio/radio.js
2 | Component({
3 | externalClasses: ['g-class'],
4 | relations: {
5 | '../radio-group/radio-group': {
6 | type: 'parent'
7 | }
8 | },
9 | /**
10 | * 组件的属性列表
11 | */
12 | properties: {
13 |
14 | //可选:default、list
15 | mode:{
16 | type: String,
17 | value: 'list'
18 | },
19 |
20 | //索引值
21 | index: {
22 | type: Number,
23 | value: 0
24 | },
25 |
26 | key:{
27 | type: [Number, String],
28 | value: ''
29 | },
30 |
31 | value:{
32 | type: String,
33 | value:''
34 | },
35 |
36 | //选中的颜色
37 | color: {
38 | type: String,
39 | value: '#1d1b1b'
40 | },
41 |
42 | //是否选中
43 | checked:{
44 | type: Boolean,
45 | value: false
46 | },
47 |
48 | //是否禁用
49 | disabled: {
50 | type: Boolean,
51 | value: false
52 | },
53 |
54 | //可选:left、right
55 | align:{
56 | type: String,
57 | value: 'left',
58 | }
59 | },
60 |
61 | /**
62 | * 组件的初始数据
63 | */
64 | data: {
65 |
66 | },
67 |
68 | /**
69 | * 组件的方法列表
70 | */
71 | methods: {
72 | activeChange(active) {
73 | this.setData({ checked: active });
74 | },
75 |
76 | inChange(e){
77 | const me = this;
78 | if (me.data.disabled) return;
79 | const { key, checked, index } = me.data;
80 | const item = { key, checked, index };
81 | const parent = me.getRelationNodes('../radio-group/radio-group')[0];
82 | parent ? parent.emitEvent(item) : me.triggerEvent('inchange', item);
83 | }
84 | }
85 | })
86 |
--------------------------------------------------------------------------------
/component/radio/radio.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {
4 | "g-list": "../list/list"
5 | }
6 | }
--------------------------------------------------------------------------------
/component/radio/radio.wxml:
--------------------------------------------------------------------------------
1 |
2 |
20 |
--------------------------------------------------------------------------------
/component/radio/radio.wxss:
--------------------------------------------------------------------------------
1 | /* component/radio/radio.wxss */
2 | .color-gray{
3 | color: #999;
4 | }
5 | radio{
6 | width: 48rpx;
7 | height: 48rpx;
8 | }
9 | .g-value{
10 | position: relative;
11 | top: 2rpx;
12 | }
13 | .g-left radio{
14 | margin-right: 16rpx;
15 | }
16 | .g-right radio{
17 | margin-left: 16rpx;
18 | }
19 | .radio-main{
20 | display: flex;
21 | }
22 | .g-right .radio-main{
23 | flex-direction: row-reverse;
24 | }
--------------------------------------------------------------------------------
/component/region/region.js:
--------------------------------------------------------------------------------
1 | // component/gui/region/region.js
2 | const Area = require('./area.min.js');
3 |
4 | Component({
5 | externalClasses: ['g-class'],
6 | /**
7 | * 组件的属性列表
8 | */
9 | properties: {
10 | state:{
11 | type: Boolean,
12 | value: false
13 | },
14 | //联级,1可选省, 2可选省、市, 3可选省、市,区
15 | level: {
16 | type: Number,
17 | value: 3
18 | },
19 |
20 | //初始化值,
21 | value:{
22 | type: Object,
23 | value: [] //可以是省市区对应的ID || 名称
24 | }
25 | },
26 |
27 | /**
28 | * 组件的初始数据
29 | */
30 | data: {
31 | isscroll1: true,
32 | isscroll2: true,
33 | isscroll3: true,
34 | actData:[], //当前活跃索引值
35 | params: {
36 | province: {},
37 | city: {},
38 | area: {}
39 | },
40 | jsonData: Area,
41 | },
42 |
43 | ready(){
44 | const me = this;
45 | const { level, value, actData, jsonData } = me.data;
46 | if (value == null) return;
47 | if (value.length){
48 | //初始化actData
49 | for (let x in jsonData) {
50 | if (jsonData[x].id == value[0] || jsonData[x].value == value[0]) {
51 | actData[0] = x;
52 | me.setData({
53 | 'actData': actData,
54 | })
55 | me.inSetProvince();
56 |
57 | if (level > 1) {
58 | for (let j in jsonData[x].childs) {
59 | if (jsonData[x].childs[j].id == value[1] || jsonData[x].childs[j].value == value[1]) {
60 | actData[1] = j;
61 | me.setData({
62 | 'actData': actData
63 | })
64 | me.inSetCity();
65 | /*if (level == 2){
66 | me.inEnter();
67 | }*/
68 | //三级
69 | if (level > 2){
70 | for (let k in jsonData[x].childs[j].childs) {
71 | if (jsonData[x].childs[j].childs[k].id == value[2] || jsonData[x].childs[j].childs[k].value == value[2]) {
72 | actData[2] = k;
73 | me.setData({
74 | 'actData': actData
75 | })
76 | me.inSetArea();
77 | //me.inEnter();
78 | return;
79 | }
80 | }
81 | }
82 |
83 | }
84 | }
85 | }
86 | }
87 | }
88 | }
89 | },
90 |
91 | /**
92 | * 组件的方法列表
93 | */
94 | methods: {
95 | //设置省
96 | inSetProvince(){
97 | const me = this;
98 | const { jsonData, actData } = me.data;
99 | me.setData({
100 | 'params.province': {
101 | id: jsonData[actData[0]].id,
102 | value: jsonData[actData[0]].value
103 | }
104 | })
105 | },
106 |
107 | //设置城市
108 | inSetCity() {
109 | const me = this;
110 | const { jsonData, actData } = me.data;
111 | me.setData({
112 | 'params.city': {
113 | id: jsonData[actData[0]].childs[actData[1]].id,
114 | value: jsonData[actData[0]].childs[actData[1]].value
115 | }
116 | })
117 | },
118 |
119 | //设置区
120 | inSetArea() {
121 | const me = this;
122 | const { jsonData, actData } = me.data;
123 | me.setData({
124 | 'params.area': {
125 | id: jsonData[actData[0]].childs[actData[1]].childs[actData[2]].id,
126 | value: jsonData[actData[0]].childs[actData[1]].childs[actData[2]].value,
127 | }
128 | })
129 | },
130 |
131 | //点选
132 | inChange(e){
133 | const me = this;
134 | const getData = e.currentTarget.dataset;
135 | let setAct;
136 | switch (Number(getData.type)){
137 | //省
138 | case 1:
139 | setAct = 'actData[0]';
140 | me.setData({
141 | 'actData[0]': getData.index,
142 | 'actData[1]': 0,
143 | 'isscroll1': false,
144 | 'isscroll2': true
145 | });
146 | me.inSetProvince();
147 | me.inSetCity();
148 |
149 | if (me.data.level == 3) {
150 | me.setData({
151 | 'actData[2]': 0,
152 | 'isscroll3': true
153 | });
154 | me.inSetArea();
155 | }
156 | break;
157 |
158 | //市
159 | case 2:
160 | //setAct = 'actData[1]';
161 | me.setData({
162 | 'actData[1]': getData.index,
163 | 'isscroll2': false,
164 | });
165 | if (me.data.level == 3) {
166 | me.setData({
167 | 'actData[2]': 0,
168 | 'isscroll3': true,
169 | });
170 | }
171 | me.inSetCity();
172 | break;
173 |
174 | //区
175 | case 3:
176 | //setAct = 'actData[2]';
177 | me.setData({
178 | 'actData[2]': getData.index,
179 | 'isscroll3': false,
180 | })
181 | me.inSetArea();
182 | break;
183 | }
184 | },
185 |
186 | //确定
187 | inEnter(){
188 | const me = this;
189 | me.triggerEvent('enter', me.data.params);
190 | },
191 |
192 | //取消
193 | inCancel(){
194 | this.triggerEvent('cancel', {});
195 | }
196 | }
197 | })
198 |
--------------------------------------------------------------------------------
/component/region/region.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {
4 | "g-drawer": "/component/drawer/drawer"
5 | }
6 | }
--------------------------------------------------------------------------------
/component/region/region.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {{params.province.value }}
7 | {{ params.city.value }}
8 | {{ params.area.value }}
9 |
10 | 确 定
11 |
12 |
13 | 请选择:
14 |
15 |
16 |
17 |
18 | {{item.value}}
19 |
20 |
21 |
22 |
23 | {{item.value}}
24 |
25 |
26 |
27 |
28 | {{item.value}}
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/component/region/region.wxss:
--------------------------------------------------------------------------------
1 | /* component/gui/region/region.wxss */
2 | .ml30{
3 | margin-left: 30rpx;
4 | }
5 | .color-gray{
6 | color: #737b82;
7 | }
8 | .color-blue{
9 | color: #2ca9e1;
10 | }
11 | .flex-bar{
12 | display: flex;
13 | flex-flow: row;
14 | }
15 | .g-region-box scroll-view,
16 | .flex1{
17 | flex: 1;
18 | overflow: hidden;
19 | }
20 | scroll-view{
21 | height: 100%;
22 | }
23 | .item-scroll:nth-child(even){
24 | background-color: #f8f8f8;
25 | }
26 | .g-region{
27 | height: 100%;
28 | }
29 | .g-region-title{
30 | position: relative;
31 | height: 88rpx;
32 | line-height: 88rpx;
33 | }
34 | .item text::after,
35 | .g-region-title::after{
36 | content: '';
37 | position: absolute;
38 | left: 0;
39 | height: 1px;
40 | width: 100%;
41 | border-bottom: 1px solid rgba(0,0,0, .1);
42 | display: block;
43 | -webkit-transform: scaleY(0.5);
44 | transform: scaleY(0.5);
45 | bottom: -1px;
46 | }
47 | .g-region-title > view{
48 | padding: 0 30rpx;
49 | }
50 | .g-region-box{
51 | height: calc(100% - 88rpx);
52 | }
53 | .item{
54 | position: relative;
55 | height: 80rpx;
56 | line-height: 80rpx;
57 | padding:0 20rpx;
58 | color: #666;
59 | font-size: 24rpx;
60 | }
61 | .enter-btn:active,
62 | .item:active{
63 | opacity: .7;
64 | }
65 | .item text{
66 | display: block;
67 | max-width: calc(100% - 20rpx);
68 | position: relative;
69 | overflow: hidden;
70 | white-space: nowrap;
71 | text-overflow: ellipsis;
72 | }
73 | .item.active{
74 | color: #2ca9e1;
75 | }
76 | .item.active::after,
77 | .item.active::before{
78 | content: '';
79 | position: absolute;
80 | display: block;
81 | background-color: #2ca9e1;
82 | }
83 | .item.active::after{
84 | width: 24rpx;
85 | height: 4rpx;
86 | right: 26rpx;
87 | bottom: 36rpx;
88 | transform: rotate(-45deg);
89 | }
90 | .item.active::before{
91 | height: 12rpx;
92 | width: 4rpx;
93 | right: 48rpx;
94 | bottom: 28rpx;
95 | transform: rotate(-45deg);
96 | }
--------------------------------------------------------------------------------
/component/search/search.js:
--------------------------------------------------------------------------------
1 | // component/search/search.js
2 | Component({
3 | externalClasses: ['g-class'],
4 | /**
5 | * 组件的属性列表
6 | */
7 | properties: {
8 | keyword: {
9 | type: String,
10 | value: ''
11 | },
12 | maxlen:{
13 | type: String,
14 | value: 10
15 | },
16 | placeholder: {
17 | type: String,
18 | value: '请输入关键词'
19 | }
20 | },
21 |
22 | /**
23 | * 组件的初始数据
24 | */
25 | data: {
26 |
27 | },
28 |
29 | /**
30 | * 组件的方法列表
31 | */
32 | methods: {
33 | inChange(e) {
34 | this.setData({
35 | 'keyword': e.detail.value
36 | });
37 | this.triggerEvent('inchange', { value: e.detail.value });
38 | },
39 |
40 | inClear(e) {
41 | this.setData({
42 | 'keyword': ''
43 | });
44 | this.triggerEvent('inclear');
45 | },
46 |
47 | inSubmit(e) {
48 | const me = this;
49 | const { maxlen } = me.data;
50 | if (e.detail.value.length) {
51 | if (e.detail.value.length <= maxlen) {
52 | this.setData({
53 | 'keyword': e.detail.value
54 | });
55 | me.triggerEvent('insubmit', { 'value': e.detail.value, });
56 | }
57 | else {
58 | wx.showToast({
59 | title: '关键词不能超过' + maxlen +'个字符',
60 | icon: 'none'
61 | })
62 | }
63 | }
64 | }
65 | }
66 | })
67 |
--------------------------------------------------------------------------------
/component/search/search.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/search/search.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 取 消
6 |
7 |
--------------------------------------------------------------------------------
/component/search/search.wxss:
--------------------------------------------------------------------------------
1 | /* component/search/search.wxss */
2 | .search-bar{
3 | position: relative;
4 | background-color: #fff;
5 | box-shadow: 0 6rpx 10rpx rgba(0,0,0, .03);
6 | }
7 | .search-icon{
8 | position: absolute;
9 | left: 30rpx;
10 | top: 50%;
11 | transform: translate(0, -50%);
12 | width: 32rpx;
13 | height: 32rpx;
14 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAhFBMVEUAAABmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaONWvaAAAAK3RSTlMAFNTkzLKY970/KQWsnnnw24huYFhORQzGk40z67ejVDkjH4JybH/CG2YvDd4njgAAAn5JREFUWMO1VumSgjAMLrdyKjcqCt4u7/9+O22WoZVWmt3Z7wczIc1HriaQf8K5uDaO6Vn18ZKtscZG7poDDy+8fembrx1vkMCMAz3Xm0EFO9ewv1q8iVWbCS+H3VLwzjDike4NQlH162ZivX6098fUtdde1JS7wwCIPmVvAKxOEmXfjJlQ2t9/DmQKfRf+1FShz0C9JWqkkw9K/wvyCfuN8iNnSPSTLMBlx9K5omUKnywCEpHLo4uJBpirZvXWQCy2Ru+qyL51oe8cogUot3UWOpA1vO6tN1i/7mapdYkuXqyd9tOLivZ54hNtrN6ycKLyneijYDdmkiPIAAKsaMYoBR7NKsYekpYLERxRBKUwGXZUyggKNO3mKBwpwR5H4NC6CffIwBG4vI1NBYJDzHttQRFQyPgy0CrWSIKS78UEMooBlP7GtdUBSXCjBOP0f1AhwBFsqU3HT7kzjiDibVxgQ6Hlvb7D0sQgEPaLT6UW3wbTejHphKoQ9pC2UpzJBcLeSGjlA3HSR9guiN4nVKnvwOx8rL1XppBroSo2Zih9JfMFnbOF2WvZwwSzDEldas0Mwk0U0Q2wK5bRDfKEXQfYmItg5w6SkkXAsLzUlHvQZqooWBoD6n85D/KwVzcQeKl21QZdo1j06Qb0Jnu6HzxMLk/JGK1BaWU+MESKX1GgaGM+kqrYgXcQoQ+CdB/nlB1gOW6clad0e1xNoTdsbPTAEAayRF28QYlVQQBniMeppHflqDCv8+nQ8wGMhnxvNZuZtRe+RE8hrsdT9Tu64zkObgGfmjPY6itc9V3xitN87cv9NFroCp/8FpUjdhQeATCQPzCEKA/kze/45K/4BpRriq+1rGymAAAAAElFTkSuQmCC);
15 | background-size: cover;
16 | }
17 | .input-txt{
18 | height: 88rpx;
19 | line-height: 88rpx;
20 | border-radius: 40px;
21 | padding: 0 130rpx 0 80rpx;
22 | }
23 | .g-cancel{
24 | color: #999;
25 | position: absolute;
26 | z-index: 2;
27 | line-height: 88rpx;
28 | width: 130rpx;
29 | text-align: center;
30 | top: 50%;
31 | right: 0;
32 | transform: translate(0, -50%);
33 | }
34 | .opacity:active{
35 | opacity: .7;
36 | }
--------------------------------------------------------------------------------
/component/size/size.js:
--------------------------------------------------------------------------------
1 | // component/size/size.js
2 | Component({
3 | externalClasses: ['g-class'],
4 | /**
5 | * 组件的属性列表
6 | */
7 | properties: {
8 | //字体大小可选:h1、h2、h3、h4、h5、h6
9 | size:{
10 | type:String,
11 | value: ''
12 | },
13 |
14 | //颜色
15 | color:{
16 | type: String,
17 | value: ''
18 | },
19 |
20 | //加粗
21 | strong:{
22 | type:Boolean,
23 | value:false
24 | },
25 |
26 | //对齐可选:tl、tc、tr
27 | align:{
28 | type: String,
29 | value: ''
30 | }
31 | },
32 |
33 | /**
34 | * 组件的方法列表
35 | */
36 | methods: {
37 |
38 | }
39 | })
40 |
--------------------------------------------------------------------------------
/component/size/size.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/size/size.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/component/size/size.wxss:
--------------------------------------------------------------------------------
1 | /* component/size/size.wxss */
2 | .strong{
3 | font-weight: bold;
4 | }
5 | .tl{
6 | text-align: left;
7 | }
8 | .tc{
9 | text-align: center;
10 | }
11 | .tr{
12 | text-align: right;
13 | }
14 | .h1{
15 | font-size: 40rpx;
16 | }
17 | .h2{
18 | font-size: 34rpx;
19 | }
20 | .h3{
21 | font-size: 30rpx;
22 | }
23 | .h4{
24 | font-size: 28rpx;
25 | }
26 | .h5{
27 | font-size: 26rpx;
28 | }
29 | .h6{
30 | font-size: 24rpx;
31 | }
--------------------------------------------------------------------------------
/component/swiper/swiper.js:
--------------------------------------------------------------------------------
1 | // component/swiper/swiper.js
2 | let sx, ex;
3 | Component({
4 |
5 | externalClasses: ['g-class'],
6 |
7 | /**
8 | * 组件的属性列表
9 | */
10 | properties: {
11 | slide: {
12 | type: [String, Number],
13 | value: 0
14 | },
15 | width: {
16 | type: [String, Number],
17 | value: 120
18 | },
19 | height: {
20 | type: [String, Number],
21 | value: 160
22 | },
23 | list: {
24 | type: Object,
25 | value: []
26 | }
27 | },
28 |
29 | /**
30 | * 组件的初始数据
31 | */
32 | data: {
33 | translateX: 0,
34 | animate: false,
35 | },
36 |
37 | ready() {
38 | this.inCalcTranslateX();
39 | },
40 |
41 | /**
42 | * 组件的方法列表
43 | */
44 | methods: {
45 | inCalcTranslateX() {
46 | const { slide, width } = this.data;
47 | this.setData({
48 | 'translateX': (width * -slide) - (width / 2)
49 | })
50 | },
51 |
52 | inTouchStart(e) {
53 | sx = e.touches[0].clientX;
54 | },
55 | inTouchMove(e) {
56 | const mx = e.touches[0].clientX;
57 | let { translateX } = this.data;
58 | translateX += mx - sx;
59 |
60 | sx = e.touches[0].clientX;
61 | this.setData({
62 | 'translateX': translateX
63 | });
64 | },
65 | inTouchEnd(e) {
66 | const me = this;
67 | const { width, translateX, list } = me.data;
68 | let idx = Math.ceil(translateX / width);
69 | me.inSetAnimate();
70 | if (idx > 0) {
71 | me.inCalcTranslateX();
72 | idx = 0;
73 | }
74 | else {
75 | let lastitem = list.length - 1;
76 | if (idx < - lastitem) {
77 | me.setData({
78 | 'translateX': -(width * lastitem) - (width / 2)
79 | })
80 | idx = lastitem;
81 | }
82 | else {
83 | me.setData({
84 | 'translateX': (width * idx) - (width / 2)
85 | })
86 | }
87 | }
88 | me.setData({
89 | 'slide': Math.abs(idx)
90 | })
91 | },
92 |
93 | //设置动画
94 | inSetAnimate() {
95 | const me = this;
96 | if (me.setTime) clearTimeout(me.setTime);
97 | me.setData({
98 | 'animate': true,
99 | })
100 | me.setTime = setTimeout(function () {
101 | me.inChange();
102 | me.setData({
103 | 'animate': false
104 | })
105 | }, 300)
106 | },
107 |
108 | //跳转指定slide
109 | inSetSlide(e) {
110 | const getData = e.currentTarget.dataset;
111 | this.setData({
112 | 'slide': getData.index
113 | });
114 | this.inSetAnimate();
115 | this.inCalcTranslateX();
116 | //this.inChange();
117 | },
118 |
119 | inChange() {
120 | const { slide, list } = this.data;
121 | this.triggerEvent('change', { index: slide, item: list[slide] });
122 | }
123 | }
124 | })
--------------------------------------------------------------------------------
/component/swiper/swiper.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/swiper/swiper.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/component/swiper/swiper.wxss:
--------------------------------------------------------------------------------
1 | /* component/swiper/swiper.wxss */
2 | image{
3 | width: 100%;
4 | height: 100%;
5 | }
6 | .swiper-bar{
7 | position: relative;
8 | height: 360rpx;
9 | overflow: hidden;
10 | }
11 | .poster-bg,
12 | .swiper-bar::after{
13 | position: absolute;
14 | width: 100%;
15 | height: 100%;
16 | top: 0;
17 | left: 0;
18 | }
19 | .poster-bg{
20 | filter: blur(20rpx);
21 | background-size: cover;
22 | background-position: center;
23 | transition: background .3s ease-in-out;
24 | }
25 | .swiper-bar::after{
26 | content: '';
27 | background-color: rgba(0,0,0, .6);
28 | }
29 | .swiper-box{
30 | position: absolute;
31 | z-index: 2;
32 | top: 50%;
33 | left: 50%;
34 | /*transition: transform .3s;*/
35 | }
36 | .animate{
37 | transition: transform .3s ease-in-out;
38 | }
39 | .swiper-item{
40 | display: inline-block;
41 | height: 100%;
42 | box-sizing: border-box;
43 | transform: scale(.76);
44 | transition: transform .3s ease-in-out;
45 | }
46 | .item-main{
47 | height: 100%;
48 | }
49 | .item-main image{
50 | border-radius: 10rpx;
51 | }
52 | .swiper-item.active{
53 | transform: scale(1);
54 | }
--------------------------------------------------------------------------------
/component/switch/switch.js:
--------------------------------------------------------------------------------
1 | // component/switch/switch.js
2 | Component({
3 | externalClasses: ['g-class'],
4 |
5 | /**
6 | * 组件的属性列表
7 | */
8 | properties: {
9 | value:{
10 | type:Boolean,
11 | value: true
12 | },
13 |
14 | msg:{
15 | type:String,
16 | value:''
17 | },
18 |
19 | disabled:{
20 | type:Boolean,
21 | vlaue: false
22 | }
23 | },
24 |
25 | /**
26 | * 组件的初始数据
27 | */
28 | data: {
29 |
30 | },
31 |
32 | /**
33 | * 组件的方法列表
34 | */
35 | methods: {
36 | inToggle(e){
37 | const me = this;
38 | const { disabled } = me.data;
39 | if (disabled ) return;
40 | me.setData({
41 | 'value': !me.data.value
42 | });
43 | me.triggerEvent('inchange', { value: me.data.value } );
44 | },
45 | }
46 | })
47 |
--------------------------------------------------------------------------------
/component/switch/switch.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/switch/switch.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/component/switch/switch.wxss:
--------------------------------------------------------------------------------
1 | /* component/switch/switch.wxss */
2 | .g-switch{
3 | position: relative;
4 | display: inline-block;
5 | vertical-align: top;
6 | text-align: left;
7 | width: 96rpx;
8 | height: 48rpx;
9 | }
10 | .g-state{
11 | position: relative;
12 | border-radius: 24rpx;
13 | background-color: #f9f9f9;
14 | box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
15 | }
16 | .g-state::after{
17 | content: attr(data-msg);
18 | position: absolute;
19 | top: 0;
20 | left: 0;
21 | width: 50%;
22 | text-align: center;
23 | display: inline-block;
24 | z-index: 2;
25 | font-size: 24rpx;
26 | color: #fff;
27 | line-height: 48rpx;
28 | padding-left: 2rpx;
29 | }
30 | .g-state::before{
31 | content: '';
32 | display: block;
33 | position: relative;
34 | z-index: 3;
35 | width: 48rpx;
36 | height: 48rpx;
37 | border-radius: 24rpx;
38 | background-color: #fff;
39 | box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
40 | transform: translate3d(0rpx,0,0);
41 | transition: all ease 0.2s;
42 | }
43 | .g-switch.g-checked .g-state{
44 | background: #2ca9e1;
45 | box-shadow: inset 0 0 2rpx rgba(0, 0, 0, 0.5), inset 0 0 80rpx #2ca9e1;
46 | -webkit-box-shadow: inset 0 0 2rpx rgba(0, 0, 0, 0.5), inset 0 0 80rpx #2ca9e1;
47 | }
48 | .g-switch.g-checked .g-state::before{
49 | transform: translate3d(100%,0,0);
50 | }
51 | .g-disabled .g-state::before{
52 | background-color: #eee;
53 | }
--------------------------------------------------------------------------------
/component/tab/tab.js:
--------------------------------------------------------------------------------
1 | // component/tab/tab.js
2 | Component({
3 |
4 | externalClasses: ['g-class', 'b-class'],
5 |
6 | relations: {
7 | '../tabs/tabs': {
8 | type: 'parent'
9 | }
10 | },
11 |
12 | /**
13 | * 组件的属性列表
14 | */
15 | properties: {
16 |
17 | key: {
18 | type: String,
19 | value: ''
20 | },
21 |
22 | index: {
23 | type: Number,
24 | value: ''
25 | },
26 |
27 | value:{
28 | type:String,
29 | value: ''
30 | },
31 |
32 | //是否选中
33 | checked: {
34 | type: Boolean,
35 | value: false
36 | },
37 | },
38 |
39 | data:{
40 | activeColor:''
41 | },
42 |
43 | /**
44 | * 组件的方法列表
45 | */
46 | methods: {
47 |
48 | activeChange(active) {
49 | this.setData({ 'checked': active });
50 | },
51 |
52 | activeColor(color){
53 | this.setData({ 'activeColor': color });
54 | },
55 |
56 | inTap(e){
57 | const parent = this.getRelationNodes('../tabs/tabs')[0];
58 | parent.emitEvent({ 'key': this.data.key, 'index': this.data.index });
59 | },
60 | }
61 | })
62 |
--------------------------------------------------------------------------------
/component/tab/tab.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/tab/tab.wxml:
--------------------------------------------------------------------------------
1 |
2 | {{value}}
3 |
4 |
--------------------------------------------------------------------------------
/component/tab/tab.wxss:
--------------------------------------------------------------------------------
1 | /* component/tab/tab.wxss */
2 | .g-tab-item{
3 | flex:1;
4 | position: relative;
5 | z-index: 2;
6 | overflow: hidden;
7 | padding:0 20rpx;
8 | }
9 | .g-tab-active{
10 | color: #2ca9e1;
11 | }
12 | .g-tab-active .g-border{
13 | content: '';
14 | display: block;
15 | position: absolute;
16 | bottom: 0;
17 | left: 20rpx;
18 | width: calc(100% - 40rpx);
19 | border-top: 4rpx solid #2ca9e1;
20 | }
--------------------------------------------------------------------------------
/component/tabs/tabs.js:
--------------------------------------------------------------------------------
1 | // component/tabs/tabs.js
2 | Component({
3 |
4 | externalClasses: ['g-class'],
5 |
6 | relations: {
7 | '../tab/tab': {
8 | type: 'child',
9 | linked() {
10 | this.activeChange();
11 | },
12 | linkChanged() {
13 | this.activeChange();
14 | },
15 | unlinked() {
16 | this.activeChange();
17 | }
18 | }
19 | },
20 |
21 | /**
22 | * 组件的属性列表
23 | */
24 | properties: {
25 |
26 | active:{
27 | type: String,
28 | value: '',
29 | observer: 'activeChange'
30 | },
31 |
32 | scroll:{
33 | type:Boolean,
34 | value:false
35 | },
36 |
37 | color:{
38 | type:String,
39 | value:''
40 | }
41 |
42 | },
43 |
44 | /**
45 | * 组件的方法列表
46 | */
47 | methods: {
48 | activeChange(val = this.data.active) {
49 | let items = this.getRelationNodes('../tab/tab');
50 | if (items.length > 0) {
51 | items.forEach(item => {
52 | item.activeChange(item.data.key === val);
53 | item.activeColor(this.data.color);
54 | });
55 | }
56 | },
57 |
58 | emitEvent(params) {
59 | this.triggerEvent('intap', params);
60 | }
61 | }
62 | })
63 |
--------------------------------------------------------------------------------
/component/tabs/tabs.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/tabs/tabs.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/component/tabs/tabs.wxss:
--------------------------------------------------------------------------------
1 | /* component/tabs/tabs.wxss */
2 | .g-tabs{
3 | display: flex;
4 | height: 88rpx;
5 | line-height: 88rpx;
6 | color: rgba(0,0,0, .5);
7 | }
8 | .g-scroll{
9 | width: 100%;
10 | height: 88rpx;
11 | white-space: nowrap;
12 | color: rgba(0,0,0, .5);
13 | background-color: #fff;
14 | }
15 | .g-space-around{
16 | background-color: #fff;
17 | justify-content: space-around;
18 | }
--------------------------------------------------------------------------------
/component/top/top.js:
--------------------------------------------------------------------------------
1 | // component/top/top.js
2 | Component({
3 |
4 | externalClasses: ['g-class'],
5 |
6 | /**
7 | * 组件的属性列表
8 | */
9 | properties: {
10 | //返回上一页
11 | isback: {
12 | type: Boolean,
13 | value: true
14 | },
15 |
16 | //title内容
17 | title: {
18 | type: String,
19 | value: ''
20 | },
21 | //title对齐方式 center || left
22 | align:{
23 | type: String,
24 | value: 'center'
25 | },
26 | //title背景颜色
27 | background:{
28 | type: String,
29 | value:'#2ca9e1'
30 | },
31 | //title文字颜色
32 | color: {
33 | type: String,
34 | value: 'white'
35 | },
36 |
37 | //返回上一页,默认页面
38 | defaultPage:{
39 | type: String,
40 | value: '/pages/index/index'
41 | }
42 |
43 | },
44 |
45 | /**
46 | * 组件的初始数据
47 | */
48 | data: {
49 | system: wx.getSystemInfoSync()
50 | },
51 |
52 | /**
53 | * 组件的方法列表
54 | */
55 | methods: {
56 | inGoBack() {
57 | //返回上一页
58 | if (getCurrentPages().length > 1) {
59 | wx.navigateBack({
60 | delta: 1
61 | });
62 | }
63 | //默认页面
64 | else {
65 | wx.reLaunch({
66 | url: this.data.defaultPage
67 | });
68 | }
69 | this.triggerEvent('inback');
70 | },
71 | }
72 | })
73 |
--------------------------------------------------------------------------------
/component/top/top.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/top/top.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{title}}
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/component/top/top.wxss:
--------------------------------------------------------------------------------
1 | /* component/top/top.wxss */
2 | .g-top-bar{
3 | position: relative;
4 | z-index: 51;
5 | color: #fff;
6 | background-color: #FE586C;
7 | }
8 | .g-top-title{
9 | position: relative;
10 | z-index: 2;
11 | display: flex;
12 | line-height: 88rpx;
13 | padding-right: 200rpx;
14 | }
15 | .g-top-title.center{
16 | text-align: center;
17 | padding-left:200rpx;
18 | }
19 | .g-top-title.left{
20 | text-align: left;
21 | padding-left: 88rpx;
22 | }
23 | .g-text{
24 | flex: 1;
25 | font-size: 36rpx;
26 | overflow: hidden;
27 | white-space: nowrap;
28 | text-overflow: ellipsis;
29 | }
30 | .g-arrow{
31 | position: absolute;
32 | top: 0;
33 | left: 0;
34 | display: inline-block;
35 | width: 88rpx;
36 | height: 88rpx;
37 | line-height: 88rpx;
38 | text-align: center;
39 | }
40 | .g-arrow::before{
41 | content: '';
42 | display: inline-block;
43 | width: 18rpx;
44 | height: 18rpx;
45 | border-top: 4rpx solid #fff;
46 | border-left: 4rpx solid #fff;
47 | transform: rotate(-45deg);
48 | }
49 | .opacity:active{
50 | opacity: .7;
51 | }
--------------------------------------------------------------------------------
/component/upload/upload.js:
--------------------------------------------------------------------------------
1 | // component/upload/upload.js
2 | Component({
3 | /**
4 | * 组件的属性列表
5 | */
6 | properties: {
7 | list: {
8 | type: Object,
9 | value: []
10 | },
11 | //是否显示删除操作
12 | isdel: {
13 | type: Boolean,
14 | value: true
15 | },
16 | //多图
17 | multi: {
18 | type: Boolean,
19 | value: true
20 | },
21 | //最大上传数
22 | maxImg: {
23 | type: [String, Number],
24 | value: 9,
25 | },
26 | //图片上传大小(单位:KB)
27 | maxSize: {
28 | type: [String, Number],
29 | value: 2048,
30 | }
31 | },
32 |
33 | /**
34 | * 组件的初始数据
35 | */
36 | data: {
37 |
38 | },
39 |
40 | /**
41 | * 组件的方法列表
42 | */
43 | methods: {
44 | //上传图片
45 | inUploadImg() {
46 | const me = this;
47 | const { list, multi, maxSize, maxImg } = me.data;
48 | if (list.length >= maxImg) {
49 | wx.showToast({
50 | title: '最多只能上传' + maxImg + '张',
51 | icon: 'none'
52 | });
53 | }
54 | else {
55 | wx.chooseImage({
56 | count: multi ? (maxImg - list.length) : 1,
57 | sizeType: ['original', 'compressed'],
58 | success(res) {
59 |
60 | res.tempFiles.forEach((item, index) => {
61 | const dateId = new Date().getTime();
62 | const M = item.size / 1024;
63 | if (M > maxSize) {
64 | wx.showToast({
65 | title: '单张图片最大不能超过' + (maxSize / 1024).toFixed(2) + 'M',
66 | icon: 'none'
67 | });
68 | return
69 | }
70 | else {
71 | list.push({ upload: true, id: dateId, src: item.path });
72 | me.setData({
73 | 'list': list
74 | });
75 |
76 | //上传图片至服务端逻辑
77 | //xxx
78 |
79 | //此处用setTimeout模拟
80 | setTimeout(()=>{
81 |
82 | //服务端返回地址
83 | const ImgServerUrl = 'https://www.xxxx/xx/xxx.jpg';
84 |
85 | //匹配id,设置上传状态
86 | list.forEach(item => {
87 | if (dateId == item.id) {
88 | item.imageurl = ImgServerUrl;
89 | item.upload = false;
90 | }
91 | });
92 | me.setData({
93 | 'list': list
94 | });
95 | me.triggerEvent('inupload', list);
96 | },1500);
97 | }
98 | })
99 | }
100 | })
101 | }
102 | },
103 |
104 | //删除图片
105 | inDelImg(e) {
106 | const me = this;
107 | const getData = e.currentTarget.dataset;
108 | let { list } = me.data;
109 | const delItem = list[getData.index];
110 | list.splice(getData.index, 1);
111 | me.setData({
112 | 'list': list
113 | })
114 | me.triggerEvent('indel', { delidx: getData.index, del: list[getData.index], item: list });
115 | },
116 |
117 | //查看大图
118 | inSeeImg(e) {
119 | const me = this;
120 | const getData = e.currentTarget.dataset;
121 | let { list } = me.data;
122 | let newList = [];
123 | list.forEach(item => {
124 | newList.push(item.src);
125 | });
126 | wx.previewImage({
127 | current: list[getData.index].src,
128 | urls: newList
129 | });
130 | },
131 | }
132 | })
--------------------------------------------------------------------------------
/component/upload/upload.json:
--------------------------------------------------------------------------------
1 | {
2 | "component": true,
3 | "usingComponents": {}
4 | }
--------------------------------------------------------------------------------
/component/upload/upload.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | 上传图片
10 |
11 |
12 |
--------------------------------------------------------------------------------
/component/upload/upload.wxss:
--------------------------------------------------------------------------------
1 | /* component/upload/upload.wxss */
2 | image{
3 | width: 100%;
4 | height: 100%;
5 | }
6 | .upload-bar{
7 | display: flex;
8 | flex-wrap: wrap;
9 | margin: -30rpx 0 0 -30rpx;
10 | }
11 | .upload-item{
12 | position: relative;
13 | width: 150rpx;
14 | height: 150rpx;
15 | margin: 30rpx 0 0 30rpx;
16 | text-align: center;
17 | display:box;
18 | display:-webkit-box;
19 | -webkit-box-pack:center;
20 | box-pack:center;
21 | -webkit-box-orient:vertical;
22 | box-orient:vertical;
23 | font-size: 24rpx;
24 | color: rgba(56,57,59, .78);
25 | }
26 | .opacity:active{
27 | opacity: .7;
28 | }
29 | .add-ico{
30 | position: relative;
31 | width: 100%;
32 | height: 44rpx;
33 | margin: 10rpx 0;
34 | }
35 | .close-ico::before,
36 | .close-ico::after,
37 | .add-ico::before,
38 | .add-ico::after{
39 | content: '';
40 | position: absolute;
41 | top: 50%;
42 | left:50%;
43 | width: 100%;
44 | height: 100%;
45 | display: block;
46 | border-radius: 6rpx;
47 | background-color: #d4d6d9;
48 | transform: translate(-50%, -50%);
49 | }
50 | .add-ico::before{
51 | width: 44rpx;
52 | height: 6rpx;
53 | }
54 | .add-ico::after{
55 | width: 6rpx;
56 | height: 44rpx;
57 | }
58 | .close-ico{
59 | position: absolute;
60 | right: -20rpx;
61 | top: -20rpx;
62 | z-index: 2;
63 | width: 32rpx;
64 | height: 32rpx;
65 | border: 8rpx solid #fff;
66 | background-color: #ff2f47;
67 | border-radius: 50%;
68 | transform: rotate(45deg);
69 | }
70 | .close-ico:active{
71 | background-color: #fd8f9c;
72 | }
73 | .close-ico::before,
74 | .close-ico::after{
75 | background-color: #fff;
76 | }
77 | .close-ico::before{
78 | width: 16rpx;
79 | height: 4rpx;
80 | }
81 | .close-ico::after{
82 | height: 16rpx;
83 | width: 4rpx;
84 | }
85 | .upload-add{
86 | background-color: #edeff1;
87 | }
88 | .upload-state::after{
89 | content: '上传中...';
90 | position: absolute;
91 | width: 100%;
92 | height: 100%;
93 | top: 0;
94 | left: 0;
95 | display:box;
96 | display:-webkit-box;
97 | -webkit-box-pack:center;
98 | box-pack:center;
99 | -webkit-box-orient:vertical;
100 | box-orient:vertical;
101 | color: rgba(255,255,255, .9);
102 | background: rgba(0,0,0, .5);
103 | }
--------------------------------------------------------------------------------
/images/gui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gensp/GUI/c323b497421af69920f73152dd602d56180737cd/images/gui.png
--------------------------------------------------------------------------------
/images/nav/gui-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gensp/GUI/c323b497421af69920f73152dd602d56180737cd/images/nav/gui-active.png
--------------------------------------------------------------------------------
/images/nav/gui-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gensp/GUI/c323b497421af69920f73152dd602d56180737cd/images/nav/gui-default.png
--------------------------------------------------------------------------------
/images/nav/index-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gensp/GUI/c323b497421af69920f73152dd602d56180737cd/images/nav/index-active.png
--------------------------------------------------------------------------------
/images/nav/index-default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gensp/GUI/c323b497421af69920f73152dd602d56180737cd/images/nav/index-default.png
--------------------------------------------------------------------------------
/pages/button/button.js:
--------------------------------------------------------------------------------
1 | // component/button/button.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 | //获取用户信息(open-type为getUserInfo时生效)
19 | inGetUserInfo(event) {
20 | this.triggerEvent('getuserinfo', event);
21 | },
22 |
23 | //获取手机号码(open-type为getPhoneNumber时生效)
24 | inGerPhoneNumber(event) {
25 | this.triggerEvent('getphonenumber', event);
26 | },
27 |
28 | //打开授权页
29 | inOpenSetting(event) {
30 | this.triggerEvent('opensetting', event);
31 | },
32 |
33 | //点击
34 | inTap(event) {
35 | this.triggerEvent('intap', event);
36 | },
37 |
38 | /**
39 | * 用户点击右上角分享
40 | */
41 | onShareAppMessage: function () {
42 |
43 | }
44 | })
45 |
46 |
--------------------------------------------------------------------------------
/pages/button/button.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-flex": "/component/flex/flex",
5 | "g-col": "/component/col/col",
6 | "g-button": "/component/button/button"
7 | }
8 | }
--------------------------------------------------------------------------------
/pages/button/button.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | default
5 | default
6 | default
7 |
8 |
9 | primary
10 | primary
11 | primary
12 |
13 |
14 | danger
15 | danger
16 | danger
17 |
18 |
19 |
20 | default
21 | primary
22 | danger
23 |
24 |
25 |
26 | default
27 | primary
28 | danger
29 |
30 |
31 | default
32 | primary
33 | danger
34 |
35 |
36 |
37 | 获取用户信息
38 | 分享给好友
39 | 联系客服
40 | 获取手机号码
41 | 打开授权页
42 |
43 |
44 |
45 | 自定义按钮
46 |
47 |
--------------------------------------------------------------------------------
/pages/button/button.wxss:
--------------------------------------------------------------------------------
1 | /* pages/button/button.wxss */
2 | .demo-flex{
3 | padding:0 20rpx;
4 | }
5 | .demo-col{
6 | padding:0 10rpx 20rpx 10rpx;
7 | }
8 | .custom-btn{
9 | background-color: #7bbd4f!important;
10 | }
--------------------------------------------------------------------------------
/pages/checkbox/checkbox.js:
--------------------------------------------------------------------------------
1 | // pages/checkbox/checkbox.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | checkboxActive: ['白菜','茄子'],
9 | checkboxData: [
10 | { id: 1, value: '白菜', mode: 'list' },
11 | { id: 2, value: '茄子', mode: 'list' },
12 | { id: 3, value: '土豆', mode: 'list', align: 'right' },
13 | { id: 3, value: '花菜', mode: 'list', align: 'right' }
14 | ],
15 | radioActive: ['芒果'],
16 |
17 | disabled: {
18 | active: '',
19 | state: true,
20 | checked: false
21 | }
22 | },
23 |
24 | /**
25 | * 生命周期函数--监听页面加载
26 | */
27 | onLoad: function (options) {
28 |
29 | },
30 |
31 | inRetrieval(arr, value){
32 | let newarr = arr;
33 | const index = newarr.indexOf(value);
34 | index === -1 ? newarr.push(value) : newarr.splice(index, 1);
35 | return newarr;
36 | },
37 |
38 | inChange1({ detail = {} }){
39 | const me = this;
40 | const { checkboxActive } = me.data;
41 | console.log(detail)
42 | me.setData({
43 | 'checkboxActive': me.inRetrieval(checkboxActive, detail.value)
44 | });
45 | },
46 |
47 | inChange2({ detail = {} }) {
48 | const me = this;
49 | const { radioActive } = me.data;
50 | me.setData({
51 | 'radioActive': me.inRetrieval(radioActive, detail.value)
52 | });
53 | },
54 |
55 | inDisabledChange(e) {
56 | this.setData({
57 | 'disabled.checked': e.detail.active
58 | })
59 | },
60 |
61 | inTap(e) {
62 | this.setData({
63 | 'disabled.state': !this.data.disabled.state
64 | });
65 | },
66 |
67 | /**
68 | * 用户点击右上角分享
69 | */
70 | onShareAppMessage: function () {
71 |
72 | }
73 | })
--------------------------------------------------------------------------------
/pages/checkbox/checkbox.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-checkbox-group": "/component/checkbox-group/checkbox-group",
5 | "g-checkbox": "/component/checkbox/checkbox",
6 | "g-button": "/component/button/button"
7 | }
8 | }
--------------------------------------------------------------------------------
/pages/checkbox/checkbox.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 切换禁用状态
16 |
17 |
--------------------------------------------------------------------------------
/pages/checkbox/checkbox.wxss:
--------------------------------------------------------------------------------
1 | /* pages/checkbox/checkbox.wxss */
2 | .wrap{
3 | padding: 30rpx;
4 | }
5 | .demo-box{
6 | margin-bottom: 30rpx;
7 | }
8 | .demo-radio{
9 | display: inline-block;
10 | box-sizing: border-box;
11 | padding:0 30rpx;
12 | width: 50%;
13 | }
--------------------------------------------------------------------------------
/pages/clip/clip.js:
--------------------------------------------------------------------------------
1 | // pages/clip/clip.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | clipData:{
9 | state: false,
10 | imgurl:'',
11 | clipurl:''
12 | },
13 | saveW: 750,
14 | saveH: 300
15 | },
16 |
17 | /**
18 | * 生命周期函数--监听页面加载
19 | */
20 | onLoad (options) {
21 |
22 | },
23 |
24 | //图片上传
25 | inUploadImg(){
26 | const me = this;
27 | wx.chooseImage({
28 | count: 1,
29 | //sizeType: ['original'],
30 | success(res) {
31 | me.setData({
32 | 'clipData.state': true,
33 | 'clipData.imgurl': res.tempFilePaths[0]
34 | })
35 | }
36 | })
37 | },
38 |
39 | //取消裁切
40 | inToggleClip(e){
41 | const me = this;
42 | //console.log(e)
43 | me.setData({
44 | 'clipData.state': !me.data.clipData.state
45 | })
46 |
47 | //确定
48 | if (e.type == "insuccess"){
49 | me.setData({
50 | 'clipurl': e.detail.clipurl
51 | })
52 | }
53 | },
54 |
55 | /**
56 | * 用户点击右上角分享
57 | */
58 | onShareAppMessage: function () {
59 |
60 | }
61 | })
--------------------------------------------------------------------------------
/pages/clip/clip.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-clip": "/component/clip/clip",
5 | "g-button": "/component/button/button"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/clip/clip.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 上传图片
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/pages/clip/clip.wxss:
--------------------------------------------------------------------------------
1 | /* pages/clip/clip.wxss */
2 | .wrap{
3 | padding:0 30rpx;
4 | }
--------------------------------------------------------------------------------
/pages/drawer/drawer.js:
--------------------------------------------------------------------------------
1 | // pages/drawer/drawer.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | drawer:{
9 | top: false,
10 | right: false,
11 | bottom: false,
12 | left: false
13 | }
14 | },
15 |
16 | /**
17 | * 生命周期函数--监听页面加载
18 | */
19 | onLoad: function (options) {
20 |
21 | },
22 |
23 | inToggleDrawerTop(e){
24 | const me = this;
25 | me.setData({
26 | 'drawer.top': !me.data.drawer.top
27 | });
28 | },
29 |
30 | inToggleDrawerRight(e) {
31 | const me = this;
32 | me.setData({
33 | 'drawer.right': !me.data.drawer.right
34 | });
35 | },
36 |
37 | inToggleDrawerBottom(e){
38 | const me = this;
39 | me.setData({
40 | 'drawer.bottom': !me.data.drawer.bottom
41 | });
42 | },
43 |
44 | inToggleDrawerLeft(e){
45 | const me = this;
46 | me.setData({
47 | 'drawer.left': !me.data.drawer.left
48 | });
49 | },
50 |
51 | /**
52 | * 用户点击右上角分享
53 | */
54 | onShareAppMessage: function () {
55 |
56 | }
57 | })
--------------------------------------------------------------------------------
/pages/drawer/drawer.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-button": "/component/button/button",
4 | "g-drawer": "/component/drawer/drawer"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/drawer/drawer.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 上边滑出(自定义高度30%)
6 | 点击遮罩关闭
7 |
8 |
9 |
10 | 右边滑出(自定义宽度40%)
11 | 点击遮罩关闭
12 |
13 |
14 |
15 | 下边滑出(默认高度60%)
16 | 点击遮罩关闭
17 |
18 |
19 |
20 | 左边滑出(默认宽度60%)
21 |
22 | 点击按钮关闭
23 | 关闭
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/pages/drawer/drawer.wxss:
--------------------------------------------------------------------------------
1 | /* pages/drawer/drawer.wxss */
2 | .wrap{
3 | padding:30rpx;
4 | }
5 | .item-drawer + .item-drawer{
6 | margin-top: 30rpx;
7 | }
8 | .demo-drawer{
9 | padding:30rpx;
10 | }
11 | .demo-text{
12 | text-align: center;
13 | padding-bottom: 30rpx;
14 | }
--------------------------------------------------------------------------------
/pages/drop/array.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | //检索json数组
3 | index(arr, val, key){
4 | for(let x in arr){
5 | if(arr[x][key] == val){
6 | return x;
7 | }
8 | }
9 | }
10 | };
--------------------------------------------------------------------------------
/pages/drop/drop.js:
--------------------------------------------------------------------------------
1 | // pages/drop/drop.js
2 | const $Array = require('./array.js');
3 | let IncreaseID = 0;
4 | Page({
5 |
6 | /**
7 | * 页面的初始数据
8 | */
9 | data: {
10 | imgData:[],
11 | boxJson:{},
12 | },
13 |
14 | onLoad(options) {
15 | const me = this;
16 |
17 | me.inGetQuery('.drop-main', res=>{
18 | me.setData({
19 | 'boxJson':res
20 | })
21 | //console.log(me.data.boxJson)
22 | me.inSetImgData();
23 | })
24 | },
25 |
26 | //获取指定节点相关参数
27 | inGetQuery(id, call) {
28 | const query = wx.createSelectorQuery();
29 | query.select(id).boundingClientRect();
30 | query.selectViewport().scrollOffset();
31 | query.exec(function (res) {
32 | call(res[0]);
33 | });
34 | },
35 |
36 | //插入挂件
37 | inSetImgData(){
38 | const me = this;
39 | me.inClear();
40 |
41 | let { imgData } = me.data;
42 | imgData.push({ url: '../../images/gui.png', key: ++IncreaseID, active: true });
43 | me.setData({
44 | 'imgData': imgData
45 | })
46 | },
47 |
48 | //初始化
49 | initDrop(e){
50 | const me = this;
51 | const { imgData } = me.data;
52 |
53 | //匹配key获取索引值
54 | const idx = $Array.index(imgData, e.detail.key, 'key');
55 |
56 | me.setData({
57 | ['imgData[' + idx + ']']: e.detail
58 | })
59 | //console.log(me.data.imgData)
60 | },
61 |
62 | //移动时
63 | inMoveChange(e){
64 | console.log(e.detail)
65 | },
66 |
67 | //缩放时
68 | inScaleChange(e){
69 | console.log(e.detail)
70 | },
71 |
72 | //清楚编辑状态
73 | inClear(){
74 | const me = this;
75 | let { imgData } = me.data;
76 | imgData.forEach(item => {
77 | item.active = false;
78 | })
79 | me.setData({
80 | 'imgData': imgData
81 | })
82 | },
83 |
84 | //编辑状态切换
85 | inToggle(e){
86 | const me = this;
87 | me.inClear();
88 |
89 | const { imgData } = me.data;
90 | const getData = e.currentTarget.dataset;
91 | me.setData({
92 | ['imgData[' + getData.index + '].active']: !imgData[getData.index].active
93 | })
94 | },
95 |
96 | //删除指定挂件
97 | inDelDrop(e){
98 | const me = this;
99 | let { imgData } = me.data;
100 |
101 | //匹配key获取索引值
102 | let idx = $Array.index(imgData, e.detail.key, 'key');
103 |
104 | //console.log('key:'+e.detail.key, 'index:'+idx);
105 | imgData.splice(idx, 1);
106 | //debugger;
107 |
108 | me.setData({
109 | 'imgData': imgData
110 | })
111 | if (idx > 0) {
112 | me.setData({
113 | ['imgData[' + (--idx) + '].active']: true
114 | })
115 | }
116 | }
117 | })
--------------------------------------------------------------------------------
/pages/drop/drop.json:
--------------------------------------------------------------------------------
1 | {
2 | "disableScroll": true,
3 | "usingComponents": {
4 | "g-drop": "/component/drop/drop",
5 | "g-button": "/component/button/button"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/drop/drop.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/pages/drop/drop.wxss:
--------------------------------------------------------------------------------
1 | /* pages/drop/drop.wxss */
2 | image{
3 | width: 100%;
4 | height: 100%;
5 | }
6 | .drop-bar{
7 | position: relative;
8 | padding:30rpx;
9 | box-sizing: border-box;
10 | background-color: #eee;
11 | height: 100vw;
12 | }
13 | .drop-main{
14 | position: relative;
15 | height: 100%;
16 | overflow: hidden;
17 | }
--------------------------------------------------------------------------------
/pages/drop/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gensp/GUI/c323b497421af69920f73152dd602d56180737cd/pages/drop/img.jpg
--------------------------------------------------------------------------------
/pages/fixed/fixed.js:
--------------------------------------------------------------------------------
1 | // pages/fixed/fixed.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | scrollTop: 0
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 | //页面滚动
19 | onPageScroll(event) {
20 | this.setData({
21 | scrollTop: event.scrollTop
22 | })
23 | },
24 |
25 | /**
26 | * 用户点击右上角分享
27 | */
28 | onShareAppMessage: function () {
29 |
30 | }
31 | })
--------------------------------------------------------------------------------
/pages/fixed/fixed.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-fixed": "/component/fixed/fixed"
4 | }
5 | }
--------------------------------------------------------------------------------
/pages/fixed/fixed.wxml:
--------------------------------------------------------------------------------
1 |
2 | {{index}}
3 |
4 |
5 | 吸顶容器
6 |
7 |
8 | {{index}}
9 |
--------------------------------------------------------------------------------
/pages/fixed/fixed.wxss:
--------------------------------------------------------------------------------
1 | /* pages/fixed/fixed.wxss */
2 | .fixed-wrap{
3 | min-height: 88rpx;
4 | }
5 | .fixed-box{
6 | height: 88rpx;
7 | line-height: 88rpx;
8 | padding:0 30rpx;
9 | background-color: #fff;
10 | }
--------------------------------------------------------------------------------
/pages/flex/flex.js:
--------------------------------------------------------------------------------
1 | // pages/flex/flex.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 | /**
19 | * 用户点击右上角分享
20 | */
21 | onShareAppMessage: function () {
22 |
23 | }
24 | })
--------------------------------------------------------------------------------
/pages/flex/flex.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-flex": "/component/flex/flex",
5 | "g-col": "/component/col/col"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/flex/flex.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | span-12
5 |
6 |
7 | span-10
8 | span-2
9 |
10 |
11 | span-8
12 | span-4
13 |
14 |
15 | span-6
16 | span-6
17 |
18 |
19 | span-4
20 | span-4
21 | span-4
22 |
23 |
24 |
25 |
26 | offset-2 span-10
27 |
28 |
29 | offset-4 span-8
30 |
31 |
32 | offset-6 span-6
33 |
34 |
35 | offset-2 span-4
36 | offset-2 span-4
37 |
38 |
39 |
40 |
41 |
42 | span-4
43 |
44 |
45 |
--------------------------------------------------------------------------------
/pages/flex/flex.wxss:
--------------------------------------------------------------------------------
1 | /* pages/flex/flex.wxss */
2 | .demo-flex {
3 | text-align: center;
4 | margin-bottom: 20rpx;
5 | background-color: #fff;
6 | }
7 | .demo-col{
8 | color: #fff;
9 | height: 80rpx;
10 | line-height: 80rpx;
11 | background-color: rgba(44,169,225, 1);
12 | }
13 | .demo-col.light{
14 | background-color: rgba(44,169,225, .5);
15 | }
16 | .demo-space{
17 | text-align: center;
18 | margin-bottom: 20rpx;
19 | }
--------------------------------------------------------------------------------
/pages/gesture/gesture.js:
--------------------------------------------------------------------------------
1 | // pages/gesture/gesture.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | gestureLeft:[
9 | { id: 1, state:false },
10 | { id: 2, state: false }
11 | ],
12 | gestureRight: [
13 | { id: 1, state: false },
14 | { id: 2, state: false }
15 | ]
16 | },
17 |
18 | /**
19 | * 生命周期函数--监听页面加载
20 | */
21 | onLoad: function (options) {
22 |
23 | },
24 |
25 | //左滑切换
26 | inToggleLeft(e) {
27 | const me = this;
28 | const { gestureLeft } = me.data;
29 | //当前节点未滑出,则去遍历重置
30 | if (!gestureLeft[Number(e.detail.key)].state){
31 | me.inResetLeft();
32 | }
33 | const setState = 'gestureLeft[' + Number(e.detail.key) + '].state';
34 | me.setData({
35 | [setState]: true
36 | });
37 |
38 | },
39 |
40 | //左滑重置
41 | inResetLeft(e) {
42 | const me = this;
43 | const { gestureLeft } = me.data;
44 | for (let x in gestureLeft) {
45 | //匹配当前已滑出的节点
46 | if (gestureLeft[x].state) {
47 | const setState = 'gestureLeft[' + x + '].state';
48 | //动画执行完后,设置
49 | setTimeout(function () {
50 | me.setData({
51 | [setState]: false
52 | });
53 | }, 200);
54 | return;
55 | }
56 | }
57 | },
58 |
59 | //右滑切换
60 | inToggleRight(e) {
61 | const me = this;
62 | const { gestureRight } = me.data;
63 | //当前节点未滑出,则去遍历重置
64 | if (!gestureRight[Number(e.detail.key)].state) {
65 | //me.inResetRight();
66 | }
67 | const setState = 'gestureRight[' + Number(e.detail.key) + '].state';
68 | me.setData({
69 | [setState]: true
70 | });
71 |
72 | },
73 |
74 | //右滑重置
75 | inResetRight(e) {
76 | const me = this;
77 | const { gestureRight } = me.data;
78 | for (let x in gestureRight) {
79 | //匹配当前已滑出的节点
80 | if (gestureRight[x].state) {
81 | const setState = 'gestureRight[' + x + '].state';
82 | //动画执行完后,设置
83 | setTimeout(function () {
84 | me.setData({
85 | [setState]: false
86 | });
87 | }, 200);
88 | return;
89 | }
90 | }
91 | },
92 |
93 | /**
94 | * 用户点击右上角分享
95 | */
96 | onShareAppMessage: function () {
97 |
98 | }
99 | })
--------------------------------------------------------------------------------
/pages/gesture/gesture.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-gesture": "/component/gesture/gesture",
4 | "g-box": "/component/box/box",
5 | "g-list": "/component/list/list",
6 | "g-button": "/component/button/button"
7 | }
8 | }
--------------------------------------------------------------------------------
/pages/gesture/gesture.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 左滑{{item.id}}
5 | 删 除
6 |
7 |
8 |
9 |
10 |
11 | 展示
12 | 右滑{{item.id}}
13 |
14 |
15 |
--------------------------------------------------------------------------------
/pages/gesture/gesture.wxss:
--------------------------------------------------------------------------------
1 | /* pages/gesture/gesture.wxss */
2 | .custom-btn{
3 | border-radius: 0!important;
4 | }
--------------------------------------------------------------------------------
/pages/grid/grid.js:
--------------------------------------------------------------------------------
1 | // pages/grid/grid.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | gridData1:[]
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 | const me = this;
16 | me.inGetGrid();
17 | },
18 |
19 | inGetGrid(){
20 | const me = this;
21 | const gridArr = [];
22 | for(let x = 0; x < 6; x++){
23 | gridArr.push({value:'宫格'+x})
24 | }
25 | me.setData({
26 | 'gridData1': gridArr
27 | })
28 | },
29 |
30 | /**
31 | * 用户点击右上角分享
32 | */
33 | onShareAppMessage: function () {
34 |
35 | }
36 | })
--------------------------------------------------------------------------------
/pages/grid/grid.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-grid": "/component/grid/grid",
5 | "g-col": "/component/col/col"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/grid/grid.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{item.value}}
5 |
6 |
7 |
8 | {{item.value}}
9 |
10 |
--------------------------------------------------------------------------------
/pages/grid/grid.wxss:
--------------------------------------------------------------------------------
1 | /* pages/grid/grid.wxss */
2 | .custom-grid{
3 | background-color: #fff;
4 | }
5 | .custom-col{
6 | height: 120rpx;
7 | display:box;
8 | display:-webkit-box;
9 | -webkit-box-pack:center;
10 | box-pack:center;
11 | -webkit-box-orient:vertical;
12 | box-orient:vertical;
13 | -webkit-box-align:center;
14 | box-align:center;
15 | }
16 | .custom-link:active{
17 | opacity: .7;
18 | background-color: rgba(0,0,0, .05);
19 | }
--------------------------------------------------------------------------------
/pages/gui/gui.js:
--------------------------------------------------------------------------------
1 | // pages/gui/gui.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | github:'https://github.com/Gensp/GUI',
9 | logData:[
10 | {
11 | title: 'v1.0.4(2019-11-25)',
12 | list: [
13 | '- 新增Page、Top、Search组件',
14 | '- Flex布局,新增配置选项 space(间隔)',
15 | ]
16 | },
17 | {
18 | title: 'v1.0.3(2019-11-21)',
19 | list: ['- 新增Upload(图片上传)组件']
20 | },
21 | {
22 | title: 'v1.0.2(2019-11-20)',
23 | list: ['- 新增Grid、Clip、Fixed、Swiper、Drop、Indexes组件']
24 | },
25 | {
26 | title: 'v1.0.1(2018-12-20)',
27 | list: ['- 新增Gesture、Region组件']
28 | },
29 | {
30 | title:'v1.0.0(2018-09-27)',
31 | list: ['- 初始版本']
32 | }
33 | ]
34 | },
35 |
36 | /**
37 | * 生命周期函数--监听页面加载
38 | */
39 | onLoad: function (options) {
40 |
41 | },
42 |
43 | inCopyLink(e){
44 | const me = this;
45 | wx.setClipboardData({
46 | data: me.data.github
47 | });
48 | },
49 |
50 | /**
51 | * 用户点击右上角分享
52 | */
53 | onShareAppMessage: function () {
54 |
55 | }
56 | })
--------------------------------------------------------------------------------
/pages/gui/gui.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-button": "/component/button/button",
5 | "g-list": "/component/list/list",
6 | "g-size": "/component/size/size"
7 | }
8 | }
--------------------------------------------------------------------------------
/pages/gui/gui.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 一款基于小程序规范的组件库
6 | 简单、易用、可扩展
7 |
8 |
9 |
10 |
11 | API文档整理中...
12 | {{github}}
13 | 复制地址
14 |
15 |
16 |
17 |
18 | {{it.title}}
19 | {{jt}}
20 |
21 |
22 |
--------------------------------------------------------------------------------
/pages/gui/gui.wxss:
--------------------------------------------------------------------------------
1 | /* pages/gui/gui.wxss */
2 | .color-gray{
3 | color: #999;
4 | }
5 | .wrap{
6 | text-align: center;
7 | padding: 60rpx 30rpx;
8 | color: #666;
9 | }
10 | .demo-size{
11 | text-align: center;
12 | line-height: 48rpx;
13 | }
14 | .guilogo{
15 | width: 180rpx;
16 | height: 180rpx;
17 | }
18 | .github-bar{
19 | text-align: center;
20 | padding: 10rpx 0;
21 | }
22 | .copy-btn{
23 | width: 35%;
24 | margin: 20rpx auto 0;
25 | }
--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
1 | //index.js
2 | const app = getApp();
3 |
4 | Page({
5 | data: {
6 | pagetitle:'GUI 一款基于小程序规范的组件库',
7 | itemData:[
8 | {
9 | title:'文本',
10 | list:[
11 | { val: 'Size 尺寸', path: '/pages/size/size' },
12 | { val: 'Line 文本省略 (单行、多行)', path: '/pages/line/line' }
13 | //{ val: 'Icon 图标', path: '/pages/icon/icon' }
14 | ]
15 | },
16 | {
17 | title: '布局',
18 | list: [
19 | { val: 'Page 框架', path: '/pages/page/page' },
20 | { val: 'Top 头部', path: '/pages/top/top' },
21 | { val: 'Search 搜索', path: '/pages/search/search' },
22 | { val: 'Flex 栅格', path: '/pages/flex/flex' },
23 | { val: 'Grid 宫格', path: '/pages/grid/grid' },
24 | { val: 'List 列表', path: '/pages/list/list' },
25 | ]
26 | },
27 | {
28 | title: '表单',
29 | list: [
30 | { val: 'Button 按钮', path: '/pages/button/button' },
31 | { val: 'Input 输入框', path: '/pages/input/input' },
32 | { val: 'Textarea 留言框', path: '/pages/textarea/textarea' },
33 | { val: 'Radio 单选', path: '/pages/radio/radio' },
34 | { val: 'Checkbox 复选', path: '/pages/checkbox/checkbox' },
35 | { val: 'Switch 开关', path: '/pages/switch/switch' },
36 | { val: 'Upload 图片上传', path: '/pages/upload/upload' }
37 | ]
38 | },
39 | {
40 | title: '提示反馈',
41 | list: [
42 | { val: 'Loading 加载', path: '/pages/loading/loading' },
43 | { val: 'Modal 对话框', path: '/pages/modal/modal' },
44 | //{ val: 'Toast 提示', path: '/pages/Toast/Toast' },
45 | ]
46 | },
47 | {
48 | title: '视图',
49 | list: [
50 | { val: 'Clip 裁切', path: '/pages/clip/clip' },
51 | { val: 'Fixed 吸顶', path: '/pages/fixed/fixed' },
52 | { val: 'Tab 选项卡', path: '/pages/tab/tab' },
53 | { val: 'Swiper 滑块', path: '/pages/swiper/swiper' },
54 | { val: 'Drawer 抽屉', path: '/pages/drawer/drawer' },
55 | { val: 'Drop 拖动', path: '/pages/drop/drop' },
56 | { val: 'Gesture 手势', path: '/pages/gesture/gesture' },
57 | { val: 'Indexes 索引', path: '/pages/indexes/indexes' },
58 | //{ val: 'Tag 标签', path: '/pages/tag/tag' },
59 | //{ val: 'Badge 徽章', path: '/pages/badge/badge' },
60 | { val: 'Region 省市区', path: '/pages/region/region' }
61 | ]
62 | }
63 | ]
64 | },
65 |
66 | inToPage(e){
67 | const me = this;
68 | const getData = e.currentTarget.dataset;
69 | wx.navigateTo({
70 | url: getData.path
71 | });
72 | },
73 |
74 | onShareAppMessage(){
75 | return {
76 | title: me.data.pagetitle,
77 | path: '/pages/index/index'
78 | }
79 | },
80 |
81 | })
82 |
--------------------------------------------------------------------------------
/pages/index/index.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-list": "/component/list/list",
5 | "g-size": "/component/size/size"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 一款基于小程序规范的组件库
6 | 简单、易用、可扩展
7 |
8 |
9 |
10 | {{j.val}}
11 |
--------------------------------------------------------------------------------
/pages/index/index.wxss:
--------------------------------------------------------------------------------
1 | /**index.wxss**/
2 | page{
3 | padding-bottom: 30rpx;
4 | }
5 | .wrap{
6 | text-align: center;
7 | padding: 60rpx 30rpx;
8 | color: #666;
9 | }
10 | .guilogo{
11 | width: 180rpx;
12 | height: 180rpx;
13 | }
14 | .demo-size{
15 | line-height: 48rpx;
16 | }
17 |
--------------------------------------------------------------------------------
/pages/indexes/indexes.js:
--------------------------------------------------------------------------------
1 | // pages/indexes/indexes.js
2 | const { cities } = require('./city');
3 | Page({
4 |
5 | /**
6 | * 页面的初始数据
7 | */
8 | data: {
9 | cities,
10 | sourceData: null
11 | },
12 |
13 | /**
14 | * 生命周期函数--监听页面加载
15 | */
16 | onLoad: function (options) {
17 | this.initCities();
18 | },
19 |
20 | initCities(){
21 | const { cities } = this.data;
22 | let sourceCity = new Array(23);
23 | const sourceKey = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"];
24 | sourceKey.forEach((item, index)=>{
25 | sourceCity[index]={
26 | key: item,
27 | list: []
28 | }
29 | });
30 | cities.forEach((item, index)=>{
31 | const firstLetter = item.pinyin.substring(0, 1);
32 | const idx = sourceKey.indexOf(firstLetter)
33 | sourceCity[idx].list.push({
34 | name: item.name,
35 | key: firstLetter,
36 | zip: item.zip
37 | })
38 | })
39 | this.setData({
40 | 'sourceData': sourceCity
41 | })
42 | },
43 |
44 | inMove(e){
45 | console.log(e.detail)
46 | },
47 |
48 | /**
49 | * 用户点击右上角分享
50 | */
51 | onShareAppMessage: function () {
52 |
53 | }
54 | })
--------------------------------------------------------------------------------
/pages/indexes/indexes.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-indexes": "/component/indexes/indexes",
4 | "g-indexes-item": "/component/indexes-item/indexes-item"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/indexes/indexes.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{jt.name}}
5 |
6 |
--------------------------------------------------------------------------------
/pages/indexes/indexes.wxss:
--------------------------------------------------------------------------------
1 | /* pages/indexes/indexes.wxss */
2 | .item-list{
3 | position: relative;
4 | }
5 | .item-list::after{
6 | content: '';
7 | position: absolute;
8 | left: 0;
9 | width: 100%;
10 | border-bottom: 1px solid #eee;
11 | display: block;
12 | transform: scaleY(0.5);
13 | }
--------------------------------------------------------------------------------
/pages/input/input.js:
--------------------------------------------------------------------------------
1 | // pages/input/input.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 |
19 | inFocus(e) {
20 | console.log('获取焦点');
21 | },
22 |
23 | inChange(e){
24 | console.log('值变了');
25 | },
26 |
27 | inBlur(){
28 | console.log('失去焦点');
29 | },
30 |
31 | inConfirm() {
32 | console.log('点击确认了');
33 | },
34 |
35 | /**
36 | * 用户点击右上角分享
37 | */
38 | onShareAppMessage: function () {
39 |
40 | }
41 | })
--------------------------------------------------------------------------------
/pages/input/input.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-input": "/component/input/input"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/input/input.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/pages/input/input.wxss:
--------------------------------------------------------------------------------
1 | /* pages/input/input.wxss */
2 | .demo-box{
3 | background-color: #fff;
4 | padding:30rpx 0 1rpx;
5 | }
6 | .demo-radius{
7 | margin: 0 30rpx 30rpx 30rpx;
8 | }
9 | .demo-title,
10 | .demo-input{
11 | background-color: #f9f9f9!important;
12 | }
--------------------------------------------------------------------------------
/pages/line/line.js:
--------------------------------------------------------------------------------
1 | // pages/line/line.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 | /**
19 | * 用户点击右上角分享
20 | */
21 | onShareAppMessage: function () {
22 |
23 | }
24 | })
--------------------------------------------------------------------------------
/pages/line/line.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-line": "/component/line/line"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/line/line.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | GUI是一款基于小程序规范的组件库,简洁、易用、可扩展。GUI是一款基于小程序规范的组件库,简洁、易用、可扩展。
5 |
6 |
7 |
8 |
9 | GUI是一款基于小程序规范的组件库,简洁、易用、可扩展。GUI是一款基于小程序规范的组件库,简洁、易用、可扩展。GUI是一款基于小程序规范的组件库,简洁、易用、可扩展。
10 |
11 |
--------------------------------------------------------------------------------
/pages/line/line.wxss:
--------------------------------------------------------------------------------
1 | /* pages/line/line.wxss */
2 | .main{
3 | line-height: 48rpx;
4 | background-color: #fff;
5 | padding:30rpx;
6 | }
--------------------------------------------------------------------------------
/pages/list/list.js:
--------------------------------------------------------------------------------
1 | // pages/list/list.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 | /**
19 | * 用户点击右上角分享
20 | */
21 | onShareAppMessage: function () {
22 |
23 | }
24 | })
--------------------------------------------------------------------------------
/pages/list/list.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-list": "/component/list/list"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/list/list.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | 我左对齐
4 | 我居中对齐
5 | 我右对齐
6 | 我是内容
7 |
8 | 我是内容1
9 | 我是内容2
10 |
11 |
12 | 我是内容1
13 | 我是内容2
14 |
15 | 我被禁用了
16 |
17 |
18 |
19 | 我是标题也是内容
20 | 我是内容
21 | 我是超长的内容,超出会自动隐藏显示省略号
22 |
23 |
24 |
25 |
26 | 我是内容
27 |
28 |
29 |
30 |
31 | Gensp
32 |
33 |
34 |
35 | 我是内容
36 | 我是内容
37 | Gensp
38 |
--------------------------------------------------------------------------------
/pages/list/list.wxss:
--------------------------------------------------------------------------------
1 | /* pages/list/list.wxss */
--------------------------------------------------------------------------------
/pages/loading/loading.js:
--------------------------------------------------------------------------------
1 | // pages/loading/loading.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 | /**
19 | * 生命周期函数--监听页面初次渲染完成
20 | */
21 | onReady: function () {
22 |
23 | },
24 |
25 | /**
26 | * 生命周期函数--监听页面显示
27 | */
28 | onShow: function () {
29 |
30 | },
31 |
32 | /**
33 | * 生命周期函数--监听页面隐藏
34 | */
35 | onHide: function () {
36 |
37 | },
38 |
39 | /**
40 | * 生命周期函数--监听页面卸载
41 | */
42 | onUnload: function () {
43 |
44 | },
45 |
46 | /**
47 | * 页面相关事件处理函数--监听用户下拉动作
48 | */
49 | onPullDownRefresh: function () {
50 |
51 | },
52 |
53 | /**
54 | * 页面上拉触底事件的处理函数
55 | */
56 | onReachBottom: function () {
57 |
58 | },
59 |
60 | /**
61 | * 用户点击右上角分享
62 | */
63 | onShareAppMessage: function () {
64 |
65 | }
66 | })
--------------------------------------------------------------------------------
/pages/loading/loading.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-loading": "/component/loading/loading"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/loading/loading.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/pages/loading/loading.wxss:
--------------------------------------------------------------------------------
1 | /* pages/loading/loading.wxss */
2 | .custom-loading::after{
3 | border-top: 4rpx solid rgba(251, 206, 17, 1)!important;
4 | }
--------------------------------------------------------------------------------
/pages/modal/modal.js:
--------------------------------------------------------------------------------
1 | // pages/modal/modal.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | modal1: false,
9 | modal2: false,
10 | modal3: false,
11 | modal4: false,
12 | modal5: false,
13 | modal6: false,
14 | modal7: false,
15 | isloading: false
16 | },
17 |
18 | /**
19 | * 生命周期函数--监听页面加载
20 | */
21 | onLoad: function (options) {
22 |
23 | },
24 |
25 | inToggleModal1(e){
26 | console.log(e);
27 | this.setData({
28 | 'modal1': !this.data.modal1
29 | });
30 |
31 | },
32 |
33 | inToggleModal2(e) {
34 | console.log(e.type);
35 | this.setData({
36 | 'modal2': !this.data.modal2
37 | });
38 | },
39 |
40 | inToggleModal3(e) {
41 | console.log(e.type);
42 | this.setData({
43 | 'modal3': !this.data.modal3
44 | });
45 | },
46 |
47 | inToggleModal4(e) {
48 | console.log(e.type);
49 | this.setData({
50 | 'modal4': !this.data.modal4
51 | });
52 | },
53 |
54 | inToggleModal5(e) {
55 | console.log(e.type);
56 | this.setData({
57 | 'modal5': !this.data.modal5
58 | });
59 | },
60 |
61 | inToggleModal6(e) {
62 | console.log(e.type);
63 | this.setData({
64 | 'modal6': !this.data.modal6
65 | });
66 | },
67 |
68 | inToggleModal7(e) {
69 | const me = this;
70 | console.log(e.type);
71 | if (e.type === 'insuccess'){
72 | me.setData({
73 | 'isloading': true
74 | });
75 | setTimeout(function(){
76 | me.setData({
77 | 'isloading': false,
78 | 'modal7': false
79 | });
80 | wx.showToast({
81 | icon: 'none',
82 | title: '删除成功',
83 | });
84 | },2000);
85 | }
86 | else{
87 | me.setData({
88 | 'modal7': !me.data.modal7
89 | });
90 | }
91 |
92 | },
93 |
94 | /**
95 | * 用户点击右上角分享
96 | */
97 | onShareAppMessage: function () {
98 |
99 | }
100 | })
--------------------------------------------------------------------------------
/pages/modal/modal.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-button": "/component/button/button",
4 | "g-modal": "/component/modal/modal"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/modal/modal.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 普通对话框
5 |
6 |
7 |
8 |
9 | 成功提示框
10 |
11 |
12 |
13 |
14 | 错误提示框
15 |
16 |
17 |
18 |
19 | 删除提示框
20 |
21 |
22 |
23 |
24 | 自定义配图
25 |
26 |
27 |
28 |
29 | 自定义留言
30 |
31 | 自定义留言{{item}}
32 |
33 |
34 |
35 |
36 | 异步操作
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/pages/modal/modal.wxss:
--------------------------------------------------------------------------------
1 | /* pages/modal/modal.wxss */
2 | .wrap{
3 | padding:30rpx;
4 | }
5 | .item-modal + .item-modal{
6 | margin-top: 30rpx;
7 | }
8 | .custom-msg{
9 | line-height: 48rpx;
10 | }
--------------------------------------------------------------------------------
/pages/page/page.js:
--------------------------------------------------------------------------------
1 | // pages/page/page.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | onLoad: function (options) {
12 |
13 | },
14 |
15 | onShareAppMessage: function () {
16 |
17 | }
18 | })
--------------------------------------------------------------------------------
/pages/page/page.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationStyle": "custom",
3 | "navigationBarTextStyle": "white",
4 | "usingComponents": {
5 | "g-page": "/component/page/page",
6 | "g-top": "/component/top/top",
7 | "g-button": "/component/button/button"
8 | }
9 | }
--------------------------------------------------------------------------------
/pages/page/page.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | {{index}}
8 |
9 |
10 | 页脚
11 |
12 |
13 |
--------------------------------------------------------------------------------
/pages/page/page.wxss:
--------------------------------------------------------------------------------
1 | /* pages/page/page.wxss */
2 | scroll-view{
3 | height: 100%;
4 | }
5 | .custom-bom{
6 | padding:30rpx;
7 | text-align: center
8 | }
--------------------------------------------------------------------------------
/pages/radio/radio.js:
--------------------------------------------------------------------------------
1 | // pages/radio/radio.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | radiusActive: '芒果',
9 | radioData:[
10 | { id: 1, value: '白菜', mode:'list' },
11 | { id: 2, value: '茄子', mode: 'list' },
12 | { id: 3, value: '土豆', mode: 'list', align: 'right' },
13 | { id: 3, value: '花菜', mode: 'list', align:'right' }
14 | ],
15 | radioActive: '茄子',
16 |
17 | disabled:{
18 | active: '',
19 | state: true,
20 | checked:false
21 | }
22 | },
23 |
24 | /**
25 | * 生命周期函数--监听页面加载
26 | */
27 | onLoad: function (options) {
28 |
29 | },
30 |
31 | inChange1(e){
32 | this.setData({
33 | 'radioActive': e.detail.value
34 | });
35 | },
36 |
37 | inChange2(e) {
38 | this.setData({
39 | 'radiusActive': e.detail.value
40 | });
41 | },
42 |
43 | inDisabledChange(e){
44 | this.setData({
45 | 'disabled.checked': e.detail.active
46 | })
47 | },
48 |
49 | inTap(e){
50 | this.setData({
51 | 'disabled.state': !this.data.disabled.state
52 | });
53 | },
54 |
55 | /**
56 | * 用户点击右上角分享
57 | */
58 | onShareAppMessage: function () {
59 |
60 | }
61 | })
--------------------------------------------------------------------------------
/pages/radio/radio.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-radio-group": "/component/radio-group/radio-group",
5 | "g-radio": "/component/radio/radio",
6 | "g-button":"/component/button/button"
7 | }
8 | }
--------------------------------------------------------------------------------
/pages/radio/radio.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 切换禁用状态
16 |
--------------------------------------------------------------------------------
/pages/radio/radio.wxss:
--------------------------------------------------------------------------------
1 | /* pages/radio/radio.wxss */
2 | .wrap{
3 | padding: 30rpx;
4 | }
5 | .demo-box{
6 | margin-bottom: 30rpx;
7 | }
8 | .demo-radio{
9 | display: inline-block;
10 | box-sizing: border-box;
11 | padding:0 30rpx;
12 | width: 50%;
13 | }
--------------------------------------------------------------------------------
/pages/region/region.js:
--------------------------------------------------------------------------------
1 | // pages/region.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | state:{
9 | province: false,
10 | city: false,
11 | area: false
12 | },
13 | val:{
14 | province: null
15 | },
16 | actProvince:['福建省'],
17 | actCity: ['福建省', '泉州市'],
18 | actArea: [350000, 350200, 350203],
19 | },
20 |
21 | /**
22 | * 生命周期函数--监听页面加载
23 | */
24 | onLoad: function (options) {
25 |
26 | },
27 |
28 | //省市区选择
29 | inToggle(e){
30 | const me = this;
31 | const getData = e.currentTarget.dataset;
32 | const { state } = me.data;
33 | let actState, setState;
34 | switch (getData.type) {
35 | //省
36 | case 'province':
37 | actState = 'state.province';
38 | setState = state.province;
39 | break;
40 |
41 | //市
42 | case 'city':
43 | actState = 'state.city';
44 | setState = state.city;
45 | break;
46 |
47 | //区
48 | case 'area':
49 | actState = 'state.area';
50 | setState = state.area;
51 | break;
52 | }
53 | me.setData({
54 | [actState]: !setState
55 | })
56 |
57 |
58 | //确定
59 | if (e.type == 'enter'){
60 | const getData = e.currentTarget.dataset;
61 | let actVal
62 | switch (getData.type){
63 | //省
64 | case 'province':
65 | actVal = 'val.province';
66 | break;
67 |
68 | //市
69 | case 'city':
70 | actVal = 'val.city';
71 | break;
72 |
73 | //区
74 | case 'area':
75 | actVal = 'val.area';
76 | break;
77 | }
78 | me.setData({
79 | [actVal]: e.detail
80 | })
81 | console.log(e.detail)
82 | }
83 | },
84 |
85 | /**
86 | * 用户点击右上角分享
87 | */
88 | onShareAppMessage: function () {
89 |
90 | }
91 | })
--------------------------------------------------------------------------------
/pages/region/region.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-list": "/component/list/list",
5 | "g-region": "/component/region/region"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/region/region.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{val.province?(val.province.province.value):"请选择"}}
5 |
6 |
7 |
8 |
9 |
10 |
11 | {{val.city?(val.city.province.value + '-' + val.city.city.value):"请选择"}}
12 |
13 |
14 |
15 |
16 |
17 |
18 | {{val.area?(val.area.province.value + '-' + val.area.city.value + '-' + val.area.area.value):"请选择"}}
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/pages/region/region.wxss:
--------------------------------------------------------------------------------
1 | /* pages/region.wxss */
--------------------------------------------------------------------------------
/pages/search/search.js:
--------------------------------------------------------------------------------
1 | // pages/search/search.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | keyword:''
9 | },
10 |
11 | onLoad: function (options) {
12 |
13 | },
14 |
15 | inChange(e){
16 | console.log(e)
17 | },
18 |
19 | inSubmit(e){
20 | console.log(e)
21 | this.setData({
22 | 'keyword': e.detail.value
23 | })
24 | },
25 |
26 | inClear(e) {
27 | console.log('clear')
28 | this.setData({
29 | 'keyword': ''
30 | })
31 | },
32 |
33 |
34 | onShareAppMessage: function () {
35 |
36 | }
37 | })
--------------------------------------------------------------------------------
/pages/search/search.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-search": "/component/search/search"
4 | }
5 | }
--------------------------------------------------------------------------------
/pages/search/search.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/pages/search/search.wxss:
--------------------------------------------------------------------------------
1 | /* pages/search/search.wxss */
--------------------------------------------------------------------------------
/pages/size/size.js:
--------------------------------------------------------------------------------
1 | // pages/size/size.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 用户点击右上角分享
13 | */
14 | onShareAppMessage: function () {
15 |
16 | }
17 | })
--------------------------------------------------------------------------------
/pages/size/size.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-size": "/component/size/size"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/size/size.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | h{{index}}尺寸文本
4 | h1加粗文本
5 | h2自定义颜色
6 | h3左对齐
7 | h4居中对齐
8 | h5右对齐
9 |
--------------------------------------------------------------------------------
/pages/size/size.wxss:
--------------------------------------------------------------------------------
1 | /* pages/size/size.wxss */
2 | .wrap{
3 | padding: 40rpx 30rpx 0;
4 | }
5 | .demo-size{
6 | text-align: center;
7 | padding:30rpx 0;
8 | }
9 |
--------------------------------------------------------------------------------
/pages/swiper/swiper.js:
--------------------------------------------------------------------------------
1 | // pages/swiper/swiper.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | slide: 2,
9 | list: [
10 | { poster: "http://t4.market.mi-img.com/thumbnail/jpeg/w480q70/ThemeMarket/0226a258415a44e9933dffd9042a069a80e17885d" },
11 | { poster: "http://t1.market.mi-img.com/thumbnail/jpeg/w480q70/ThemeMarket/05a4f6566748645330207a8633ad07a6958f3e876" },
12 | { poster: "http://t1.market.mi-img.com/thumbnail/jpeg/w480q70/ThemeMarket/0543ab46f08a34d092f3b92bbf7c5e100f8a02292" },
13 | { poster: "http://t4.market.xiaomi.com/thumbnail/jpeg/w480q70/ThemeMarket/08a4ea486e8db40d715d4817f79095e8900b8beea" },
14 | { poster: "http://t3.market.xiaomi.com/thumbnail/jpeg/w480q70/ThemeMarket/04e445b5a613fd7f83a1b1085e73d426f53439dc9" },
15 | ]
16 | },
17 |
18 | onLoad (options) {
19 |
20 | },
21 |
22 | onShareAppMessage: function () {
23 |
24 | }
25 | })
--------------------------------------------------------------------------------
/pages/swiper/swiper.json:
--------------------------------------------------------------------------------
1 | {
2 | "disableScroll":true,
3 | "usingComponents": {
4 | "g-swiper": "/component/swiper/swiper"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/swiper/swiper.wxml:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/pages/swiper/swiper.wxss:
--------------------------------------------------------------------------------
1 | /* pages/swiper/swiper.wxss */
--------------------------------------------------------------------------------
/pages/switch/switch.js:
--------------------------------------------------------------------------------
1 | // pages/switch/switch.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 | inChange(e){
19 | console.log(e.detail);
20 | },
21 |
22 | /**
23 | * 用户点击右上角分享
24 | */
25 | onShareAppMessage: function () {
26 |
27 | }
28 | })
--------------------------------------------------------------------------------
/pages/switch/switch.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-list": "/component/list/list",
5 | "g-switch": "/component/switch/switch"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/switch/switch.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/pages/switch/switch.wxss:
--------------------------------------------------------------------------------
1 | /* pages/switch/switch.wxss */
--------------------------------------------------------------------------------
/pages/tab/tab.js:
--------------------------------------------------------------------------------
1 | // pages/tabs/tabs.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | active1: 't1',
9 | active2: 't2',
10 | active3: 't1',
11 | active4: 't1',
12 | tabData:[],
13 | customData:[
14 | { key: 't1', value: '菜单1' }, { key: 't2', value: '菜单2' }, { key: 't3', value: '菜单3' }
15 | ]
16 | },
17 |
18 | /**
19 | * 生命周期函数--监听页面加载
20 | */
21 | onLoad: function (options) {
22 | const me = this;
23 |
24 | let { tabData } = me.data;
25 | for(let x=1; x<9; x++){
26 | tabData.push({ key: 't'+x, value:'菜单'+x });
27 | }
28 | me.setData({
29 | 'tabData': tabData
30 | });
31 | },
32 |
33 | inTapTab1(e){
34 | this.setData({
35 | 'active1': e.detail.key
36 | });
37 | },
38 |
39 | inTapTab2(e) {
40 | this.setData({
41 | 'active2': e.detail.key
42 | });
43 | },
44 |
45 | inTapTab3(e) {
46 | this.setData({
47 | 'active3': e.detail.key
48 | });
49 | },
50 |
51 | inTapTab4(e) {
52 | this.setData({
53 | 'active4': e.detail.key
54 | });
55 | },
56 |
57 | /**
58 | * 用户点击右上角分享
59 | */
60 | onShareAppMessage: function () {
61 |
62 | }
63 | })
--------------------------------------------------------------------------------
/pages/tab/tab.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-tabs": "/component/tabs/tabs",
5 | "g-tab": "/component/tab/tab"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/tab/tab.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/pages/tab/tab.wxss:
--------------------------------------------------------------------------------
1 | /* pages/tabs/tabs.wxss */
2 | .demo-tabs{
3 | color: rgba(255,255,255, .5)!important;
4 | background-color: #2ca9e1!important;
5 | box-shadow: 0 10rpx 20rpx rgba(0,0,0, .07);
6 | }
7 | .demo-tab-color{
8 | color: rgba(255,255,255, 1)!important;
9 | }
10 | .demo-tab-border{
11 | bottom: 10rpx!important;
12 | border-color: rgba(255,255,255, 1)!important;
13 | }
--------------------------------------------------------------------------------
/pages/textarea/textarea.js:
--------------------------------------------------------------------------------
1 | // pages/textarea/textarea.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | /**
12 | * 生命周期函数--监听页面加载
13 | */
14 | onLoad: function (options) {
15 |
16 | },
17 |
18 | /**
19 | * 用户点击右上角分享
20 | */
21 | onShareAppMessage: function () {
22 |
23 | }
24 | })
--------------------------------------------------------------------------------
/pages/textarea/textarea.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-input": "/component/input/input"
5 | }
6 | }
--------------------------------------------------------------------------------
/pages/textarea/textarea.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/pages/textarea/textarea.wxss:
--------------------------------------------------------------------------------
1 | /* pages/textarea/textarea.wxss */
2 | .custom-input,
3 | .custom-input textarea{
4 | background-color: #fcfae7!important;
5 | }
--------------------------------------------------------------------------------
/pages/top/top.js:
--------------------------------------------------------------------------------
1 | // pages/top/top.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 |
9 | },
10 |
11 | onLoad: function (options) {
12 |
13 | },
14 |
15 | onShareAppMessage: function () {
16 |
17 | }
18 | })
--------------------------------------------------------------------------------
/pages/top/top.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationStyle": "custom",
3 | "navigationBarTextStyle": "white",
4 | "usingComponents": {
5 | "g-top": "/component/top/top"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/top/top.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/pages/top/top.wxss:
--------------------------------------------------------------------------------
1 | /* pages/top/top.wxss */
--------------------------------------------------------------------------------
/pages/upload/upload.js:
--------------------------------------------------------------------------------
1 | // pages/upload/upload.js
2 | Page({
3 |
4 | /**
5 | * 页面的初始数据
6 | */
7 | data: {
8 | uploadImgData:[],
9 | uploadImgData1:[
10 | {
11 | src: 'http://t1.market.mi-img.com/thumbnail/jpeg/w480q70/ThemeMarket/05a4f6566748645330207a8633ad07a6958f3e876',
12 | imageurl: 'https://www.xxxx/xx/xxx.jpg'
13 | },
14 | {
15 | src: 'http://t1.market.mi-img.com/thumbnail/jpeg/w480q70/ThemeMarket/0543ab46f08a34d092f3b92bbf7c5e100f8a02292',
16 | imageurl: 'https://www.xxxx/xx/xxx.jpg'
17 | },
18 | ]
19 | },
20 |
21 | /**
22 | * 生命周期函数--监听页面加载
23 | */
24 | onLoad: function (options) {
25 |
26 | },
27 |
28 | inDelImg(e){
29 | this.setData({
30 | uploadImgData: e.detail.item
31 | })
32 | console.log(e.detail)
33 | },
34 | inUploadImg(e){
35 | this.setData({
36 | uploadImgData: e.detail
37 | })
38 | console.log(e.detail)
39 | },
40 |
41 | inDelImg1(e) {
42 | this.setData({
43 | uploadImgData1: e.detail.item
44 | })
45 | console.log(e.detail)
46 | },
47 | inUploadImg1(e) {
48 | this.setData({
49 | uploadImgData1: e.detail
50 | })
51 | console.log(e.detail)
52 | },
53 |
54 | /**
55 | * 用户点击右上角分享
56 | */
57 | onShareAppMessage: function () {
58 |
59 | }
60 | })
--------------------------------------------------------------------------------
/pages/upload/upload.json:
--------------------------------------------------------------------------------
1 | {
2 | "usingComponents": {
3 | "g-box": "/component/box/box",
4 | "g-list": "/component/list/list",
5 | "g-upload": "/component/upload/upload"
6 | }
7 | }
--------------------------------------------------------------------------------
/pages/upload/upload.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/pages/upload/upload.wxss:
--------------------------------------------------------------------------------
1 | /* pages/upload/upload.wxss */
--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "项目配置文件。",
3 | "packOptions": {
4 | "ignore": []
5 | },
6 | "setting": {
7 | "urlCheck": true,
8 | "es6": true,
9 | "enhance": true,
10 | "postcss": true,
11 | "minified": true,
12 | "newFeature": true,
13 | "coverView": true,
14 | "nodeModules": false,
15 | "autoAudits": false,
16 | "showShadowRootInWxmlPanel": true,
17 | "scopeDataCheck": false,
18 | "uglifyFileName": false,
19 | "checkInvalidKey": true,
20 | "checkSiteMap": true,
21 | "uploadWithSourceMap": true,
22 | "useMultiFrameRuntime": true,
23 | "babelSetting": {
24 | "ignore": [],
25 | "disablePlugins": [],
26 | "outputPath": ""
27 | },
28 | "useIsolateContext": true,
29 | "useCompilerModule": true,
30 | "userConfirmedUseCompilerModuleSwitch": false,
31 | "packNpmManually": false,
32 | "packNpmRelationList": [],
33 | "bundle": false,
34 | "useApiHook": true,
35 | "useApiHostProcess": true
36 | },
37 | "compileType": "miniprogram",
38 | "libVersion": "2.9.3",
39 | "appid": "wxccd02aa3adde2f9b",
40 | "projectname": "GUI",
41 | "isGameTourist": false,
42 | "simulatorType": "wechat",
43 | "simulatorPluginLibVersion": {},
44 | "condition": {
45 | "search": {
46 | "list": []
47 | },
48 | "conversation": {
49 | "list": []
50 | },
51 | "plugin": {
52 | "list": []
53 | },
54 | "game": {
55 | "currentL": -1,
56 | "list": []
57 | },
58 | "gamePlugin": {
59 | "list": []
60 | },
61 | "miniprogram": {
62 | "list": [
63 | {
64 | "id": -1,
65 | "name": "input",
66 | "pathName": "pages/input/input",
67 | "query": ""
68 | },
69 | {
70 | "id": -1,
71 | "name": "list",
72 | "pathName": "pages/list/list",
73 | "query": ""
74 | },
75 | {
76 | "id": -1,
77 | "name": "flex",
78 | "pathName": "pages/flex/flex",
79 | "query": ""
80 | },
81 | {
82 | "id": -1,
83 | "name": "button",
84 | "pathName": "pages/button/button",
85 | "query": ""
86 | },
87 | {
88 | "id": -1,
89 | "name": "textarea",
90 | "pathName": "pages/textarea/textarea",
91 | "query": ""
92 | },
93 | {
94 | "id": -1,
95 | "name": "radio",
96 | "pathName": "pages/radio/radio",
97 | "query": ""
98 | },
99 | {
100 | "id": -1,
101 | "name": "checkbox",
102 | "pathName": "pages/checkbox/checkbox",
103 | "query": ""
104 | },
105 | {
106 | "id": -1,
107 | "name": "switch",
108 | "pathName": "pages/switch/switch",
109 | "query": ""
110 | },
111 | {
112 | "id": -1,
113 | "name": "loading",
114 | "pathName": "pages/loading/loading",
115 | "query": ""
116 | },
117 | {
118 | "id": -1,
119 | "name": "modal",
120 | "pathName": "pages/modal/modal",
121 | "query": ""
122 | },
123 | {
124 | "id": -1,
125 | "name": "drawer",
126 | "pathName": "pages/drawer/drawer",
127 | "query": ""
128 | },
129 | {
130 | "id": 11,
131 | "name": "tab",
132 | "pathName": "pages/tab/tab",
133 | "query": ""
134 | },
135 | {
136 | "id": -1,
137 | "name": "line",
138 | "pathName": "pages/line/line",
139 | "query": ""
140 | },
141 | {
142 | "id": -1,
143 | "name": "size",
144 | "pathName": "pages/size/size",
145 | "query": ""
146 | },
147 | {
148 | "id": -1,
149 | "name": "gui",
150 | "pathName": "pages/gui/gui",
151 | "query": ""
152 | },
153 | {
154 | "id": 15,
155 | "name": "gesture",
156 | "pathName": "pages/gesture/gesture",
157 | "query": ""
158 | },
159 | {
160 | "id": -1,
161 | "name": "region",
162 | "pathName": "pages/region/region",
163 | "query": ""
164 | },
165 | {
166 | "id": -1,
167 | "name": "clip",
168 | "pathName": "pages/clip/clip",
169 | "query": "",
170 | "scene": null
171 | },
172 | {
173 | "id": -1,
174 | "name": "宫格",
175 | "pathName": "pages/grid/grid",
176 | "query": "",
177 | "scene": null
178 | },
179 | {
180 | "id": 19,
181 | "name": "索引",
182 | "pathName": "pages/indexes/indexes",
183 | "query": "",
184 | "scene": null
185 | },
186 | {
187 | "id": 20,
188 | "name": "drop",
189 | "pathName": "pages/drop/drop",
190 | "query": "",
191 | "scene": null
192 | },
193 | {
194 | "id": 21,
195 | "name": "swiper",
196 | "pathName": "pages/swiper/swiper",
197 | "query": "",
198 | "scene": null
199 | },
200 | {
201 | "id": -1,
202 | "name": "吸顶",
203 | "pathName": "pages/fixed/fixed",
204 | "query": "",
205 | "scene": null
206 | },
207 | {
208 | "id": -1,
209 | "name": "upload",
210 | "pathName": "pages/upload/upload",
211 | "query": "",
212 | "scene": null
213 | },
214 | {
215 | "id": 24,
216 | "name": "自定也头部",
217 | "pathName": "pages/top/top",
218 | "query": "",
219 | "scene": null
220 | },
221 | {
222 | "id": -1,
223 | "name": "page",
224 | "pathName": "pages/page/page",
225 | "query": "",
226 | "scene": null
227 | },
228 | {
229 | "id": -1,
230 | "name": "search",
231 | "pathName": "pages/search/search",
232 | "query": "",
233 | "scene": null
234 | }
235 | ]
236 | }
237 | }
238 | }
--------------------------------------------------------------------------------
/sitemap.json:
--------------------------------------------------------------------------------
1 | {
2 | "desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
3 | "rules": [{
4 | "action": "allow",
5 | "page": "*"
6 | }]
7 | }
--------------------------------------------------------------------------------