李志伟 il y a 3 ans
Parent
révision
dc7741b206

+ 2
- 0
package-lock.json Voir le fichier

@@ -20702,6 +20702,7 @@
20702 20702
             },
20703 20703
             "stylus": {
20704 20704
               "version": "0.54.8",
20705
+              "integrity": "sha1-PaPmWWa8Vnp7BEv+DuzmU+CZ0Uc=",
20705 20706
               "dev": true,
20706 20707
               "peer": true,
20707 20708
               "requires": {
@@ -27332,6 +27333,7 @@
27332 27333
     },
27333 27334
     "miniprogram-compiler": {
27334 27335
       "version": "0.1.3",
27336
+      "integrity": "sha1-5eKXhts9yT5XSbZxJ/VjKSygaQ8=",
27335 27337
       "dev": true,
27336 27338
       "requires": {
27337 27339
         "glob": "^7.1.3",

+ 148
- 0
src/components/tabs/index.js Voir le fichier

@@ -0,0 +1,148 @@
1
+module.exports =
2
+/******/ (function(modules) { // webpackBootstrap
3
+/******/ 	// The module cache
4
+/******/ 	var installedModules = {};
5
+/******/
6
+/******/ 	// The require function
7
+/******/ 	function __webpack_require__(moduleId) {
8
+/******/
9
+/******/ 		// Check if module is in cache
10
+/******/ 		if(installedModules[moduleId]) {
11
+/******/ 			return installedModules[moduleId].exports;
12
+/******/ 		}
13
+/******/ 		// Create a new module (and put it into the cache)
14
+/******/ 		var module = installedModules[moduleId] = {
15
+/******/ 			i: moduleId,
16
+/******/ 			l: false,
17
+/******/ 			exports: {}
18
+/******/ 		};
19
+/******/
20
+/******/ 		// Execute the module function
21
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22
+/******/
23
+/******/ 		// Flag the module as loaded
24
+/******/ 		module.l = true;
25
+/******/
26
+/******/ 		// Return the exports of the module
27
+/******/ 		return module.exports;
28
+/******/ 	}
29
+/******/
30
+/******/
31
+/******/ 	// expose the modules object (__webpack_modules__)
32
+/******/ 	__webpack_require__.m = modules;
33
+/******/
34
+/******/ 	// expose the module cache
35
+/******/ 	__webpack_require__.c = installedModules;
36
+/******/
37
+/******/ 	// define getter function for harmony exports
38
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
39
+/******/ 		if(!__webpack_require__.o(exports, name)) {
40
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
41
+/******/ 		}
42
+/******/ 	};
43
+/******/
44
+/******/ 	// define __esModule on exports
45
+/******/ 	__webpack_require__.r = function(exports) {
46
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
47
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
48
+/******/ 		}
49
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
50
+/******/ 	};
51
+/******/
52
+/******/ 	// create a fake namespace object
53
+/******/ 	// mode & 1: value is a module id, require it
54
+/******/ 	// mode & 2: merge all properties of value into the ns
55
+/******/ 	// mode & 4: return value when already ns object
56
+/******/ 	// mode & 8|1: behave like require
57
+/******/ 	__webpack_require__.t = function(value, mode) {
58
+/******/ 		if(mode & 1) value = __webpack_require__(value);
59
+/******/ 		if(mode & 8) return value;
60
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
61
+/******/ 		var ns = Object.create(null);
62
+/******/ 		__webpack_require__.r(ns);
63
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
64
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
65
+/******/ 		return ns;
66
+/******/ 	};
67
+/******/
68
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
69
+/******/ 	__webpack_require__.n = function(module) {
70
+/******/ 		var getter = module && module.__esModule ?
71
+/******/ 			function getDefault() { return module['default']; } :
72
+/******/ 			function getModuleExports() { return module; };
73
+/******/ 		__webpack_require__.d(getter, 'a', getter);
74
+/******/ 		return getter;
75
+/******/ 	};
76
+/******/
77
+/******/ 	// Object.prototype.hasOwnProperty.call
78
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
79
+/******/
80
+/******/ 	// __webpack_public_path__
81
+/******/ 	__webpack_require__.p = "";
82
+/******/
83
+/******/
84
+/******/ 	// Load entry module and return exports
85
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
86
+/******/ })
87
+/************************************************************************/
88
+/******/ ({
89
+
90
+/***/ 5:
91
+/***/ (function(module, exports, __webpack_require__) {
92
+
93
+"use strict";
94
+
95
+
96
+Component({
97
+    options: {
98
+        addGlobalClass: true,
99
+        pureDataPattern: /^_/,
100
+        multipleSlots: true
101
+    },
102
+    properties: {
103
+        tabs: { type: Array, value: [] },
104
+        tabClass: { type: String, value: '' },
105
+        swiperClass: { type: String, value: '' },
106
+        activeClass: { type: String, value: '' },
107
+        tabUnderlineColor: { type: String, value: '#07c160' },
108
+        tabActiveTextColor: { type: String, value: '#000000' },
109
+        tabInactiveTextColor: { type: String, value: '#000000' },
110
+        tabBackgroundColor: { type: String, value: '#ffffff' },
111
+        activeTab: { type: Number, value: 0 },
112
+        swipeable: { type: Boolean, value: true },
113
+        animation: { type: Boolean, value: true },
114
+        duration: { type: Number, value: 500 }
115
+    },
116
+    data: {
117
+        currentView: 0
118
+    },
119
+    observers: {
120
+        activeTab: function activeTab(_activeTab) {
121
+            var len = this.data.tabs.length;
122
+            if (len === 0) return;
123
+            var currentView = _activeTab - 1;
124
+            if (currentView < 0) currentView = 0;
125
+            if (currentView > len - 1) currentView = len - 1;
126
+            this.setData({ currentView: currentView });
127
+        }
128
+    },
129
+    lifetimes: {
130
+        created: function created() {}
131
+    },
132
+    methods: {
133
+        handleTabClick: function handleTabClick(e) {
134
+            var index = e.currentTarget.dataset.index;
135
+            this.setData({ activeTab: index });
136
+            this.triggerEvent('tabclick', { index: index });
137
+        },
138
+        handleSwiperChange: function handleSwiperChange(e) {
139
+            var index = e.detail.current;
140
+            this.setData({ activeTab: index });
141
+            this.triggerEvent('change', { index: index });
142
+        }
143
+    }
144
+});
145
+
146
+/***/ })
147
+
148
+/******/ });

+ 4
- 0
src/components/tabs/index.json Voir le fichier

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

+ 20
- 0
src/components/tabs/index.wxml Voir le fichier

@@ -0,0 +1,20 @@
1
+<view class="weui-tabs">
2
+  <view class="weui-tabs-bar__wrp">
3
+    <scroll-view scroll-x scroll-into-view="item_{{currentView}}" scroll-with-animation="{{animation}}">
4
+      <view class="weui-tabs-bar__content">
5
+        <block wx:for="{{tabs}}" wx:key="title">
6
+          <view id="item_{{index}}" class="weui-tabs-bar__item" style="background-color: {{tabBackgroundColor}}; color: {{activeTab === index ? tabActiveTextColor : tabInactiveTextColor}};" bindtap="handleTabClick" data-index="{{index}}">
7
+            <view class="weui-tabs-bar__title {{tabClass}} {{activeTab === index ? activeClass : ''}}" style="border-bottom-color: {{activeTab === index ? tabUnderlineColor : 'transparent'}}">
8
+              <text class="">{{item.title}}</text>
9
+            </view>
10
+          </view>
11
+        </block>
12
+      </view>
13
+    </scroll-view>
14
+  </view>
15
+  <swiper class="{{swiperClass}}" current="{{activeTab}}" duration="{{duration}}" bindchange="handleSwiperChange">
16
+    <swiper-item wx:for="{{tabs}}" wx:key="title">
17
+      <slot name="tab-content-{{index}}"></slot>
18
+    </swiper-item>
19
+  </swiper>
20
+</view>

+ 1
- 0
src/components/tabs/index.wxss Voir le fichier

@@ -0,0 +1 @@
1
+.weui-tabs{width:100%}.weui-tabs-bar__wrp{width:100%;background:#fff}.weui-tabs-bar__content{width:100%;white-space:nowrap}.weui-tabs-bar__item{display:inline-block}.weui-tabs-bar__title{display:inline-block;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:transparent}