You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<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 :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" 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: { stackFromEnd:{ type: Boolean, default:false }, enableBackToTop: { type: [Boolean, String], default: false }, scrollY: { type: [Boolean, String], default: false }, border: { type: Boolean, default: true }, renderReverse:{ type: Boolean, default: false } }, // provide() {
// return {
// list: this
// };
// },
created() { this.firstChildAppend = false; }, methods: { loadMore(e) { this.$emit('scrolltolower'); }, scroll(e) { this.$emit('scroll', e); } } }; </script> <style lang="scss"> $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>
|