<template>
<view class="content">
<waterfall class="listview" :column-gap="11" :left-gap="16" :right-gap="16" :show-scrollbar="false" column-count="2" :enableBackToTop="true" :scroll-y="true">
<header>
<view class="n-search" >
<view class="search-wrapper" >
<view class="search-inner">
<text class="n-placeholder" >大家都在搜#啦啦啦啦#</text>
</view>
</view>
</view>
</header>
<refresh></refresh>
<cell class="cell" v-for="(item, index) in lists" >
<text class="cell-text">{{index}}</text>
</cell>
</waterfall>
</view> </template>
<script>
export default {
data() {
return {
lists: 30
}
},
onLoad() {
},
methods: {
}
} </script>
<style>
.content{
flex: 1;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.listview {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
/ #ifndef APP-NVUE /
display: flex;
flex-direction: column;
/ #endif /
/ #ifndef MP-ALIPAY /
flex-direction: column;
/ #endif /
justify-content: space-between;
}
.cell{
width: 332rpx;
height: 100rpx;
/ #ifndef APP-NVUE /
display: flex;
/ #endif /
align-items: center;
justify-content: center;
border: 1px solid #000;
}
.cell-text{
font-size: 20px;
}
.n-search{
padding: 0 32rpx;
background-color: #F8F8F8;
}
.mode2{
padding: 0;
}
.search-inner{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
border-radius: 16rpx;
height: 72rpx;
padding: 0 20rpx;
background-color: #fff;
}
.n-placeholder{
color: #C7C7C7;
font-size: 28rpx;
line-height: 72rpx;
margin-left: 8rpx;
} </style>
