### 更改为单个数据，原组件是左右 > 根目录下找到该组件进行更改 * 在中间加入自己定义的all ``` <template> <view class="u-waterfall"> <view id="u-left-column" class="u-column"><slot name="left" :leftList="leftList"></slot></view> <view id="u-right-column" class="u-column"><slot name="right" :rightList="rightList"></slot></view> <view id="u-all-column" class="u-column u-all"><slot name="all" :allList="allList"></slot></view> </view> </template> ``` * splitData下更改即可 ``` async splitData() { if (!this.tempList.length) return; let leftRect = await this.$uGetRect('#u-left-column'); let rightRect = await this.$uGetRect('#u-right-column'); let allRect = await this.$uGetRect('#u-all-column'); if(!item) return ; this.allList.push(item); }, ``` * clear也要加 ``` // 清空数据列表 clear() { this.leftList = []; this.rightList = []; this.allList = [] // 同时清除父组件列表中的数据 this.$emit('input', []); this.tempList = []; }, ``` * 样式 ``` .u-all{ flex: unset !important; width: 100%; } ``` > 使用 ```vue <template> <view> <u-waterfall v-model="activeList" ref="uWaterfall"> <template v-slot:all="{allList}"> <view class="learnList"> <view class="item" v-for="(item,index) in allList" :key="index" @click="info(item)"> <text>{{item.noticeTitle}}</text> </view> </view> </template> </u-waterfall> <u-loadmore bg-color="#fff" :status="loadStatus" @loadmore="getActiveList()"></u-loadmore> </view> </template> <script> export default { data() { return { active: 0, activeList: [], loadStatus: 'loadmore', // 分页 page: { num: 0, limit: 10 }, moreStatus: true, // 个人求职，加载更多 }; }, onLoad() { this.getActiveList() }, onReachBottom() { // 个人求职 if (this.moreStatus == true) { this.loadStatus = 'loading'; // 模拟数据加载 setTimeout(() => { this.getActiveList(); this.loadStatus = 'loadmore'; }, 1000) } }, methods: { select(index) { this.active = index; this.page.num = 0; this.$refs.uWaterfall.clear(); this.moreStatus = true this.loadStatus = 'loadmore'; this.getActiveList() }, getActiveList() { this.page.num++; this.$u.get("/system/notice/list", { noticeType: this.tabCate[this.active].id, pageNum: this.page.num, pageSize: this.page.limit }).then(res => { if (res.code == 200) { let resData = res.rows this.activeList = this.activeList.concat(resData) if (resData.length == 0 || res.total <= this.activeList.length) { this.moreStatus = false this.loadStatus = 'nomore'; } } }) }, } } </script> <style lang="scss"> </style> ```