初始化

2024-12-06 16:18:22 +08:00
commit 884dd70d83
751 changed files with 60883 additions and 0 deletions
@@ -0,0 +1,105 @@
+
+
+Component({
+  options: {
+    addGlobalClass: true,
+    pureDataPattern: /^_/,
+    multipleSlots: true
+  },
+  properties: {
+    vtabs: {type: Array, value: []},
+    tabBarClass: {type: String, value: ''},
+    activeClass: {type: String, value: ''},
+    tabBarLineColor: {type: String, value: '#07c160'},
+    tabBarInactiveTextColor: {type: String, value: '#000000'},
+    tabBarActiveTextColor: {type: String, value: '#07c160'},
+    tabBarInactiveBgColor: {type: String, value: '#eeeeee'},
+    tabBarActiveBgColor: {type: String, value: '#ffffff'},
+    activeTab: {type: Number, value: 0},
+    animation: {type: Boolean, value: true}
+  },
+  data: {
+    currentView: 0,
+    contentScrollTop: 0,
+    _heightRecords: [],
+    _contentHeight: {}
+  },
+  observers: {
+    activeTab: function activeTab(_activeTab) {
+      this.scrollTabBar(_activeTab)
+    }
+  },
+  relations: {
+    '../vtabs-content/vtabs-content': {
+      type: 'child',
+      linked: function linked(target) {
+        const _this = this
+
+        target.calcHeight(function (rect) {
+          _this.data._contentHeight[target.data.tabIndex] = rect.height
+          if (_this._calcHeightTimer) {
+            clearTimeout(_this._calcHeightTimer)
+          }
+          _this._calcHeightTimer = setTimeout(function () {
+            _this.calcHeight()
+          }, 100)
+        })
+      },
+      unlinked: function unlinked(target) {
+        delete this.data._contentHeight[target.data.tabIndex]
+      }
+    }
+  },
+  lifetimes: {
+    attached: function attached() {}
+  },
+  methods: {
+    calcHeight: function calcHeight() {
+      const length = this.data.vtabs.length
+      const _contentHeight = this.data._contentHeight
+      const _heightRecords = []
+      let temp = 0
+      for (let i = 0; i < length; i++) {
+        _heightRecords[i] = temp + (_contentHeight[i] || 0)
+        temp = _heightRecords[i]
+      }
+      this.data._heightRecords = _heightRecords
+    },
+    scrollTabBar: function scrollTabBar(index) {
+      const len = this.data.vtabs.length
+      if (len === 0) return
+      let currentView = index < 6 ? 0 : index - 5
+      if (currentView >= len) currentView = len - 1
+      this.setData({currentView})
+    },
+    handleTabClick: function handleTabClick(e) {
+      const _heightRecords = this.data._heightRecords
+      const index = e.currentTarget.dataset.index
+      const contentScrollTop = _heightRecords[index - 1] || 0
+      this.triggerEvent('tabclick', {index})
+      this.setData({
+        activeTab: index,
+        contentScrollTop
+      })
+    },
+    handleContentScroll: function handleContentScroll(e) {
+      const _heightRecords = this.data._heightRecords
+      if (_heightRecords.length === 0) return
+      const length = this.data.vtabs.length
+      const scrollTop = e.detail.scrollTop
+      let index = 0
+      if (scrollTop >= _heightRecords[0]) {
+        for (let i = 1; i < length; i++) {
+          if (scrollTop >= _heightRecords[i - 1] && scrollTop < _heightRecords[i]) {
+            index = i
+            break
+          }
+        }
+      }
+      if (index !== this.data.activeTab) {
+        this.triggerEvent('change', {index})
+        this.setData({activeTab: index})
+      }
+    }
+  }
+})
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
@@ -0,0 +1,42 @@
+
+
+<view class="weui-vtabs">
+  <view class="weui-vtabs-bar__wrp {{tabBarClass}}">
+    <scroll-view 
+      scroll-y
+      class="weui-vtabs-bar__scrollview"
+      scroll-into-view="weui-vtabs-item__{{currentView}}"
+    >
+      <view class="weui-vtabs-bar__content">
+        <block wx:for="{{vtabs}}" wx:key="title">
+          <view 
+            id="weui-vtabs-item__{{index}}"
+            class="{{activeTab === index ? 'weui-vtabs-bar__activeitem' : ''}} weui-vtabs-bar__item"
+            data-index="{{index}}"
+
+            bindtap="handleTabClick"
+          >
+            <view class="weui-vtabs-bar__title {{activeTab === index ? activeClass : ''}}">
+              <text class="">{{item.title}}</text>
+            </view>
+          </view>
+        </block>
+      </view>
+    </scroll-view>
+  </view>
+  <view class="weui-vtabs-content__wrp">
+    <scroll-view 
+      scroll-y
+      class="weui-vtabs-content__scrollview" 
+      scroll-top="{{contentScrollTop}}"
+      scroll-with-animation="{{animation}}"
+      bindscroll="handleContentScroll"
+    >
+      <view class="weui-vtabs-content">
+        <slot ></slot>
+      </view>
+    </scroll-view>
+  </view>
+</view>
+<!-- 
+            style="background-color: {{activeTab === index ? tabBarActiveBgColor : tabBarInactiveBgColor}}; color: {{activeTab === index ? tabBarActiveTextColor : tabBarInactiveTextColor}}; border-left-color: {{activeTab === index ? tabBarLineColor : tabBarInactiveBgColor}}" -->
@@ -0,0 +1,53 @@
+.weui-vtabs {
+  width: 100%;
+  height: 100%;
+  display: flex
+}
+
+.weui-vtabs-bar__wrp {
+  width: 110px;
+  height: 100%;
+  background: #eeeeee;
+}
+
+.weui-vtabs-bar__scrollview {
+  height: 100%
+}
+
+.weui-vtabs-bar__content {
+  width: 110px;
+  height: 100%
+}
+
+.weui-vtabs-bar__item {
+  display: inline-block;
+  width: 110px;
+  height: 55px;
+  border-left: 4px solid transparent
+}
+
+.weui-vtabs-bar__title {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden
+}
+
+.weui-vtabs-content__wrp {
+  overflow: hidden;
+  flex: 1;
+  height: 100%
+}
+
+.weui-vtabs-content__scrollview {
+  height: 100%
+}
+
+.weui-vtabs-content {
+  height: 100%
+}