新建盐城德森项目

skyouc

2024-12-21 c9c263dc43ad90f95f24a036cee9e6b47afb596c

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

@@ -1,108 +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>
<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>