小程序学习（十）：按照想要的顺序，显示遍历循环的数组

小程序学习（十）：按照想要的顺序，显示遍历循环的数组

2019年9月23日

直接放代码

<view class="all">
	<block wx:for='{{select}}' wx:key='index' wx:for-item='resume'>
	    <!-- if决定了如果没有则不显示，style决定了排列顺序 -->
	    <view wx:if='{{resume.sel_array.length !== 0}}' style="order:{{resume.order}}">
	      内容
	    </view>
	  </block>
  </view>

这里解释一下我的代码
其中的select是我js文件中需要遍历的数组，是数组套集合的形式，就是这样的数据

select: [  //表单中的选择器
  { order: 6, name: '类别', sel_array: [], value: '' }, //园区
  { order: 8, name: '类型', sel_array: [], value: '' }, //园区
  { order: 10, name: '控制因素', sel_array: [], value: '' }, //园区
  { order: 12, name: '班次', sel_array: [], value: '' },  //班次
  { order: 14, name: '部位', sel_array: [], value: '' },  //班次
],

1.其中resume.sel_array.length !== 0是展示的条件，如果该条没有内容，则不展示
2.其中style="order:{{resume.order}}"是顺序，可以从数据中看到，都有个order，这个数越小，越靠前
这是用flex布局中的order属性做的，为了解决让信息在时间的基础上按照是否完成分的情况等。
这样通过改变order就可以调节位置了，我写的数字很多，是为了更精准的分，如果只要求班次、部位在前，可以改order就可以了。

放css文件

page{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.all{
  width: 100%;
  display: flex;
  flex-direction: column;
}