link

The first post links: ext.dcloud.net.cn/plugin?id=2…

preface

Custom waterfall flow components, easy to use, a line of code can be done. Custom layout, do not use fixed template ~

usage

1. Import components

  import flowLayout from "@/components/eiml-flow/eiml-flow.vue"
  export default {
        components:{
            'flowLayout':flowLayout
        },
Copy the code

2. Use components

<flowLayout :columnNum="2"> <! Slot ="index" must be written like this, because within the space, <view v-for="(item,index) in list" V-bind :key="index" :slot="index"> </view> </flowLayout>Copy the code

Results the preview

The principle of analytic

Use slot in VUE to selectively display and retype the waterfall flow layout.

Due to the emasculation of slot function in wechat mini program, it can only be used by H5

1. Preload containers

In order to write a simple and universal component, there is a sacrifice. This code is preloading, rendering the entire interface in the container first, rendering it, then getting the height of the control exactly.

ChildCount: Indicates the number of slots

<scroll-view style="width: 0rpx; height: 0rpx;" > <view v-for="(item,index) in childCount" v-bind:key="index"> <slot :name="index"></slot> </view> </scroll-view>Copy the code

2. Display the layout

The hidden layout is shown above, and the actual layout is shown below.

ColumnWidth: Calculates the width of each column based on the number of columns

TabList: All columns

ItemTab: Index of the column

Selectively display content based on name

		<view class="column" :style="{'width':columnWidth+'%'}"
			v-for="(itemTab,indexTab) in tabList" v-bind:key="indexTab">
			<view v-for="(item,index) in itemTab" v-bind:key="index">
				<slot :name="item"></slot>
			</view>
		</view>
Copy the code

3. Assign content

Get the total number of slots and let the preloaded content load first

this.childCount=Object.getOwnPropertyNames(this.$slots).length;
Copy the code

Wait for the preloaded content to finish loading before sorting the content

var that=this; this.$nextTick(function(){ that.refreshList(); });Copy the code