com-tabs-wxs-list
v1.0.0
Published
uni-tabs下拉列表模板
Downloads
2
Readme
#com-tabs-wxs-list-refresh
<template>
<com-tabs-wxs-list-refresh
ref="COMTabsWxs"
:height="(windowHeight)"
class="page"
hasRefreshContainerBackgroundColor="#000"
minWidth="125rpx"
v-slot:defList="{props}"
tabsSticky>
<defList v-slot:row="{item, index}" :tab="props.tab" :index="props.index" :show="props.show" :current="props.current" :custom-data="props.customData">
<com-tabs-wxs-list-cell :key="index">
{{item}}
</com-tabs-wxs-list-cell>
</defList>
<!-- <view slot="pos">1</view>-->
<!-- <view slot="pre">2</view>-->
</com-tabs-wxs-list-refresh>
</template>
<script>
import ComTabsWxsListCell from "components/com-tabs-wxs-list/components/com-paging-cell/com-tabs-wxs-list-cell";
const app = getApp();
let {windowHeight} = uni.getSystemInfoSync();
console.log( uni.getSystemInfoSync() )
import comTabsWxsListRefresh from "components/com-tabs-wxs-list/com-tabs-wxs-list-refresh";
import defList from './defList'
export default {
options: {styleIsolation: 'shared'},
components: {
ComTabsWxsListCell,
comTabsWxsListRefresh,
defList,
},
onReady() {
// this.getTopViewHeight();
let colors = [
{
name: 'tab_1', //名称 必选
id: 'tab_1',// 唯一字段 必选
hasRefreshContainerBackgroundColor: '#429950',
swiperItemBackgroundColor: '#5f3bb0',
swiperBackgroundColor: 'pink',
tabsBackgroundColor: '#124881',
activeFontColor: '#bec3cb',
lineColor: '#ffbc36',
badge: 0, //占未开放
},
{
name: 'tab_2',
id: 'tab_2',
hasRefreshContainerBackgroundColor: '#429950',
swiperItemBackgroundColor: '#79b03b',
swiperBackgroundColor: '#444',
tabsBackgroundColor: '#a0481c',
activeFontColor: '#053891',
lineColor: '#ddd4d7',
badge: 0, //占未开放
},
]
this.$refs.COMTabsWxs.setTabs(new Array(6).fill({},).map((ov, index) => (Object.assign({}, colors[index % 2], {
name: `tab_${index}`,
id: `tab_${index}`
}))));
},
data() {
// #ifdef H5
windowHeight = windowHeight - (44 + 50); // header + tabber
// #endif
return {
topBottomViewHeight: 0,
windowHeight,
sendData: {},
};
},
onLoad: function (options) {
},
methods: {
getTopViewHeight() {
let view = uni.createSelectorQuery().in(this);
view.select('.topView').boundingClientRect();
view.exec(res => {
// console.log('总高度:' + JSON.stringify(res));
this.topBottomViewHeight = res[0].height
})
},
}
};
</script>
<style lang="scss">
</style>
<style lang="scss">
.page {
position: fixed;
height: 100vh;
width: 100%;
}
</style>