在一个数据库集合中,我需要把所有数据分类展示在页面中,比如:我想把一个数据库中的集合分别显示在,我要找车,我要找人,我找货车,我要找货,等四个类目中,发布信息界面,也是按,我要找车,我要找人,我找货车,我要找货,来区分发布信息的,该如何去写代码?效果如图:
wxml代码:
<segment items="{{items}}" defaultIndex="0" binditemchanged="onSegmentItemChanged">
<view slot="0" class="segment-page people">
<view class="quanbu-group">
<view class="shu-group">|</view>
<text>全部信息(共有500条信息)</text>
<view class="paixu-group">按出发时间排序</view>
</view>
<view class="people-group" wx:for="{{carpoolings}}" wx:key="carpooling" wx:for-item="carpooling">
<view class="people-left">
<view class="people-title">
<view class="people-top">
<text>顶</text>
</view>
<view class="departure-time">出发:</view>
<view class="people-start">{{carpooling.date}}</view>
</view>
<view class="people-route">
<text class="people-content">{{carpooling.departure_address}}</text>
<text class="people-arrow">→ </text>
<text class="purpose-content">{{carpooling.end}}</text>
<text>(</text>
<text class="channel-centent">{{carpooling.channel}}</text>
<text>)</text>
</view>
<view class="people-seat-list">
<view class="people-model-title">车型:</view>
<view class="people-model">{{carpooling.vehicle_type}}</view>
<view class="people-seat">{{carpooling.people}}空位</view>
</view>
<view class="people-details">
<view class="people-remarks">备注:</view>
<text>{{carpooling.content}}</text>
</view>
<view class="release-list">
<view class="release">发布:</view>
<view class="detail-time">2022/9/2 8:35:36</view>
</view>
</view>
<view class="people-right">
<button class="people-contact">
<image src="/images/telephone.png"></image>
</button>
</view>
</view>
</view>
</segment>
js代码:
data: {
items:['我要找车','我要找人','我找货车','我要找货'],
},
loadcarpoolings:function(){
const that=this;
db.collection("carpooling").limit(10).get().then(res=>{
console.log(res);
const carpoolings = res.data
that.setData({
carpoolings:carpoolings
})
})
},