二期组件

components/Yl_Tabbar/index.js

@@ -0,0 +1,44 @@
+Component({
+  properties: {
+    list: Array,
+    callback: Function
+  },
+  lifetimes: {
+    attached: function () {
+      wx.getSystemInfo({
+        success: res => {
+          this.setData({
+            safeAreaBot: res.screenHeight - res.safeArea.bottom
+          })
+        }
+      })
+    },
+  },
+  options: {
+    addGlobalClass: true
+  },
+  data: {
+    safeAreaBot: 0,
+    show: false
+  },
+  methods: {
+    onClose() {
+      this.setData({
+        show: false
+      })
+    },
+    callback(e) {
+      console.log(e)
+      const {
+        item
+      } = e.currentTarget.dataset;
+      if (!item) return;
+      this.triggerEvent("callback", item)
+    },
+    /* open(){
+        this.setData({
+            show: true
+        })
+    } */
+  }
+})

components/Yl_Tabbar/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-popup": "@vant/weapp/popup/index"
+  }
+}

components/Yl_Tabbar/index.wxml

@@ -0,0 +1,25 @@
+<view class="tabbar" style="padding-bottom: {{safeAreaBot}}rpx;">
+  <navigator url="#" class="item" wx:for="{{list}}" wx:key="index" data-item="{{item}}" bindtap="callback">
+    <view class="icon" wx:if="{{item.icon}}">
+      <text class="iconfont {{item.icon}}" />
+    </view>
+    <view wx:else class="num line-1">{{item.num}}</view>
+    <view class="label line-1">{{item.label}}</view>
+  </navigator>
+</view>
+<view style="height: 98rpx;" style="padding-bottom: {{safeAreaBot}}rpx;" />
+
+<van-popup show="{{ show }}" position="bottom" bind:close="onClose">
+  <view class="title">
+    更多功能
+  </view>
+  <swiper indicator-dots style="height: 354rpx;">
+    <swiper-item>
+      <navigator url="#" class="swiper-item" wx:for="{{10}}" bindtap="onClose"></navigator>
+    </swiper-item>
+    <swiper-item>
+      <navigator url="#" class="swiper-item" wx:for="{{3}}" bindtap="onClose"></navigator>
+    </swiper-item>
+  </swiper>
+  <view class="tabbar" />
+</van-popup>

components/Yl_Tabbar/index.wxss

@@ -0,0 +1,67 @@
+.tabbar {
+  display: flex;
+  justify-content: space-around;
+  position: fixed;
+  height: 98rpx;
+  width: 100vw;
+  bottom: 0;
+  background-color: #fff;
+  z-index: 999;
+}
+
+.tabbar .item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 98rpx;
+  height: 98rpx;
+}
+
+.tabbar .item .icon {
+  width: 46rpx;
+  height: 46rpx;
+  text-align: center;
+  line-height: 46rpx;
+  color: #333333;
+}
+
+.tabbar .item .num {
+  width: 80%;
+  height: 46rpx;
+  font-size: 28rpx;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: bold;
+  color: #333333;
+}
+
+.tabbar .item .label {
+  height: 34rpx;
+  font-size: 24rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  color: #999999;
+  margin-top: 8rpx;
+}
+
+.title {
+  width: 100vw;
+  height: 90rpx;
+  line-height: 90rpx;
+  text-align: center;
+  box-sizing: border-box;
+  border-bottom: 1px solid #EEEEEE;
+  font-size: 28rpx;
+  font-family: PingFang SC-Regular, PingFang SC;
+  color: #333333;
+}
+
+swiper-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+
+.swiper-item {
+  width: 150rpx;
+  height: 150rpx;
+  background-color: red;
+}