shwaterfall.vue 6.1 KB

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