mefabulousitem.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <template>
  2. <view class="water-flow-box" :style="{ margin: columnGap + 'px' }">
  3. <view class="water-flow-column" :style="{ 'margin-right': columnGap + 'px' }" v-for="(col, c) in colunmList" :key="c">
  4. <view class="item" :id="col.id" style="width: 100%;">
  5. <view
  6. v-for="(item, index) in col.list"
  7. :key="index"
  8. class="item_content"
  9. :style="{ 'margin-bottom': columnGap + 'px', background: item.background }"
  10. >
  11. <img :src="item.image" style="width: 100%;"></img>
  12. <view class="pubu">
  13. <view class="name">
  14. 清洁控油去角质洁面乳套装洗面奶氨基酸...
  15. </view>
  16. <view class="image">
  17. <view class="nickImg">
  18. <image src="../../static/head-on.png" class="tuxiang" mode=""></image>
  19. <view class="content-name">
  20. 自闭的...
  21. </view>
  22. </view>
  23. <view class="fabulous">
  24. <image class="good" src="../../static/login/good-job.png" mode=""></image>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. name: 'grass-water-flow',
  36. props: {
  37. fieldKey: {
  38. //关键比对key
  39. type: String,
  40. default: 'id'
  41. },
  42. idPrefix: {
  43. //前缀
  44. type: String,
  45. default: 'water-flow-'
  46. },
  47. colunmNumber: {
  48. //瀑布流列数
  49. type: Number,
  50. default: 2
  51. },
  52. columnGap: {
  53. //列间隔
  54. type: Number,
  55. default: 10
  56. },
  57. flowList: {
  58. // 瀑布流数据
  59. type: Array,
  60. required: true,
  61. default: function() {
  62. return [];
  63. }
  64. }
  65. },
  66. data() {
  67. return {
  68. colunmList: [], //列
  69. internalDataList: [], //内部操作数据
  70. refrenshColunmDataList: [] //记录加载的数据
  71. };
  72. },
  73. watch: {
  74. colunmNumber: function(v) {
  75. this.internalDataList = Object.assign([], this.refrenshColunmDataList);
  76. this.calculateColumn(v, false);
  77. },
  78. flowList: function(v) {
  79. this.internalDataList = Object.assign(this.internalDataList, v);
  80. if (this.internalDataList.length > 0) {
  81. this.getPushContainer();
  82. }
  83. },
  84. colunmList: {
  85. handler() {
  86. this.$nextTick(function() {
  87. this.getPushContainer();
  88. });
  89. },
  90. deep: true
  91. }
  92. },
  93. created() {
  94. this.internalDataList = Object.assign([], this.flowList);
  95. this.calculateColumn(this.colunmNumber, true);
  96. },
  97. mounted() {
  98. if (this.internalDataList.length > 0) {
  99. this.colunmList[0].list.push(this.internalDataList[0]);
  100. let shiftObj = this.internalDataList.shift();
  101. this.pushLoadData(shiftObj);
  102. }
  103. },
  104. methods: {
  105. /**
  106. * 计算列
  107. * @param {Object} size 列数
  108. * @param {Object} isCreate 是否初始化创建(created生命周期)
  109. */
  110. calculateColumn: function(size, isCreate) {
  111. this.colunmList = [];
  112. for (let i = 1; i <= size; i++) {
  113. let obj = {};
  114. obj.id = this.idPrefix + i;
  115. obj.list = [];
  116. this.colunmList.push(obj);
  117. }
  118. if (!isCreate) {
  119. if (this.internalDataList.length > 0) {
  120. this.colunmList[0].list.push(this.internalDataList[0]);
  121. let shiftObj = this.internalDataList.shift();
  122. this.pushLoadData(shiftObj);
  123. }
  124. }
  125. },
  126. /**
  127. * 获取节点信息
  128. */
  129. getPushContainer() {
  130. let sortList = [];
  131. const query = uni.createSelectorQuery().in(this);
  132. query
  133. .selectAll('.item')
  134. .boundingClientRect()
  135. .exec(res => {
  136. if (res) {
  137. sortList = res[0];
  138. sortList.sort(function(a, b) {
  139. return a.height - b.height;
  140. });
  141. this.pushShiftData(sortList[0]);
  142. }
  143. });
  144. },
  145. /**
  146. * 处理数据
  147. * @param {Object} pushObj
  148. */
  149. pushShiftData(pushObj) {
  150. if (this.internalDataList.length > 0) {
  151. for (let i = 0; i < this.colunmList.length; i++) {
  152. if (this.colunmList[i].id == pushObj.id) {
  153. this.colunmList[i].list.push(this.internalDataList[0]);
  154. let shiftObj = this.internalDataList.shift();
  155. this.pushLoadData(shiftObj);
  156. }
  157. }
  158. }
  159. },
  160. /**
  161. * 记录加载的数据
  162. * @param {Object} obj
  163. */
  164. pushLoadData(obj) {
  165. if (this.refrenshColunmDataList.length > 0) {
  166. let result = this.refrenshColunmDataList.some(item => {
  167. if (item[this.fieldKey] == obj[this.fieldKey]) {
  168. return true;
  169. }
  170. });
  171. if (!result) {
  172. this.refrenshColunmDataList.push(obj);
  173. }
  174. } else {
  175. this.refrenshColunmDataList.push(obj);
  176. }
  177. },
  178. /**
  179. * 外部刷新数据时,调用此方法,清理掉原有加载数据
  180. */
  181. externalRefrensh() {
  182. this.refrenshColunmDataList = [];
  183. for (let i = 0; i < this.colunmList.length; i++) {
  184. this.colunmList[i].list = [];
  185. }
  186. }
  187. }
  188. };
  189. </script>
  190. <style scoped>
  191. uni-view.water-flow-column{
  192. background-color: transparent;
  193. }
  194. .item_content{
  195. border-radius: 18rpx;
  196. margin-bottom: 42rpx;
  197. overflow: hidden;
  198. background-color: #fff;
  199. }
  200. .black{
  201. height: 30rpx;
  202. background-color: #f5f5f5;
  203. }
  204. .contentnumber{
  205. border-radius: 16rpx;
  206. font-size: 24rpx;
  207. font-family: PingFang SC, PingFang SC-Regular;
  208. font-weight: 400;
  209. color: #999999;
  210. margin-left: 10rpx;
  211. }
  212. .good{
  213. width: 29rpx;
  214. height: 31rpx;
  215. margin-left: 62rpx;
  216. }
  217. .content-name{
  218. width: 89rpx;
  219. color: #1a1a1a;
  220. font-size: 24rpx;
  221. font-family: PingFang SC, PingFang SC-Regular;
  222. font-weight: 400;
  223. white-space: nowrap;
  224. text-overflow: ellipsis;
  225. overflow: hidden;
  226. margin-left: 13rpx;
  227. }
  228. .tuxiang{
  229. width: 50rpx;
  230. height: 50rpx;
  231. }
  232. .image{
  233. display: flex;
  234. padding: 9rpx 18rpx 22rpx 22rpx ;
  235. justify-content: space-between;
  236. align-items: center;
  237. }
  238. .image .nickImg,.image .fabulous{
  239. display: flex;
  240. justify-content: space-between;
  241. align-items: center;
  242. }
  243. .name{
  244. padding: 15rpx 20rpx;
  245. width: 296rpx;
  246. white-space: nowrap;
  247. text-overflow: ellipsis;
  248. overflow: hidden;
  249. color: #000000;
  250. }
  251. /* 瀑布流最外层 */
  252. .water-flow-box {
  253. /* margin: 10px; */
  254. display: flex;
  255. flex-direction: row;
  256. height: auto;
  257. border-radius: 18rpx;
  258. }
  259. .water-flow-column {
  260. /* margin-right: 10px; */
  261. display: flex;
  262. flex-flow: column wrap;
  263. width: 100%;
  264. border-radius: 18rpx;
  265. background-color: white;
  266. /* margin-bottom: 42rpx; */
  267. }
  268. .water-flow-box .water-flow-column:last-child {
  269. margin-right: 0px !important;
  270. }
  271. .water-flow-column > .item > .item_content {
  272. /* margin-bottom: 10px; */
  273. color: #ffffff;
  274. text-align: center;
  275. width: 100%;
  276. }
  277. </style>