list

components/list-nav-bar/list-nav-bar.js

@@ -0,0 +1,52 @@
+const app = getApp()
+Component({
+
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        showNavBtn: {
+            type: Boolean,
+            value: true
+        },
+        title: {
+            type: String,
+            value: '标题'
+        },
+        color: {
+            type: String,
+            value: '#fff'
+        },
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        navBarHeight: app.globalData.navBarHeight,
+        menuRight: app.globalData.menuRight,
+        menuTop: app.globalData.menuTop,
+        menuHeight: app.globalData.menuHeight,
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        // 回退
+        navBack() {
+          wx.navigateBack()
+          this.triggerEvent('onBack')
+        },
+        // 回主页
+        // navHome() {
+        //   wx.switchTab({
+        //     url: '/src/pages/home/home'
+        //   })
+        //   this.triggerEvent('onHome')
+        // },
+        // navIcon() {
+        //   this.triggerEvent('onIcon')
+        // }
+      },
+})

components/list-nav-bar/list-nav-bar.json

@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {}
+  }

components/list-nav-bar/list-nav-bar.wxml

@@ -0,0 +1,28 @@
+<view class="navbar" style="height:{{navBarHeight}}px; background:#3c8bf6;" >
+  <view class="navbar-container">
+    <!-- 导航按钮 -->
+    <view wx:if="{{showNavBtn}}" style="z-index: 999999;">
+      <!-- 默认显示返回，若添加isShowHome属性则显示主页，添加isShowCustomIcon则显示用户自定义icon -->
+      <!-- <view class="navbar-btn" wx:if="{{navIcon}}" bindtap="navBtn">
+        <image class="navbar-icon custom-icon-class" src="{{navIcon}}"></image>
+      </view> -->
+      <!-- <view class="navbar-btn" wx:elif="{{navHome}}" bindtap="navHome">
+        <image class="navbar-icon custom-icon-class" src="./images/home.svg"></image>
+      </view> -->
+      <view class="navbar-btn" bind:tap="navBack">
+        <image class="navbar-icon custom-icon-class" src="../../images/back.png"></image>
+      </view>
+    </view>
+    <!-- 中间标题 -->
+    <view class="navbar_title" style="color: {{color}};" >
+      <text>{{title}}</text>
+      <!-- 具名插槽 position: relative;left: -80rpx;-->
+      <!-- <view style="display: inline-block;">
+        <slot name="titleSlot"></slot>
+      </view> -->
+    </view>
+  </view>
+</view>
+
+<!-- 占位，高度与顶部栏一样 -->
+<view style="height:{{navBarHeight}}px;"></view>

components/list-nav-bar/list-nav-bar.wxss

@@ -0,0 +1,65 @@
+.navbar {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    color: #fff;
+    background: #3c8bf6;
+    display: flex;
+    flex-flow:column;
+    justify-content: flex-end; 
+  }
+  
+  .navbar-container {
+    
+    height: 100rpx;
+    position: relative;
+    /* display: flex;
+    flex-flow:row;
+    align-items: center;
+    justify-content: center; */
+    /* position: relative; */
+     /*  width: 100vw;
+    height: 64rpx;
+    z-index: 100;
+    display: flex;
+    box-sizing: border-box; */
+  }
+  
+  .navbar-btn {
+    display: flex;
+    flex-flow:row;
+    align-items: center;
+    justify-content: center;
+    margin-left: 20px;
+    width: 60rpx;
+    height: 100rpx; 
+    /* position: absolute; */
+    /* left: 24rpx;
+    width: 64rpx;
+    height: 64rpx; */
+    /* 
+   
+  
+    z-index: 100;
+    display: flex;
+    align-items: center; */
+  }
+  
+  .navbar-icon {
+    width: 36rpx;
+    height: 36rpx;
+  }
+  
+  .navbar_title {
+    position: absolute;
+    width: 100%;
+    height: 100rpx;
+    line-height: 100rpx;
+    font-weight: 700;
+    text-align: center;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+