#

whycq

2024-03-28 b5c0993eb8043882eae85ce9ab1d860ff8bebf17

 uni_modules/uni-list/components/uni-list/uni-list.vue

New file
@@ -0,0 +1,108 @@
<template>
   <!-- #ifndef APP-NVUE -->
   <view class="uni-list uni-border-top-bottom">
      <view v-if="border" class="uni-list--border-top"></view>
      <slot />
      <view v-if="border" class="uni-list--border-bottom"></view>
   </view>
   <!-- #endif -->
   <!-- #ifdef APP-NVUE -->
   <list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
   <!-- #endif -->
</template>

<script>
/**
 * List 列表
 * @description 列表组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
 * @property {String}    border = [true|false]       标题
 */
export default {
   name: 'uniList',
   'mp-weixin': {
      options: {
         multipleSlots: false
      }
   },
   props: {
      enableBackToTop: {
         type: [Boolean, String],
         default: false
      },
      scrollY: {
         type: [Boolean, String],
         default: false
      },
      border: {
         type: Boolean,
         default: true
      }
   },
   // provide() {
   //    return {
   //       list: this
   //    };
   // },
   created() {
      this.firstChildAppend = false;
   },
   methods: {
      loadMore(e) {
         this.$emit('scrolltolower');
      }
   }
};
</script>
<style lang="scss" scoped>
$uni-bg-color:#ffffff;
$uni-border-color:#e5e5e5;
.uni-list {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   background-color: $uni-bg-color;
   position: relative;
   flex-direction: column;
}

.uni-list--border {
   position: relative;
   /* #ifdef APP-NVUE */
   border-top-color: $uni-border-color;
   border-top-style: solid;
   border-top-width: 0.5px;
   border-bottom-color: $uni-border-color;
   border-bottom-style: solid;
   border-bottom-width: 0.5px;
   /* #endif */
   z-index: -1;
}

/* #ifndef APP-NVUE */

.uni-list--border-top {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   height: 1px;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
   background-color: $uni-border-color;
   z-index: 1;
}

.uni-list--border-bottom {
   position: absolute;
   bottom: 0;
   right: 0;
   left: 0;
   height: 1px;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
   background-color: $uni-border-color;
}

/* #endif */
</style>