mefabulousitem.vue 6.2 KB

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